/* ============================================================
   OpiDev Skin — Layout & Components
   Built on CSS Grid + Flexbox. No Bootstrap. References
   tokens.css for all colour/spacing/type values.

   Pane styling is by CLASS only (per DNN guidance pane IDs
   must not be styled directly). Every pane carries an
   .opi-pane class plus a span class (.opi-c12, .opi-c6 ...).
   ============================================================ */

/* ---------- Reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--opi-font-body);
    font-size: var(--opi-fs-base);
    line-height: var(--opi-lh);
    color: var(--opi-text);
    background: var(--opi-bg);
    -webkit-font-smoothing: antialiased;
    transition: background var(--opi-dur) var(--opi-ease),
                color var(--opi-dur) var(--opi-ease);
}

img { max-width: 100%; height: auto; }

a { color: var(--opi-brand); text-decoration: none; transition: color var(--opi-dur) var(--opi-ease); }
a:hover { color: var(--opi-brand-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--opi-font-head);
    color: var(--opi-heading);
    line-height: var(--opi-lh-head);
    margin: 0 0 var(--opi-space-4);
    font-weight: 700;
}
h1 { font-size: var(--opi-fs-h1); }
h2 { font-size: var(--opi-fs-h2); }
h3 { font-size: var(--opi-fs-h3); }
p  { margin: 0 0 var(--opi-space-4); }

/* ---------- Page shell ---------- */
#Container { width: 100%; overflow-x: clip; }
#MainWrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* A reusable centred container */
.opi-container {
    width: 100%;
    max-width: var(--opi-container);
    margin-inline: auto;
    padding-inline: var(--opi-space-5);
}

/* ============================================================
   GRID SYSTEM
   .opi-row is a 12-column grid. Pane span classes set how many
   columns each pane occupies on desktop. Everything collapses
   to a single column at the md breakpoint (<768px).
   ============================================================ */
.opi-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--opi-gap);
    width: 100%;
}

/* span helpers (desktop) */
.opi-c12 { grid-column: span 12; }
.opi-c9  { grid-column: span 9;  }
.opi-c8  { grid-column: span 8;  }
.opi-c7  { grid-column: span 7;  }
.opi-c6  { grid-column: span 6;  }
.opi-c5  { grid-column: span 5;  }
.opi-c4  { grid-column: span 4;  }
.opi-c3  { grid-column: span 3;  }

/* A pane that contains no modules collapses to nothing so the
   grid never shows an orphaned empty column. DNN adds the
   .DnnEmptyPane-like state; we also guard with :empty. */
.opi-pane:empty { display: none; }

/* Pane breathing room */
.opi-pane { min-width: 0; }      /* prevents grid blowout from wide content */

/* ============================================================
   HEADER
   ============================================================ */
#topHeader {
    background: var(--opi-surface-sunken);
    border-bottom: 1px solid var(--opi-border);
    font-size: var(--opi-fs-sm);
    color: var(--opi-text-muted);
}
#topHeader .opi-row { gap: var(--opi-space-4); padding-block: var(--opi-space-2); align-items: center; }
.opi-topcontact { display: flex; gap: var(--opi-space-5); flex-wrap: wrap; align-items: center; }
.opi-topsocial  { display: flex; gap: var(--opi-space-3); justify-content: flex-end; align-items: center; }
.opi-topsocial a { color: var(--opi-text-muted); font-size: 1rem; }
.opi-topsocial a:hover { color: var(--opi-brand); }

#Header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--opi-surface);
    border-bottom: 1px solid var(--opi-border);
    box-shadow: var(--opi-shadow-sm);
}
.opi-headbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--opi-space-5);
    min-height: var(--opi-header-h);
    padding-block: var(--opi-space-2);
}
.opi-logo img { max-height: 48px; width: auto; }
.opi-head-right { display: flex; align-items: center; gap: var(--opi-space-4); }

/* search skin object */
.opi-search { display: flex; align-items: center; }
.opi-search .SearchIcon, .opi-search input {
    border: 1px solid var(--opi-border-strong);
    background: var(--opi-bg);
    color: var(--opi-text);
    border-radius: var(--opi-radius-sm);
}
.opi-search input { padding: .4rem .6rem; }

/* hamburger — hidden on desktop */
.opi-burger {
    display: none;
    flex-direction: column; gap: 5px;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--opi-border-strong);
    border-radius: var(--opi-radius-sm); cursor: pointer;
}
.opi-burger span {
    width: 22px; height: 2px; background: var(--opi-text);
    transition: transform var(--opi-dur) var(--opi-ease),
                opacity var(--opi-dur) var(--opi-ease);
}
body.opi-nav-open .opi-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.opi-nav-open .opi-burger span:nth-child(2) { opacity: 0; }
body.opi-nav-open .opi-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   BANNER / HERO  (full-bleed pane)
   ============================================================ */
