/*!
 * OIC Theme — core.css (v1.1 - responsive-first)
 * Purpose: One global, cacheable stylesheet for things that should NOT be duplicated.
 * Contains: Reset / Tokens / Base / Layout / A11y / Helpers
 * Notes:
 * - Keep this file stable. Put component/page styles in separate conditional files.
 * - All values are driven by tokens (CSS variables) to reduce repeated classes.
 */

/* =========================================================
   1) RESET (Lightweight + mobile-safe)
========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{ margin: 0; }

img,
picture,
video,
canvas,
svg{ display: block; max-width: 100%; height: auto; }

/* Avoid common overflow issues on mobile */
svg{ max-width: 100%; }
iframe{ max-width: 100%; }
:where(pre){ overflow: auto; }

input,
button,
textarea,
select{ font: inherit; color: inherit; }

button{ cursor: pointer; }

a{ color: inherit; text-decoration: none; }

/* Navigation lists should style themselves; content lists are handled in BASE */
ul, ol{ padding: 0; margin: 0; list-style: none; }

p, h1, h2, h3, h4, h5, h6{ margin: 0; }

table{ border-collapse: collapse; border-spacing: 0; width: 100%; }

/* Prevent flex/grid overflow issues (common cause of sidebar/container breaking) */
:where(.oic-wrap, .oic-container, .oic-layout, .oic-main, .oic-sidebar, .wp-site-blocks) *{
  min-width: 0;
}

/* =========================================================
   2) TOKENS (Design System)
   - Colors / Typography / Spacing / Radius / Shadows / Z / Motion / Container
========================================================= */
:root{
  /* ---------- Colors: Global Tokens v1 ---------- */
  --oic-color-primary: #0b7285;            /* Primary */
  --oic-color-secondary: #0aa2c0;          /* Secondary */
  --oic-color-bg: #f6f7f9;                /* Page background */
  --oic-color-surface: #ffffff;           /* Card/Section surface */
  --oic-color-text: #111827;              /* Primary text */
  --oic-color-text-2: #4b5563;            /* Secondary text */
  --oic-color-border: rgba(17,24,39,.12); /* Borders/dividers */
  --oic-color-on-primary: #ffffff;        /* Text on primary */
  --oic-color-link: var(--oic-color-primary);
  --oic-color-overlay: rgba(0,0,0,.45);

  /* States (optional but global & useful) */
  --oic-color-success: #16a34a;
  --oic-color-warning: #f59e0b;
  --oic-color-error: #dc2626;
  --oic-color-info: #2563eb;

  /* ---------- Typography ---------- */
  --oic-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --oic-font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --oic-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Fluid base size: scales smoothly from mobile to desktop */
  --oic-font-size-base: clamp(15px, 1.1vw, 16px);
  --oic-line-height-base: 1.75;

  /* Fluid heading scale (clamp = perfect for phone/tablet) */
  --oic-h1: clamp(28px, 3.2vw, 40px);
  --oic-h2: clamp(24px, 2.6vw, 32px);
  --oic-h3: clamp(20px, 2.1vw, 26px);
  --oic-h4: clamp(18px, 1.7vw, 22px);
  --oic-h5: clamp(16px, 1.35vw, 18px);
  --oic-h6: clamp(15px, 1.2vw, 16px);

  /* Weights */
  --oic-weight-regular: 400;
  --oic-weight-medium: 500;
  --oic-weight-semibold: 600;
  --oic-weight-bold: 700;

  /* ---------- Spacing scale ---------- */
  --oic-space-0: 0;
  --oic-space-1: 4px;
  --oic-space-2: 8px;
  --oic-space-3: 12px;
  --oic-space-4: 16px;
  --oic-space-5: 24px;
  --oic-space-6: 32px;
  --oic-space-7: 40px;
  --oic-space-8: 48px;
  --oic-space-9: 64px;

  /* Optional: fluid section padding (helps mobile) */
  --oic-section-pad: clamp(20px, 4vw, 32px);

  /* ---------- Radius scale (avoid custom px per layer) ---------- */
  --oic-radius-0: 0px;
  --oic-radius-1: 4px;
  --oic-radius-2: 8px;
  --oic-radius-3: 12px;
  --oic-radius-4: 16px;
  --oic-radius-5: 20px;
  --oic-radius-6: 24px;
  --oic-radius-7: 32px;
  --oic-radius-8: 40px;
  --oic-radius-9: 50px;

  --oic-radius-default: var(--oic-radius-3);

  /* ---------- Shadows ---------- */
  --oic-shadow-0: none;
  --oic-shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --oic-shadow-2: 0 6px 18px rgba(0,0,0,.10);
  --oic-shadow-3: 0 14px 34px rgba(0,0,0,.14);

  /* ---------- Z-index ---------- */
  --oic-z-0: 0;
  --oic-z-10: 10;
  --oic-z-100: 100;
  --oic-z-1000: 1000;
  --oic-z-9999: 9999;

  /* ---------- Motion ---------- */
  --oic-ease: cubic-bezier(.2,.8,.2,1);
  --oic-dur-1: 120ms;
  --oic-dur-2: 200ms;
  --oic-dur-3: 320ms;

  /* ---------- Container ---------- */
  --oic-container-max: 1280px;
  --oic-container-pad: clamp(14px, 3vw, 24px); /* auto for mobile/tablet/desktop */
}

