/*
 * ITIA UI Polish — reliable navigation icons, restrained motion and institutional micro-interactions.
 * Progressive enhancement only; no saved WordPress/Elementor content is altered.
 */
:root{--itia-ui-menu-top:116px;--itia-ui-gold:#d6a12c;--itia-ui-teal:#087e7b;--itia-ui-navy:#06295a;--itia-ui-deep:#031a3a}

/* Header refinement */
.itia-institutional-header{backdrop-filter:saturate(145%) blur(12px);-webkit-backdrop-filter:saturate(145%) blur(12px);transition:box-shadow .24s ease,border-color .24s ease,background-color .24s ease}
.itia-institutional-header.itia-ui-scrolled{background:rgba(255,255,255,.985);border-bottom-color:rgba(3,22,47,.14);box-shadow:0 12px 34px rgba(3,22,47,.11)}
.itia-a-utility{position:relative;max-height:34px;overflow:hidden;background:linear-gradient(90deg,#03162f 0%,#052554 58%,#073664 100%);transition:max-height .24s ease,opacity .18s ease}
.itia-a-utility:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d6a12c88,transparent)}
.itia-institutional-header.itia-ui-scrolled .itia-a-utility{max-height:0;opacity:0}
.itia-a-header-main{transition:min-height .24s ease}
.itia-institutional-header.itia-ui-scrolled .itia-a-header-main{min-height:72px}
.itia-a-brand img{transition:transform .22s ease,filter .22s ease}
.itia-a-brand:hover img{transform:translateY(-1px);filter:saturate(1.06)}
.itia-a-nav-link{position:relative;isolation:isolate;transition:color .18s ease,background-color .18s ease}
.itia-a-nav-link:after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;background:linear-gradient(90deg,var(--itia-ui-teal),var(--itia-ui-gold));transform:scaleX(0);transform-origin:left center;transition:transform .2s ease}
.itia-a-nav-link:hover:after,.itia-a-nav-link[aria-current="page"]:after{transform:scaleX(1)}
.itia-a-nav-link[aria-current="page"]{color:var(--itia-ui-teal)}

/* Replace fragile inline chevron presentation with a CSS-native indicator. */
.itia-a-submenu-toggle svg{display:none!important}
.itia-a-submenu-toggle:before{content:"";display:block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease,color .2s ease}
.itia-a-submenu-toggle[aria-expanded="true"]:before{transform:translateY(2px) rotate(225deg);color:var(--itia-ui-teal)}
.itia-a-submenu-toggle:hover{color:var(--itia-ui-teal);background:#f1f7f7}

/* Premium, more legible dropdowns. */
.itia-a-submenu{width:286px;padding:10px;border-color:#d5e0e6;border-radius:9px;box-shadow:0 22px 55px rgba(3,22,47,.16);overflow:hidden}
.itia-a-submenu:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--itia-ui-teal),var(--itia-ui-gold))}
.itia-a-submenu li+li{border-top:1px solid #edf2f4}
.itia-a-submenu a{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 10px;border-radius:5px;font-weight:720;transition:background-color .16s ease,color .16s ease,transform .16s ease}
.itia-a-submenu a:hover{transform:translateX(2px)}
.itia-ui-menu-icon,.itia-ui-card-icon{flex:0 0 auto;display:inline-grid;place-items:center;border:1px solid #d9e5e7;color:var(--itia-ui-teal);background:linear-gradient(145deg,#fff,#f3f8f8)}
.itia-ui-menu-icon{width:30px;height:30px;border-radius:6px}
.itia-ui-menu-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.itia-a-submenu a:hover .itia-ui-menu-icon{color:var(--itia-ui-navy);border-color:#c9d8dd;background:#fff}

/* CTA gets a restrained institutional accent rather than a generic button feel. */
.itia-a-header-cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#052554,#08396f);box-shadow:0 10px 25px rgba(5,37,84,.18)}
.itia-a-header-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.14) 48%,transparent 70%);transform:translateX(-140%);transition:transform .5s ease}
.itia-a-header-cta:hover:before{transform:translateX(140%)}