#Banner { width: 100%; }
.opi-banner { width: 100%; }
.opi-banner:empty { display: none; }

/* BodyTop full-width strip */
.opi-bodytop { width: 100%; }
.opi-bodytop:empty { display: none; }

/* ============================================================
   MAIN BODY
   ============================================================ */
#MainBody { flex: 1 0 auto; padding-block: var(--opi-space-7); }
#MainBody > .opi-container > * + * { margin-top: var(--opi-space-6); }

/* full-width pane inside body */
.opi-full { grid-column: 1 / -1; }

/* The sidebar+content composite rows: on desktop the named
   sidebar (LeftPane / RightPane) sits beside a nested column. */
.opi-sidebar-left  { grid-column: span 3; }
.opi-sidebar-right { grid-column: span 4; }
.opi-maincol-9     { grid-column: span 9; }
.opi-maincol-8     { grid-column: span 8; }

/* nested stacks inside the main column keep their own spacing */
.opi-stack > * + * { margin-top: var(--opi-gap); }

/* ============================================================
   FOOTER
   Zones collapse to nothing when their panes are empty, and only
   take on padding / background / border when they hold content.
   (:has() lets us detect a populated pane; DNN renders module
   markup inside .opi-pane only when a module is present.)
   ============================================================ */

/* FooterSocial: hidden unless it has a populated pane */
#FooterSocial { display: none; }
#FooterSocial:has(.opi-pane *) {
    display: block;
    background: var(--opi-surface-alt);
}
#FooterSocial .opi-row { padding-block: var(--opi-space-4); }

/* MainFooter: hidden unless at least one footer pane has content */
#MainFooter { display: none; }
#MainFooter:has(.opi-pane *) {
    display: block;
    background: var(--opi-surface-sunken);
    color: var(--opi-text-muted);
    border-top: 1px solid var(--opi-border);
    padding-block: var(--opi-space-6);
}
#MainFooter .opi-row + .opi-row { margin-top: var(--opi-space-5); }
#MainFooter h1, #MainFooter h2, #MainFooter h3, #MainFooter h4 { color: var(--opi-text); font-size: var(--opi-fs-lg); }
#MainFooter a { color: var(--opi-text-muted); }
#MainFooter a:hover { color: var(--opi-brand); }

/* Empty rows inside the footer take no vertical space */
#MainFooter .opi-row:not(:has(.opi-pane *)) { display: none; }

#MainCopyright {
    background: var(--opi-surface-sunken);
    border-top: 1px solid var(--opi-border);
    font-size: var(--opi-fs-sm);
    color: var(--opi-text-muted);
    padding-block: var(--opi-space-4);
}
.opi-copyrow {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--opi-space-4); flex-wrap: wrap;
}
.opi-copyrow a { color: var(--opi-text-muted); }
.opi-copyrow a:hover { color: var(--opi-brand); }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.opi-totop {
    position: fixed; right: var(--opi-space-5); bottom: var(--opi-space-5);
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--opi-brand); color: var(--opi-brand-contrast);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--opi-shadow-md); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity var(--opi-dur) var(--opi-ease),
                transform var(--opi-dur) var(--opi-ease),
                visibility var(--opi-dur);
    border: none; z-index: 900;
}
.opi-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ============================================================
   RESPONSIVE — single set of breakpoints, no duplicated markup
   ============================================================ */

/* Tablet: collapse 3/4-col sidebars sensibly */
@media (max-width: 991.98px) {
    .opi-sidebar-left,
    .opi-sidebar-right,
    .opi-maincol-9,
    .opi-maincol-8 { grid-column: 1 / -1; }

    .opi-c3 { grid-column: span 6; }   /* 4-up becomes 2-up */
    .opi-c4 { grid-column: span 6; }
}

/* Mobile: everything stacks; off-canvas nav engages */
@media (max-width: 767.98px) {
    .opi-row > [class*="opi-c"] { grid-column: 1 / -1; }

    .opi-burger { display: flex; }

    /* desktop menu hidden, drawer used instead */
    .opi-desktop-menu { display: none; }

    .opi-topsocial { display: none; }   /* declutter top bar on phones */
    .opi-headbar { min-height: 60px; }

    .opi-copyrow { justify-content: center; text-align: center; }
}

/* Desktop: ensure drawer + its overlay never show */
@media (min-width: 768px) {
    .opi-drawer, .opi-drawer-overlay { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}