/* ---------- Dark Mode Token Overrides (always available) ---------- */
html[data-theme="dark"]{
  /* Colors */
  --oic-color-bg: #0b1220;
  /* Site background: use inverse BG token in dark mode so the whole page follows night palette */
  --oic-color-site-bg: var(--oic-color-inverse-bg, var(--oic-color-bg));
  --oic-color-surface: #0f172a;
  --oic-color-text: #e5e7eb;
  --oic-color-text-2: rgba(229,231,235,.76);
  --oic-color-border: rgba(229,231,235,.14);
  --oic-color-link: #22b8cf;
  --oic-color-overlay: rgba(0,0,0,.55);

  /* Brand tweaks (keep identity but improve contrast) */
  --oic-color-primary: #22b8cf;
  --oic-color-secondary: #0aa2c0;
  --oic-color-on-primary: #06222a;

  /* States (slightly brighter on dark) */
  --oic-color-success: #22c55e;
  --oic-color-warning: #fbbf24;
  --oic-color-error: #f87171;
  --oic-color-info: #60a5fa;
}



/* =========================================================
   3) BASE (Global HTML styling)
========================================================= */
html, body{ height: 100%; }

body{
  font-family: var(--oic-font-body, var(--oic-font-sans));
  font-size: var(--oic-fs-base, var(--oic-font-size-base));
  line-height: var(--oic-line-height-base);
  font-weight: var(--oic-fw-body, 400);
  letter-spacing: var(--oic-letter-spacing-base, normal);
  color: var(--oic-color-text);
  /*
   * Background source priority:
   * 1) --oic-color-site-bg (Style Library: "Site Background")
   * 2) --oic-color-bg (fallback)
   */
  background: var(--oic-color-site-bg, var(--oic-color-bg));
  text-rendering: optimizeLegibility;
}

/* Better text rendering where available */
@supports (font-kerning: normal){
  body{ font-kerning: normal; }
}

