/*
  Theme Magii (no external libraries)
  Visual basis: provided index.html mock (dark arcane, glassy panels, parallax hero)
*/
/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ height:100%; }
body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color:#E8E8EA; background:radial-gradient(circle at 20% 10%, #2A2640, transparent 40%),
    radial-gradient(circle at 80% 30%, #302520, transparent 45%),
    radial-gradient(circle at bottom, #152431, transparent 50%),
    #0E1118; overflow:hidden; /* scroll happens inside .parallax-root */ }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
/* ---- Parallax root ---- */
.parallax-root{ height:100vh; overflow-y:auto; overflow-x:hidden; perspective:1px; transform-style:preserve-3d; scroll-behavior:smooth; }
/* ---- Header wrapper (hero + categories strip) ---- */
.magii-header{ position:relative; z-index:10; }
/* ---- Basic layout helpers (bootstrap-lite) ---- */
/* NOTE: Magii uses symmetric gutters by design. Right gutter is not scrollbar-compensated
   (user wants identical visible padding left/right and consistent right alignment). */
.container, .container-fluid{ width:100%; margin:0 auto; padding-left:var(--magii-gutter); padding-right:var(--magii-gutter); }
/* In Magii we intentionally use fluid, full-width containers (gutters handled via padding). */
.container{ max-width:none; }
.container-fluid{ max-width:none; }
.row{ display:flex; flex-wrap:wrap; margin-left:-15px; margin-right:-15px; }
[class*="col-"]{ padding-left:15px; padding-right:15px; min-width:0; }
/* XS (default) */
.col-xs-12{ flex:0 0 100%; max-width:100%; }
.col-xs-6{ flex:0 0 50%; max-width:50%; }
@media (min-width: 768px){.col-sm-12{ flex:0 0 100%; max-width:100%; }
.col-sm-10{ flex:0 0 83.3333%; max-width:83.3333%; }
.col-sm-9{ flex:0 0 75%; max-width:75%; }
.col-sm-8{ flex:0 0 66.6667%; max-width:66.6667%; }
.col-sm-6{ flex:0 0 50%; max-width:50%; }
.col-sm-4{ flex:0 0 33.3333%; max-width:33.3333%; }
.col-sm-3{ flex:0 0 25%; max-width:25%; }}
@media (min-width: 992px){.col-md-12{ flex:0 0 100%; max-width:100%; }
.col-md-9{ flex:0 0 75%; max-width:75%; }
.col-md-8{ flex:0 0 66.6667%; max-width:66.6667%; }
.col-md-7{ flex:0 0 58.3333%; max-width:58.3333%; }
.col-md-6{ flex:0 0 50%; max-width:50%; }
.col-md-4{ flex:0 0 33.3333%; max-width:33.3333%; }
.col-md-3{ flex:0 0 25%; max-width:25%; }
.col-md-2{ flex:0 0 16.6667%; max-width:16.6667%; }}
@media (min-width: 1200px){.col-lg-12{ flex:0 0 100%; max-width:100%; }
.col-lg-9{ flex:0 0 75%; max-width:75%; }
.col-lg-6{ flex:0 0 50%; max-width:50%; }
.col-lg-4{ flex:0 0 33.3333%; max-width:33.3333%; }
.col-lg-3{ flex:0 0 25%; max-width:25%; }}
.hidden-xs{ display:none !important; }
@media (min-width: 768px){.hidden-xs{ display:block !important; }}
/* Bootstrap hidden helpers used by default templates */
.hidden-sm, .hidden-md{ display:inline !important; }
@media (min-width: 768px) and (max-width: 991px){.hidden-sm{ display:none !important; }}
@media (min-width: 992px) and (max-width: 1199px){.hidden-md{ display:none !important; }}
/* show button labels everywhere (we hide FA icons, so keep text visible) */
.button-group .hidden-xs.hidden-sm.hidden-md{ display:inline !important; }
/* ---- Components ---- */
.alert{ border-radius:16px; padding:12px 14px; margin:14px 0; background:rgba(15,18,26,0.7); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(8px); }
.alert-success{ border-color:rgba(105,227,166,0.25); }
.alert-danger{ border-color:rgba(255,124,78,0.25); }
.alert .close{ float:right; border:0; background:transparent; color:inherit; font-size:18px; cursor:pointer; }
.breadcrumb{ list-style:none; padding:10px 0; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:8px; color:#BDBEC1; }
/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6{ margin:0 0 14px; font-family:"Playfair Display", Georgia, serif; font-weight:700; line-height:1.15; color:#D6983C; }
h1{ font-size:clamp(28px, 3vw, 38px); }
h2{ font-size:clamp(24px, 2.2vw, 30px); }
h3{ font-size:clamp(20px, 1.8vw, 24px); }
h4{ font-size:18px; }
h5, h6{ font-size:16px; }
.magii-page-heading{ margin-bottom:14px; line-height:1.08; }
.magii-page-heading--line{ display:flex; align-items:center; gap:14px; min-width:0; }
.magii-page-heading--line::after{ content:""; flex:1 1 auto; min-width:24px; height:2px; background:#2F3640; position:relative; top:0.10em; }
.magii-space-bottom{ margin-bottom:16px; }
.magii-space-top{ margin-top:16px; }
.magii-space-bottom-sm{ margin-bottom:12px; }
.magii-copy-prewrap{ white-space:pre-wrap; }
.magii-text-meta{ font-size:12px; line-height:1.45; color:#8992A0; }
.magii-link-inherit{ color:inherit; }
.magii-link-inherit:hover,
.magii-link-inherit:focus{ color:inherit; }
.magii-empty--flush{ padding:0; }
.magii-vtop{ vertical-align:top; }
.magii-nowrap{ white-space:nowrap; }
.magii-w-50{ width:50%; }
.magii-w-20{ width:20px; }
.breadcrumb li::after{ content:"›"; margin-left:8px; opacity:0.55; }
.breadcrumb li:last-child::after{ content:""; }
/* ---- Forms and buttons ---- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select, textarea{ width:100%; padding:12px 14px; border-radius:7px; border:1px solid #2C3038; background:#13151F; color:#E8E8EA; outline:none; }
.form-control:focus,
input:focus, select:focus, textarea:focus{ border-color:#3E3099; box-shadow:0 0 0 4px rgba(101,70,255,0.14); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:7px; border:1px solid #31353D; background:#12151F; color:#E8E8EA; cursor:pointer; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,0.28); text-decoration:none; }
.btn:active{ transform:translateY(0); }
.btn[disabled],
.btn.disabled{ opacity:0.55; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-primary{ border-color:#754926; background:linear-gradient(135deg, #5E42ED, #CF6744); }
.btn-link{ background:transparent; border-color:transparent; padding:0; }
.btn-group{ display:inline-flex; gap:8px; }
.list-unstyled{ list-style:none; padding-left:0; margin:0; }
hr{ border:0; height:1px; background:#272C34; margin:18px 0; }
/* Font Awesome is loaded explicitly in the theme header; do not suppress icons globally. */
/* ---- Page wrapper ---- */
.magii-page{ position:relative; z-index:5; padding-bottom:15px; }
.magii-page .container{ width:100%; /* Force full-width even if any third-party styles attempt to clamp .container */ max-width:none !important; margin-left:0; margin-right:0; padding-left:var(--magii-gutter); padding-right:var(--magii-gutter); padding-top:var(--magii-page-top-pad); }
/* Main 3-column layout (only the outer row)
   We use CSS Grid here to avoid flex-wrap/col-* clamp edge-cases.
   The row gets the helper classes (magii-layout + has-left/has-right) from magii_shim.js.
*/
/* (Legacy bootstrap-row layout removed; theme uses .magii-shell grid.) */
/* Let content shrink properly in grid */
.magii-content-col{ min-width:0; max-width:none; }
#content{ min-width:0; max-width:none; }
/* ---- Sidebars ---- */
#column-left, #column-right{ align-self:flex-start; background:linear-gradient(180deg, #191E2C, #131827); border-radius:20px; padding:22px; border:1px solid #202033; box-shadow:0 0 26px rgba(0,0,0,0.35); }
/* Left sidebar: show each published module as its own card */
#column-left.magii-shell__left{ /* remove the "one big panel" look — modules provide their own cards */ background:transparent; border:0; box-shadow:none; padding:0; display:flex; flex-direction:column; /* Keep vertical rhythm consistent with the shell grid */ gap:30px; }
#column-left .magii-left-module{ background:linear-gradient(180deg, #191E2C, #131827); border:1px solid #202033; border-radius:20px; box-shadow:0 0 26px rgba(0,0,0,0.28); padding:18px; overflow:hidden; }
/* Prevent first/last-child margins inside the card from breaking vertical rhythm */
#column-left .magii-left-module > *:first-child{ margin-top:0; }
#column-left .magii-left-module > *:last-child{ margin-bottom:0; }
#column-right{ background:transparent; border:0; box-shadow:none; padding:0; display:flex; flex-direction:column; /* Keep vertical rhythm consistent with the shell grid */ gap:30px; }
#column-right .magii-right-module{ background:linear-gradient(180deg, #191E2C, #131827); border:1px solid #202033; border-radius:20px; box-shadow:0 0 26px rgba(0,0,0,0.28); padding:18px; overflow:hidden; }
#column-right .magii-right-module > *:first-child{ margin-top:0; }
#column-right .magii-right-module > *:last-child{ margin-bottom:0; }
/* Keep a stable top padding for the page container */
:root{ --magii-page-top-pad:14px; /* Physical sidebar width (used across header, navigation row and the unified shell grid). */ --magii-sidebar-w:267px; --magii-shell-col-gap:30px; --magii-shell-row-gap:15px; }
/* ---- Footer ---- */
.magii-footer{ color:#CACACD; padding:28px 0 40px; }
.magii-footer .container{ padding-top:18px; }
/* ---- Responsive tweaks (close to index.html) ---- */
@media (max-width: 1100px){.magii-phone{ display:none; }}
@media (max-width: 820px){body{ overflow:auto; }
.parallax-root{ height:auto; perspective:none; overflow:visible; scroll-behavior:auto; }
.hero{ min-height:460px; }
.hero{ clip-path:none; }
/* Mobile perf: avoid fixed+filters on a huge surface while scrolling */
.hero-bg{ position:absolute; width:100%; height:100%; right:auto; filter:none; }
.container, .container-fluid{ padding-left:16px; padding-right:16px; }
.header-top{ padding:4px 16px; }
.header-main{ grid-template-columns:1fr; gap:12px; padding:18px 16px; }
.magii-main-menu{ padding-left:16px; padding-right:16px; }
/* On narrow screens allow main-menu position modules to stack naturally. */
.magii-main-menu{ flex-wrap:wrap; gap:12px; }
.magii-main-menu > .module-categories--flyout{ flex:0 0 auto; width:auto; }
#column-left, #column-right{ padding:18px; }
.magii-shell{ grid-template-columns:1fr !important; grid-template-areas:"nav"
      "navl"
      "navr"
      "center"
      "left"
      "right"; --magii-shell-col-gap:14px; --magii-shell-row-gap:0px; column-gap:var(--magii-shell-col-gap); row-gap:var(--magii-shell-row-gap); }
/* Mobile: stack overflow is not used; let everything flow naturally */
.magii-shell.magii-shell--stack-left,
  .magii-shell.magii-shell--stack-right{ grid-template-rows:auto !important; --magii-stack-left-pad:0px; --magii-stack-right-pad:0px; }
.magii-shell.magii-shell--stack-left .magii-shell__nav-left,
  .magii-shell.magii-shell--stack-right .magii-shell__nav-right{ max-height:none; }}
/* ---- Unified shell grid (navigation row + content row) ---- */
.magii-shell{ display:grid; /* Variant 1: fixed sidebar columns, navigation row shares the same grid */ grid-template-columns:var(--magii-sidebar-w) 1fr var(--magii-sidebar-w); grid-template-rows:auto 1fr; /* Row templates are driven by variables so we can change nav-row and content-row independently. */ --magii-shell-row1:"nav nav nav"; --magii-shell-row2:"center center center"; grid-template-areas:var(--magii-shell-row1) var(--magii-shell-row2); column-gap:var(--magii-shell-col-gap, 30px); row-gap:var(--magii-shell-row-gap, 30px); align-items:start; /* Stack helpers (JS fills these only in stack-mode) */ --magii-shell-nav-h:58px; --magii-stack-left-pad:0px; --magii-stack-right-pad:0px; }
/* ---- Stack mode (open categories in navigation_left/right):
   Keep the nav row height equal to the center menu bar and allow the side slot(s)
   to overflow down into the sidebar column. No DOM movement, no cross-position rendering. ---- */
.magii-shell.magii-shell--stack-left,
.magii-shell.magii-shell--stack-right{ grid-template-rows:var(--magii-shell-nav-h, 58px) 1fr; }
/* ---- Navigation row: let center stretch into missing left/right slots (non-stack mode) ---- */
.magii-shell.magii-shell--has-nav-left{ --magii-shell-row1:"navl nav nav"; }
.magii-shell.magii-shell--has-nav-right{ --magii-shell-row1:"nav nav navr"; }
.magii-shell.magii-shell--has-nav-left.magii-shell--has-nav-right{ --magii-shell-row1:"navl nav navr"; }
/* ---- Content row: if a physical sidebar is absent, let the center span into that space ----
   We do NOT rely on :has(). Presence flags are computed server-side (column_left/right set config flags)
   and applied as classes on .magii-shell in common/header.tpl. */
.magii-shell.magii-shell--has-left{ --magii-shell-row2:"left center center"; }
.magii-shell.magii-shell--has-right{ --magii-shell-row2:"center center right"; }
.magii-shell.magii-shell--has-left.magii-shell--has-right{ --magii-shell-row2:"left center right"; }
/* ---- Stack mode visuals ---- */
.magii-shell.magii-shell--stack-left .magii-shell__nav-left,
.magii-shell.magii-shell--stack-right .magii-shell__nav-right{ position:relative; z-index:5; overflow:visible; min-height:0; max-height:var(--magii-shell-nav-h, 58px); }
/* IMPORTANT:
   #column-left/#column-right have ID-based rules that set padding:0 for the flex sidebar container.
   In stack-mode we must override padding-top with matching specificity; otherwise the computed
   stack offset won't apply and sidebar modules will appear "under" the overflowed nav categories.
*/
.magii-shell.magii-shell--stack-left #column-left.magii-shell__left{ padding-top:var(--magii-stack-left-pad, 0px); }
.magii-shell.magii-shell--stack-right #column-right.magii-shell__right{ padding-top:var(--magii-stack-right-pad, 0px); }
/* Expanded categories in nav-left/right: the menu block itself owns the frame.
   No extra wrapper-card padding around it. */
.magii-shell.magii-shell--stack-left .magii-shell__nav-left .module-categories:not(.module-categories--flyout),
.magii-shell.magii-shell--stack-right .magii-shell__nav-right .module-categories:not(.module-categories--flyout){ width:100%; padding:0; margin:0; }
.magii-shell.magii-shell--stack-left .magii-shell__nav-left .magii-nav-slot,
.magii-shell.magii-shell--stack-right .magii-shell__nav-right .magii-nav-slot{ display:block; }
.magii-shell.magii-shell--stack-left .magii-shell__nav-left .module-categories.is-open,
.magii-shell.magii-shell--stack-right .magii-shell__nav-right .module-categories.is-open{ align-self:stretch; }
.magii-shell__nav-left{ grid-area:navl; min-width:0; }
.magii-shell__nav{ grid-area:nav; min-width:0; }
.magii-shell__nav-right{ grid-area:navr; min-width:0; }
.magii-shell__left{ grid-area:left; }
.magii-shell__center{ grid-area:center; min-width:0; }
.magii-shell__right{ grid-area:right; }
/* Navigation slots (left/right) should align with the main menu row. */
.magii-nav-slot{ display:flex; align-items:flex-start; gap:30px; /* match .magii-main-menu gap */ flex-wrap:wrap; }
/* Flyout categories in navigation_left/right: trigger should take the full sidebar width. */
.magii-shell__nav-left .module-categories--flyout,
.magii-shell__nav-right .module-categories--flyout{ flex:0 0 100%; width:100%; max-width:100%; }
.magii-shell__nav-left .module-categories--flyout .module-categories__trigger,
.magii-shell__nav-right .module-categories--flyout .module-categories__trigger{ width:100%; justify-content:space-between; }
@media (max-width: 520px){.header-top{ font-size:13px; }}
/* ---- Dropdown menu ---- */
.dropdown{ position:relative; }
.dropdown-menu{ display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:200px; padding:8px; border-radius:16px; border:1px solid rgba(255,255,255,0.1); background:rgba(15,18,26,0.92); backdrop-filter:blur(10px); box-shadow:0 18px 40px rgba(0,0,0,0.45); z-index:60; }
.dropdown.open > .dropdown-menu{ display:block; }
.dropdown-menu > li{ list-style:none; }
.dropdown-menu > li > a{ display:block; padding:10px 12px; border-radius:12px; text-decoration:none; }
.dropdown-menu > li > a:hover{ background:rgba(255,255,255,0.06); }