/* Mobile menu: use measured header height instead of a hard-coded top offset. */
@media(max-width:1080px){
  .itia-a-nav{top:var(--itia-ui-menu-top)!important;max-height:calc(100dvh - var(--itia-ui-menu-top))!important;padding:12px 20px 26px;background:rgba(255,255,255,.995);box-shadow:0 28px 55px rgba(3,22,47,.18)}
  .admin-bar .itia-a-nav{top:var(--itia-ui-menu-top)!important;max-height:calc(100dvh - var(--itia-ui-menu-top))!important}
  .itia-a-nav-item{border-bottom-color:#e5edef}
  .itia-a-nav-link{font-size:13.5px;letter-spacing:.025em}
  .itia-a-nav-link:after{left:4px;right:auto;width:30px;bottom:4px}
  .itia-a-submenu{padding:2px 0 13px 8px;background:#f8fbfb}
  .itia-a-submenu:before{display:none}
  .itia-a-submenu li+li{border-top-color:#e7efef}
  .itia-a-submenu a{min-height:48px;padding:9px 8px}
  .itia-a-menu-toggle{box-shadow:0 6px 16px rgba(3,22,47,.07);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
  .itia-a-menu-toggle:hover{border-color:#aabfc6;background:#f7fbfb;box-shadow:0 8px 20px rgba(3,22,47,.1)}
}
@media(min-width:1081px) and (max-width:1260px){
  .itia-a-header-main{gap:16px}
  .itia-a-brand{min-width:190px}
  .itia-a-brand img{width:230px}
  .itia-a-nav-link{padding-inline:8px;font-size:12.2px}
  .itia-a-submenu-toggle{width:27px}
  .itia-a-header-cta{padding-inline:14px}
}

/* Self-contained icons for the current rebuilt UI. */
.itia-ui-card-icon{width:43px;height:43px;margin:0 0 18px;border-radius:10px;box-shadow:0 7px 18px rgba(8,126,123,.08);transition:transform .22s ease,box-shadow .22s ease,color .22s ease}
.itia-ui-card-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.itia-b-pillar:hover .itia-ui-card-icon,.itia-b-path:hover .itia-ui-card-icon,.itia-b-card:hover .itia-ui-card-icon,.itia-b-resource:hover .itia-ui-card-icon,.itia-c-program:hover .itia-ui-card-icon,.itia-c-module:hover .itia-ui-card-icon,.itia-c-exercise:hover .itia-ui-card-icon,.itia-d-card:hover .itia-ui-card-icon,.itia-e-card:hover .itia-ui-card-icon,.itia-e-resource:hover .itia-ui-card-icon{transform:translateY(-2px) rotate(-2deg);box-shadow:0 11px 24px rgba(8,126,123,.13);color:var(--itia-ui-navy)}
.itia-b-lab .itia-ui-card-icon,.itia-b-program-featured .itia-ui-card-icon,.itia-c-program-featured .itia-ui-card-icon,.itia-c-deep .itia-ui-card-icon,.itia-d-deep .itia-ui-card-icon,.itia-e-deep .itia-ui-card-icon{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#f0c768;box-shadow:none}

/* Institutional cards gain depth without becoming overly rounded/startup-like. */
.itia-b-pillar,.itia-b-path,.itia-b-card,.itia-b-post,.itia-b-resource,.itia-b-fact,.itia-b-lab,.itia-c-program,.itia-c-module,.itia-c-exercise,.itia-c-related a,.itia-d-card,.itia-e-card,.itia-e-resource,.itia-e-hub{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.itia-b-pillar:hover,.itia-b-path:hover,.itia-b-card:hover,.itia-b-post:hover,.itia-b-resource:hover,.itia-c-program:not(.itia-c-program-featured):hover,.itia-c-module:hover,.itia-c-exercise:hover,.itia-c-related a:hover,.itia-d-card:hover,.itia-e-card:hover,.itia-e-resource:hover{transform:translateY(-3px);border-color:#cbd9e2;box-shadow:0 16px 38px rgba(6,41,90,.09)}
.itia-b-lab:hover{transform:translateY(-2px);border-color:rgba(240,199,104,.45);background:rgba(255,255,255,.075)}

/* Make native FAQ controls consistent and ensure the expand icon always exists. */
.itia-b-faq summary,.itia-c-faq summary,.itia-d-faq summary,.itia-e-faq summary{position:relative;list-style:none}
.itia-b-faq summary::-webkit-details-marker,.itia-c-faq summary::-webkit-details-marker,.itia-d-faq summary::-webkit-details-marker,.itia-e-faq summary::-webkit-details-marker{display:none}
.itia-b-faq summary:after,.itia-c-faq summary:after,.itia-d-faq summary:after,.itia-e-faq summary:after{content:"+";position:absolute;right:6px;top:50%;display:grid;place-items:center;width:28px;height:28px;transform:translateY(-50%);border:1px solid #cfdbe1;border-radius:50%;color:var(--itia-ui-teal);background:#fff;font:700 19px/1 var(--itia-a-sans);transition:transform .18s ease,color .18s ease,background .18s ease}
.itia-b-faq details[open] summary:after,.itia-c-faq details[open] summary:after,.itia-d-faq details[open] summary:after,.itia-e-faq details[open] summary:after{content:"−";color:#fff;background:var(--itia-ui-navy);border-color:var(--itia-ui-navy);transform:translateY(-50%) rotate(180deg)}

/* SVG illustration reliability and restrained motion. */
.itia-f-visual{box-shadow:0 12px 32px rgba(6,41,90,.08);transition:transform .28s ease,box-shadow .28s ease}
.itia-f-visual:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(6,41,90,.12)}
.itia-f-visual img{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.itia-f-visual:hover img{transform:scale(1.015)}

/* Progressive reveal: content is never hidden unless JS explicitly starts the animation. */
.itia-ui-enter{animation:itiaUiEnter .52s cubic-bezier(.2,.7,.2,1) both}
@keyframes itiaUiEnter{from{opacity:.05;transform:translateY(14px)}to{opacity:1;transform:none}}
.itia-ui-pulse .itia-ui-card-icon{animation:itiaUiIconIn .48s cubic-bezier(.2,.75,.2,1) both}
@keyframes itiaUiIconIn{from{opacity:.1;transform:scale(.86) rotate(-7deg)}to{opacity:1;transform:none}}

/* Thin, unobtrusive page progress indicator for long knowledge pages. */
.itia-ui-progress{position:fixed;left:0;top:0;z-index:10050;width:0;height:2px;background:linear-gradient(90deg,var(--itia-ui-teal),var(--itia-ui-gold));box-shadow:0 1px 5px rgba(8,126,123,.28);pointer-events:none}
.admin-bar .itia-ui-progress{top:32px}
@media(max-width:782px){.admin-bar .itia-ui-progress{top:46px}}

/* Broken illustration fallback: JS marks the figure rather than leaving an empty broken-image box. */
.itia-f-visual.itia-ui-image-error{display:none!important}

@media(max-width:700px){
  .itia-ui-card-icon{width:39px;height:39px;margin-bottom:14px;border-radius:8px}
  .itia-ui-card-icon svg{width:20px;height:20px}
  .itia-a-utility p{font-size:11px;line-height:1.35}
}
@media(prefers-reduced-motion:reduce){
  .itia-institutional-header,.itia-a-utility,.itia-a-header-main,.itia-a-brand img,.itia-a-nav-link:after,.itia-a-submenu-toggle:before,.itia-a-submenu a,.itia-a-header-cta:before,.itia-ui-card-icon,.itia-f-visual,.itia-f-visual img{transition:none!important}
  .itia-ui-enter,.itia-ui-pulse .itia-ui-card-icon{animation:none!important}
  .itia-a-header-cta:before{display:none}
}