a{
  color: var(--oic-color-link);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

h1, h2, h3, h4, h5, h6{
  font-weight: var(--oic-weight-bold);
  line-height: 1.25;
  color: var(--oic-color-text);
}
h1,h2,h3,h4,h5,h6{ font-family: var(--oic-font-headings, inherit); font-weight: var(--oic-fw-headings, var(--oic-weight-bold)); line-height: var(--oic-lh-headings, 1.25); letter-spacing: var(--oic-ls-headings, normal); }
h1{ font-size: var(--oic-fs-h1, var(--oic-h1)); }
h2{ font-size: var(--oic-fs-h2, var(--oic-h2)); }
h3{ font-size: var(--oic-fs-h3, var(--oic-h3)); }
h4{ font-size: var(--oic-h4); }
h5{ font-size: var(--oic-h5); }
h6{ font-size: var(--oic-h6); }

p{
  margin: 0 0 var(--oic-space-4);
  color: var(--oic-color-text);
}

/* Content wrappers (good for Gutenberg + Classic) */
:where(.entry-content, .oic-content, .wp-block-post-content){
  overflow-wrap: anywhere;
  word-break: normal;
}
:where(.entry-content, .oic-content, .wp-block-post-content) :where(img, video, iframe){
  border-radius: var(--oic-radius-default);
}

/* Lists inside content (not nav menus) */
:where(.entry-content, .oic-content, .wp-block-post-content) :where(ul, ol){
  margin: 0 0 var(--oic-space-4);
  padding-inline-start: 1.25em;
}
:where(.entry-content, .oic-content, .wp-block-post-content) :where(ul){ list-style: disc; }
:where(.entry-content, .oic-content, .wp-block-post-content) :where(ol){ list-style: decimal; }
:where(.entry-content, .oic-content, .wp-block-post-content) :where(li){ margin: .25em 0; }

/* Blockquote / code */
blockquote{
  margin: 0 0 var(--oic-space-4);
  padding: var(--oic-space-4);
  border-inline-start: 4px solid var(--oic-color-primary);
  background: color-mix(in srgb, var(--oic-color-surface) 92%, var(--oic-color-primary) 8%);
  border-radius: var(--oic-radius-default);
}
pre, code{ font-family: var(--oic-font-mono); }
pre{
  margin: 0 0 var(--oic-space-4);
  padding: var(--oic-space-4);
  background: color-mix(in srgb, var(--oic-color-surface) 92%, var(--oic-color-text) 8%);
  border: 1px solid var(--oic-color-border);
  border-radius: var(--oic-radius-default);
}

hr{
  border: 0;
  border-top: 1px solid var(--oic-color-border);
  margin: var(--oic-space-6) 0;
}

/* =========================================================
   4) LAYOUT (Container + common wrappers)
========================================================= */
.oic-container{
  width: 100%;
  max-width: var(--oic-container-max);
  margin-inline: auto;
  padding-inline: var(--oic-container-pad);
}

/* Alias (used in templates) */
.container{
  width: 100%;
  max-width: var(--oic-container-max);
  margin-inline: auto;
  padding-inline: var(--oic-container-pad);
}

.oic-section{
  padding-block: var(--oic-section-pad);
}

/* =========================================================
   P53/P54/P62) Columns Blueprint (Single Post/News/Photos)
   - Mobile: stacked + Mobile Order (P54)
   - Desktop (>= 783px): grid based on blueprint + RTL auto-flip (P54)
========================================================= */
.oic-cols{
  --oic-col-sidebar: 320px;
  --oic-col-list: 260px;
}

.oic-cols__content,
.oic-cols__sidebar,
.oic-cols__list{
  min-width: 0; /* prevent overflow */
}

@media (min-width: 783px){
  .oic-cols{
    display: grid;
    gap: var(--oic-cols-gap, var(--oic-space-6));
    align-items: start;
  }

  .oic-cols--one{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content";
  }

  .oic-cols--two{
    grid-template-columns: minmax(0, 1fr) var(--oic-col-sidebar);
    grid-template-areas: "content sidebar";
  }

  .oic-cols--three{
    grid-template-columns: var(--oic-col-list) minmax(0, 1fr) var(--oic-col-sidebar);
    grid-template-areas: "list content sidebar";
  }

  .oic-cols__content{ grid-area: content; }
  .oic-cols__sidebar{ grid-area: sidebar; }
  .oic-cols__list{ grid-area: list; }
}

/* P54) RTL auto-flip (Desktop only)
   - Mirrors the grid order when the site is RTL and the option is enabled.
*/
@media (min-width: 783px){
  html[dir="rtl"] .oic-cols--rtlflip.oic-cols--two{
    grid-template-columns: var(--oic-col-sidebar) minmax(0, 1fr);
    grid-template-areas: "sidebar content";
  }

  html[dir="rtl"] .oic-cols--rtlflip.oic-cols--three{
    grid-template-columns: var(--oic-col-sidebar) minmax(0, 1fr) var(--oic-col-list);
    grid-template-areas: "sidebar content list";
  }
}

/* P54) Mobile Order (<= 782px)
   - Stacked layout on mobile with a controllable order.
*/
@media (max-width: 782px){
  .oic-cols{
    display: flex;
    flex-direction: column;
    gap: var(--oic-cols-gap, var(--oic-space-6));
  }

  /* Default mobile stack order = Content → Sidebar → List */
  .oic-cols__content{ order: 1; }
  .oic-cols__sidebar{ order: 2; }
  .oic-cols__list{ order: 3; }

  .oic-cols--mob-content-only .oic-cols__sidebar,
  .oic-cols--mob-content-only .oic-cols__list{ display: none; }

  .oic-cols--mob-content-list-sidebar .oic-cols__list{ order: 2; }
  .oic-cols--mob-content-list-sidebar .oic-cols__sidebar{ order: 3; }
}

/* Generic surface (safe global) */
.oic-surface{
  background: var(--oic-color-surface);
  border: 1px solid var(--oic-color-border);
  border-radius: var(--oic-radius-default);
  box-shadow: var(--oic-shadow-1);
}

/* Gutenberg alignments (safe minimal) */
.alignwide{ width: 100%; }

/* Robust full-width without breaking small screens */
.alignfull{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Simple stack utility for vertical rhythm (optional but powerful) */
.oic-stack > * + *{
  margin-top: var(--oic-space-4);
}

/* =========================================================
   5) A11Y + INTERACTIONS
========================================================= */
:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--oic-color-primary) 70%, white 30%);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Better tap experience on touch devices */
@media (hover: none){
  a:hover{ text-decoration: none; }
}

/* =========================================================
   6) HELPERS (Minimal utilities)
========================================================= */
.oic-hidden{ display: none !important; }

.oic-sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.oic-mt-0{ margin-top: 0 !important; }
.oic-mb-0{ margin-bottom: 0 !important; }
.oic-text-center{ text-align: center !important; }

/* Radius helpers (optional): maps to scale tokens (0..50) */
.oic-r-0{ border-radius: var(--oic-radius-0) !important; }
.oic-r-1{ border-radius: var(--oic-radius-1) !important; }
.oic-r-2{ border-radius: var(--oic-radius-2) !important; }
.oic-r-3{ border-radius: var(--oic-radius-3) !important; }
.oic-r-4{ border-radius: var(--oic-radius-4) !important; }
.oic-r-5{ border-radius: var(--oic-radius-5) !important; }
.oic-r-6{ border-radius: var(--oic-radius-6) !important; }
.oic-r-7{ border-radius: var(--oic-radius-7) !important; }
.oic-r-8{ border-radius: var(--oic-radius-8) !important; }
.oic-r-9{ border-radius: var(--oic-radius-9) !important; }

.oic-border{ border: 1px solid var(--oic-color-border) !important; }
.oic-rounded{ border-radius: var(--oic-radius-default) !important; }

/* End of core.css */


/* =========================================
   Taxonomy Pills (Categories/Tags)
========================================= */
.oic-entry-tax{
  margin-top: 12px;
  margin-bottom: 18px;
}
.oic-entry-tax__row{
  display: block;
  margin-top: 10px;
}
.oic-entry-tax__label{
  font-size: 13px;
  font-family: var(--oic-font-meta, var(--oic-font-body));
  line-height: var(--oic-lh-meta, var(--oic-line-height-base));
  letter-spacing: var(--oic-ls-meta, var(--oic-letter-spacing-base, normal));
  opacity: .8;
  margin-bottom: 8px;
}
.oic-term-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.oic-term-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--oic-color-border);
  background: color-mix(in srgb, var(--oic-color-surface) 94%, var(--oic-color-text) 6%);
  color: var(--oic-color-text);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}
html[data-theme="dark"] .oic-term-pill{ background: color-mix(in srgb, var(--oic-color-surface) 92%, var(--oic-color-text) 8%); }

.oic-term-pill:hover{ background: color-mix(in srgb, var(--oic-color-surface) 88%, var(--oic-color-text) 12%); }
html[data-theme="dark"] .oic-term-pill:hover{ background: color-mix(in srgb, var(--oic-color-surface) 86%, var(--oic-color-text) 14%); }

/* =========================================
   Listing Tools (Archive/Taxonomy/Search)
   Patch: OIC-LC-P21
========================================= */
.oic-listing-tools{ margin-top: 10px; }
.oic-listing-tools--card{ margin-top: 12px; }
.oic-listing-tools__card{
  border: 1px solid var(--oic-color-border);
  background: var(--oic-color-surface);
  border-radius: 14px;
  padding: 10px 10px 6px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
html[data-theme="dark"] .oic-listing-tools__card{ box-shadow: 0 10px 22px rgba(0,0,0,.22); }
.oic-listing-tools__card .oic-term-pills--filter{ padding-inline: 8px; }

@media (max-width: 680px){
  .oic-listing-tools{ margin-top: 8px; }
  .oic-listing-tools__card{ border-radius: 12px; padding: 8px 8px 4px; box-shadow: 0 8px 18px rgba(0,0,0,.05); }
}

/* Term header */
.oic-term-header .oic-term-meta{
  margin-top: 6px;
  font-size: 12px;
  opacity: .7;
  font-family: var(--oic-font-meta, var(--oic-font-body));
  line-height: var(--oic-lh-meta, var(--oic-line-height-base));
  letter-spacing: var(--oic-ls-meta, var(--oic-letter-spacing-base, normal));
}

.oic-term-header .oic-term-meta__count{
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  line-height: 1;
  opacity: 1;
}

html[data-theme="dark"] .oic-term-header .oic-term-meta__count{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.oic-term-header .oic-archive-description{
  margin-top: 10px;
  max-width: 900px;
}

/* =========================================
   Single Meta Row (P67)
========================================= */
.oic-entry-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  opacity: .85;
}
.oic-entry-meta__item{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}
html[data-theme="dark"] .oic-entry-meta__item{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.oic-entry-meta__label{ opacity: .75; }

/* =========================================
   Prev / Next Navigation (P69)
========================================= */
.oic-prevnext{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0 8px;
}
.oic-prevnext__item{
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  text-decoration: none;
  color: inherit;
}
html[data-theme="dark"] .oic-prevnext__item{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.oic-prevnext__item:hover,
.oic-prevnext__item:focus-visible{
  border-color: var(--oic-color-primary);
}
.oic-prevnext__kicker{
  display: block;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}
.oic-prevnext__title{
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
@media (min-width: 768px){
  .oic-prevnext{ grid-template-columns: 1fr 1fr; }
}



/* P36: Taxonomy archive header polish */
.oic-term-header{margin-bottom:16px}
.oic-term-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:12px;opacity:.85}
.oic-term-meta__tax,
.oic-term-meta__count{
  padding:2px 8px;
  border:1px solid var(--oic-color-border);
  border-radius:999px;
  background: color-mix(in srgb, var(--oic-color-surface) 94%, var(--oic-color-text) 6%);
}
.oic-term-description{margin-top:10px;max-width:72ch}
.oic-term-description p{margin:0 0 10px}
.oic-term-description p:last-child{margin-bottom:0}

/* P37: Quick filter pills on taxonomy archives */
.oic-term-filters{margin-top:12px}
.oic-term-pills--filter{gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:2px 10px 6px;scroll-padding-inline:10px;touch-action:pan-x}
.oic-term-pills--filter::-webkit-scrollbar{height:6px}
.oic-term-pills--filter::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:999px}
html[data-theme="dark"] .oic-term-pills--filter::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.oic-term-pills--filter .oic-term-pill{
  padding: 5px 9px;
  font-size: 12px;
  background: color-mix(in srgb, var(--oic-color-surface) 96%, var(--oic-color-text) 4%);
}
.oic-term-pill--all{opacity:.9}
.oic-term-pill.is-current{
  border-color: var(--oic-color-primary);
  background: color-mix(in srgb, var(--oic-color-primary) 14%, var(--oic-color-surface) 86%);
  color: var(--oic-color-primary);
  font-weight: 600;
}
html[data-theme="dark"] .oic-term-pills--filter .oic-term-pill{background: color-mix(in srgb, var(--oic-color-surface) 92%, var(--oic-color-text) 8%)}
html[data-theme="dark"] .oic-term-pill.is-current{background: color-mix(in srgb, var(--oic-color-primary) 18%, var(--oic-color-surface) 82%)}

/* P39: "More" dropdown for taxonomy quick filter (no JS, accessible) */
.oic-term-filters__more{display:inline-block}
.oic-term-filters__more summary{list-style:none;cursor:pointer;user-select:none}
.oic-term-filters__more summary::-webkit-details-marker{display:none}
.oic-term-pill--more{opacity:.95}
.oic-term-pills--more{margin-top:8px}

@media (min-width: 768px){
  /* On larger screens we can wrap instead of scroll */
  .oic-term-pills--filter{flex-wrap:wrap;overflow:visible;padding-bottom:0}
}


/* =========================================================
   P72: Single Layers (Background + Border) via Style Library
   - These are permanent layers (not debug).
   - Controlled by compiled tokens variables.
   ========================================================= */

.layer-main-content{
  --oic-cols-gap: var(--oic-card-main-content-gap, var(--oic-space-6));
  background: var(--oic-layer-main-content-bg, transparent);
  border: var(--oic-card-main-content-border-width, 0px) solid var(--oic-layer-main-content-border-color, transparent);
  padding: var(--oic-card-main-content-pad-top, 0px) var(--oic-card-main-content-pad-right, 0px) var(--oic-card-main-content-pad-bottom, 0px) var(--oic-card-main-content-pad-left, 0px);
  margin-top: var(--oic-card-main-content-mar-top, 0px);
  margin-bottom: var(--oic-card-main-content-mar-bottom, 0px);
  border-radius: var(--oic-card-main-content-radius, 0px);
  box-shadow: var(--oic-card-main-content-shadow, var(--oic-shadow-0));
  gap: var(--oic-card-main-content-gap, 0px);
}

/* HF4: Do not break container centering when main wrapper uses .container/.oic-container.
   - In admin UI, fields are named MarginLeft/MarginRight, but for the main container these must not override auto centering.
   - We interpret them as extra inner spacing (added to padding) when the element is a container.
*/
.layer-main-content.container,
.layer-main-content.oic-container{
  margin-inline: auto;
  /* keep top/bottom margins from base rule */
  padding-left: calc(var(--oic-card-main-content-pad-left, 0px) + var(--oic-card-main-content-mar-left, 0px));
  padding-right: calc(var(--oic-card-main-content-pad-right, 0px) + var(--oic-card-main-content-mar-right, 0px));
}

.layer-main-content:not(.container):not(.oic-container){
  margin-left: var(--oic-card-main-content-mar-left, 0px);
  margin-right: var(--oic-card-main-content-mar-right, 0px);
}

.layer-oic-cols__content{
  background: var(--oic-layer-content-bg, transparent);
  border: 0 solid var(--oic-layer-content-border-color, transparent);
}

.layer-oic-cols__sidebar{
  background: var(--oic-layer-sidebar-bg, transparent);
  border: var(--oic-card-layer-frame-border-width, 0px) solid var(--oic-layer-sidebar-border-color, transparent);
  padding: var(--oic-card-layer-frame-pad-top, 0px) var(--oic-card-layer-frame-pad-right, 0px) var(--oic-card-layer-frame-pad-bottom, 0px) var(--oic-card-layer-frame-pad-left, 0px);
  margin-top: var(--oic-card-layer-frame-mar-top, 0px);
  margin-inline-end: var(--oic-card-layer-frame-mar-right, 0px);
  margin-bottom: var(--oic-card-layer-frame-mar-bottom, 0px);
  margin-inline-start: var(--oic-card-layer-frame-mar-left, 0px);
  border-radius: var(--oic-card-layer-frame-radius, 0px);
  box-shadow: var(--oic-card-layer-frame-shadow, var(--oic-shadow-0));
  gap: var(--oic-card-layer-frame-gap, 0px);
}

.layer-oic-cols__list{
  background: var(--oic-layer-list-bg, transparent);
  border: var(--oic-card-layer-frame-border-width, 0px) solid var(--oic-layer-list-border-color, transparent);
  padding: var(--oic-card-layer-frame-pad-top, 0px) var(--oic-card-layer-frame-pad-right, 0px) var(--oic-card-layer-frame-pad-bottom, 0px) var(--oic-card-layer-frame-pad-left, 0px);
  margin-top: var(--oic-card-layer-frame-mar-top, 0px);
  margin-inline-end: var(--oic-card-layer-frame-mar-right, 0px);
  margin-bottom: var(--oic-card-layer-frame-mar-bottom, 0px);
  margin-inline-start: var(--oic-card-layer-frame-mar-left, 0px);
  border-radius: var(--oic-card-layer-frame-radius, 0px);
  box-shadow: var(--oic-card-layer-frame-shadow, var(--oic-shadow-0));
  gap: var(--oic-card-layer-frame-gap, 0px);
}

.layer-oic-entry-content{
  background: var(--oic-layer-entry-bg, transparent);
  border: var(--oic-card-layer-frame-border-width, 0px) solid var(--oic-layer-entry-border-color, transparent);
  padding: var(--oic-card-layer-frame-pad-top, 0px) var(--oic-card-layer-frame-pad-right, 0px) var(--oic-card-layer-frame-pad-bottom, 0px) var(--oic-card-layer-frame-pad-left, 0px);
  margin-top: var(--oic-card-layer-frame-mar-top, 0px);
  margin-inline-end: var(--oic-card-layer-frame-mar-right, 0px);
  margin-bottom: var(--oic-card-layer-frame-mar-bottom, 0px);
  margin-inline-start: var(--oic-card-layer-frame-mar-left, 0px);
  border-radius: var(--oic-card-layer-frame-radius, 0px);
  box-shadow: var(--oic-card-layer-frame-shadow, var(--oic-shadow-0));
  gap: var(--oic-card-layer-frame-gap, 0px);
}


/* Buttons Layers (Style Library) */
.layer-oic-layers-buttons-l,
.layer-oic-layers-buttons-m,
.layer-oic-layers-buttons-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--oic-radius-md, 10px);
  background: var(--oic-layer-buttons-m-bg);
  border-color: var(--oic-layer-buttons-m-border-color);
  color: var(--oic-layer-buttons-m-text, currentColor);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.layer-oic-layers-buttons-l:hover,
.layer-oic-layers-buttons-l:focus,
.layer-oic-layers-buttons-m:hover,
.layer-oic-layers-buttons-m:focus,
.layer-oic-layers-buttons-sm:hover,
.layer-oic-layers-buttons-sm:focus {
  background: var(--oic-layer-buttons-m-bg-hover, var(--oic-layer-buttons-m-bg));
  border-color: var(--oic-layer-buttons-m-border-color-hover, var(--oic-layer-buttons-m-border-color));
  color: var(--oic-layer-buttons-m-text-hover, var(--oic-layer-buttons-m-text, currentColor));
}

.layer-oic-layers-buttons-l { padding: 10px 14px; font-size: 14px; }
.layer-oic-layers-buttons-m { padding: 8px 12px; font-size: 13px; }
.layer-oic-layers-buttons-sm { padding: 6px 10px; font-size: 12px; }

/* Map each size to its vars */
.layer-oic-layers-buttons-l {
  background: var(--oic-layer-buttons-l-bg);
  border-color: var(--oic-layer-buttons-l-border-color);
  color: var(--oic-layer-buttons-l-text, currentColor);
}
.layer-oic-layers-buttons-l:hover,
.layer-oic-layers-buttons-l:focus {
  background: var(--oic-layer-buttons-l-bg-hover, var(--oic-layer-buttons-l-bg));
  border-color: var(--oic-layer-buttons-l-border-color-hover, var(--oic-layer-buttons-l-border-color));
  color: var(--oic-layer-buttons-l-text-hover, var(--oic-layer-buttons-l-text, currentColor));
}

.layer-oic-layers-buttons-m {
  background: var(--oic-layer-buttons-m-bg);
  border-color: var(--oic-layer-buttons-m-border-color);
  color: var(--oic-layer-buttons-m-text, currentColor);
}
.layer-oic-layers-buttons-m:hover,
.layer-oic-layers-buttons-m:focus {
  background: var(--oic-layer-buttons-m-bg-hover, var(--oic-layer-buttons-m-bg));
  border-color: var(--oic-layer-buttons-m-border-color-hover, var(--oic-layer-buttons-m-border-color));
  color: var(--oic-layer-buttons-m-text-hover, var(--oic-layer-buttons-m-text, currentColor));
}

.layer-oic-layers-buttons-sm {
  background: var(--oic-layer-buttons-sm-bg);
  border-color: var(--oic-layer-buttons-sm-border-color);
  color: var(--oic-layer-buttons-sm-text, currentColor);
}
.layer-oic-layers-buttons-sm:hover,
.layer-oic-layers-buttons-sm:focus {
  background: var(--oic-layer-buttons-sm-bg-hover, var(--oic-layer-buttons-sm-bg));
  border-color: var(--oic-layer-buttons-sm-border-color-hover, var(--oic-layer-buttons-sm-border-color));
  color: var(--oic-layer-buttons-sm-text-hover, var(--oic-layer-buttons-sm-text, currentColor));
}

/* Label Layers (Categories/Tags) */
.layer-oic-layers-cat-card,
.layer-oic-layers-tag-card,
.layer-oic-layers-cat-singel,
.layer-oic-layers-tag-singel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-style: solid;
  border-width: 1px;
  border-radius: 999px;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Card (smaller) */
.layer-oic-layers-cat-card,
.layer-oic-layers-tag-card { padding: 5px 8px; font-size: 12px; }

/* Single (bigger) */
.layer-oic-layers-cat-singel,
.layer-oic-layers-tag-singel { padding: 7px 10px; font-size: 13px; }

.layer-oic-layers-cat-card {
  background: var(--oic-layer-cat-card-bg);
  border-color: var(--oic-layer-cat-card-border-color);
  color: var(--oic-layer-cat-card-text, currentColor);
}
.layer-oic-layers-cat-card:hover,
.layer-oic-layers-cat-card:focus {
  background: var(--oic-layer-cat-card-bg-hover, var(--oic-layer-cat-card-bg));
  border-color: var(--oic-layer-cat-card-border-color-hover, var(--oic-layer-cat-card-border-color));
  color: var(--oic-layer-cat-card-text-hover, var(--oic-layer-cat-card-text, currentColor));
}

.layer-oic-layers-cat-singel {
  background: var(--oic-layer-cat-singel-bg);
  border-color: var(--oic-layer-cat-singel-border-color);
  color: var(--oic-layer-cat-singel-text, currentColor);
}
.layer-oic-layers-cat-singel:hover,
.layer-oic-layers-cat-singel:focus {
  background: var(--oic-layer-cat-singel-bg-hover, var(--oic-layer-cat-singel-bg));
  border-color: var(--oic-layer-cat-singel-border-color-hover, var(--oic-layer-cat-singel-border-color));
  color: var(--oic-layer-cat-singel-text-hover, var(--oic-layer-cat-singel-text, currentColor));
}

.layer-oic-layers-tag-card {
  background: var(--oic-layer-tag-card-bg);
  border-color: var(--oic-layer-tag-card-border-color);
  color: var(--oic-layer-tag-card-text, currentColor);
}
.layer-oic-layers-tag-card:hover,
.layer-oic-layers-tag-card:focus {
  background: var(--oic-layer-tag-card-bg-hover, var(--oic-layer-tag-card-bg));
  border-color: var(--oic-layer-tag-card-border-color-hover, var(--oic-layer-tag-card-border-color));
  color: var(--oic-layer-tag-card-text-hover, var(--oic-layer-tag-card-text, currentColor));
}

.layer-oic-layers-tag-singel {
  background: var(--oic-layer-tag-singel-bg);
  border-color: var(--oic-layer-tag-singel-border-color);
  color: var(--oic-layer-tag-singel-text, currentColor);
}
.layer-oic-layers-tag-singel:hover,
.layer-oic-layers-tag-singel:focus {
  background: var(--oic-layer-tag-singel-bg-hover, var(--oic-layer-tag-singel-bg));
  border-color: var(--oic-layer-tag-singel-border-color-hover, var(--oic-layer-tag-singel-border-color));
  color: var(--oic-layer-tag-singel-text-hover, var(--oic-layer-tag-singel-text, currentColor));
}

@media (prefers-reduced-motion: reduce) {
  .layer-oic-layers-buttons-l,
  .layer-oic-layers-buttons-m,
  .layer-oic-layers-buttons-sm,
  .layer-oic-layers-cat-card,
  .layer-oic-layers-tag-card,
  .layer-oic-layers-cat-singel,
  .layer-oic-layers-tag-singel { transition: none; }
}


/* P76: Remove default widget spacing inside List/Sidebar so Layer Card controls are the single source of spacing */
.layer-oic-cols__sidebar,
.layer-oic-cols__list{
  display: flex;
  flex-direction: column;
  gap: var(--oic-card-layer-frame-gap, 0px);
}

/* Reset common widget wrappers so padding/margins are controlled via the layer card (not widget defaults) */
.layer-oic-cols__sidebar .widget,
.layer-oic-cols__list .widget{
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.layer-oic-cols__sidebar .widget > *:first-child,
.layer-oic-cols__list .widget > *:first-child{
  margin-top: 0;
}
.layer-oic-cols__sidebar .widget > *:last-child,
.layer-oic-cols__list .widget > *:last-child{
  margin-bottom: 0;
}
.layer-oic-cols__sidebar ul,
.layer-oic-cols__list ul{
  margin: 0;
  padding: 0;
}
/* Dark mode: force layer backgrounds to official dark surfaces */
html[data-theme="dark"] .layer-main-content,
html[data-theme="dark"] .layer-oic-cols__content,
html[data-theme="dark"] .layer-oic-cols__sidebar,
html[data-theme="dark"] .layer-oic-cols__list,
html[data-theme="dark"] .layer-oic-entry-content{
  background: var(--oic-color-surface);
  border-color: var(--oic-color-border);
}


/* =========================================================
   Breadcrumbs (P79)
   ========================================================= */
.oic-breadcrumbs{
  margin: 0 0 var(--oic-space-12,12px) 0;
  padding: 0;
  color: var(--oic-color-text-2, rgba(0,0,0,.65));
  font-size: 14px;
  line-height: 1.4;
}
.oic-breadcrumbs ol{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.oic-breadcrumbs li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.oic-breadcrumbs li + li:before{
  content: "/";
  opacity: .5;
  display: inline-block;
  margin-inline: 6px 0;
}
.oic-breadcrumbs a{
  color: inherit;
  text-decoration: none;
}
.oic-breadcrumbs a:hover,
.oic-breadcrumbs a:focus{
  text-decoration: underline;
}
.oic-breadcrumbs__current{
  color: var(--oic-color-text, rgba(0,0,0,.9));
  font-weight: 600;
}