/* ==========================================================================
   AIIMS Group — design-consistency layer
   Added 5 Oct 2026. Loaded after theme.css (see functions/enqueue-scripts.php).
   Companion script: scripts/design-consistency.js
   Oct 2026 redesign: the rules for the old header (mnv2), app bar, ticker and footer were removed; the new
   header and footer stack have their own styles (styles/redesign/header.css, footer.css).

   Reference design = the Home Page (page-templates/frontPage.php):
     • Interphases typeface, #0E0E0E / #EFEFEF surfaces, #F5412C accent
     • 4px corner radius on cards, buttons and media (Tailwind `rounded`)
     • genuine circles only for dots, avatars, icon badges and the phone button

   What this file does
     1. (removed in round 4) font aliases — text must render exactly as on live.
     2. Corner radius standard — every known component above 4px (theme
        utilities, mega nav, footer, app bar, case-study archive, Changemakers,
        SEO location templates, mu-plugin patches) is brought down to 4px.
        Pills on buttons/tags become 4px; circles stay circles. The header's
        "Book or Call Today" pill and the floating phone button are kept as the
        Home Page shows them. Content pages with their own <style> blocks are
        handled by design-consistency.js at runtime (300+ pages, 1,800+ rules).
     3. Global header fixes — case-study pages lost their grid (collapsed nav);
        flag emoji replaced by SVG flags (sizes below).
   Rollback: dequeue the two files in enqueue-scripts.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. (removed) Font aliases
   Round 1 mapped the never-loaded "Inter" / "TT Interphases Pro" names to the
   Interphases files and added an Interphases 900 cut. Robert's rule (round 4):
   content text must render exactly as on the live site, so those declarations
   are gone - text attributes (face, weight, spacing) are untouched by this layer.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Corner radius standard
   -------------------------------------------------------------------------- */
:root{--aiims-radius-standard:4px}

/* 2a. Radius tokens used by content pages and page templates. They are set on
   `*` with !important so they win over the page's own `.wrapper{--radius:24px}`. */
*{
  --radius:4px!important;--aiims-radius:4px!important;--cs-radius:4px!important;--nova-radius:4px!important;
  --nova-radius-small:4px!important;--ga-radius:4px!important;--ug-radius:4px!important;--dma-radius:4px!important;
  --mf-radius:4px!important;--aig-radius:4px!important;--ytp-radius:4px!important;--small-radius:4px!important;
  --dg-radius:4px!important;--radius-xl:4px!important;--radius-lg:4px!important;--nr-radius:4px!important;
}

/* 2b. Tailwind utilities compiled into theme.css (rounded-md/lg/xl/2xl/3xl). */
.rounded-md,.rounded-lg,.rounded-xl,.rounded-2xl,.rounded-3xl{border-radius:4px}
.rounded-t-lg,.rounded-t-xl{border-top-left-radius:4px;border-top-right-radius:4px}
.rounded-b-lg,.rounded-b-xl{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
/* Pill lists / tabs built with rounded-full on non-square elements (blog tabs,
   services tabs, category filters, "NEW" tags). Icon circles keep rounded-full. */
ul.pills li,
.category-filter,
#services-tabs,#services-tabs button,
body.blog .bg-neutral-900.rounded-full,body.blog .bg-neutral-900.rounded-full>a,
body.page-template-services .bg-neutral-900.rounded-full,body.page-template-services .bg-neutral-900.rounded-full>button,
.dropdown-menu{border-radius:4px!important}
.bg-primary.rounded-full.text-sm{border-radius:4px}
/* Circles that stay circles: .mnv2-close, .mnv2-close-menu, .mnv2-shelf-btn,
   .mnv2-status-dot, .mnv2-country-flag, .mnv2-phone-mobile-btn, .aat-dot, the
   header CTA pill (.mnv2-header-cta) is the Home Page reference and is kept. */

/* 2e. Region switch popup (inline styles in functions/dubai-functions.php) */
html body #region-switch-popup,html body #region-switch-popup a,html body #region-switch-popup button{border-radius:4px!important}

/* 2f. Skip link / QA chrome */
html body .aiims-skip-link{border-radius:4px}

/* 2g. Newsroom + Social templates */
.nr-tag,.nr-press-btn,.nr-hero-feature,.nr-card,.nr-work-card{border-radius:4px!important}
#social_audit_popup,.social-is-loud .btn-primary,.lead-form-panel input{border-radius:4px!important}

/* 2h. SEO location / Sydney / Melbourne templates */
.seo-toc-card,.seo-award-card,.seo-shorts-grid iframe{border-radius:4px!important}

/* 2i. Changemakers hub template (cm2-*) — pills and 10–20px cards → 4px.
   .cm2-hero-play, .cm2-card-play, .cm2-card-avatar, .cm2-people-arrow,
   .cm2-modal-close, .cm2-modal-avatar are circles and keep 50%. */
.cm2-btn-red,.cm2-hero-thumb,#cm2-search,.cm2-filter-chip,.cm2-select,.cm2-card,.cm2-load-more,
.cm2-person-card,.cm2-modal,.cm2-tag,.cm2-card-num{border-radius:4px!important}
.cm2-modal-video{border-radius:4px 4px 0 0!important}

/* 2j. Case-studies archive (plugin aiims-case-studies, assets/case-studies.css).
   The template now prints body_class('aiims-cs-archive') — see the template. */
.aiims-cs-archive .button,.aiims-cs-archive .hero-card,.aiims-cs-archive .hero-card__ribbon,
.aiims-cs-archive .hero-selector button,.aiims-cs-archive .outcome-grid button,
.aiims-cs-archive .editorial-feature,.aiims-cs-archive .trending,.aiims-cs-archive .trending-item img,
.aiims-cs-archive .collection-tile,.aiims-cs-archive .row-card,.aiims-cs-archive .market-pills button,
.aiims-cs-archive .request-band,.aiims-cs-archive .filters select,.aiims-cs-archive .filters input,
.aiims-cs-archive .sort-select,.aiims-cs-archive .case-card,.aiims-cs-archive .empty-state,
.aiims-cs-archive .floating-cta,.aiims-cs-archive .modal__panel,.aiims-cs-archive .modal__proof span,
.aiims-cs-archive .lead-form input,.aiims-cs-archive .lead-form textarea,
.aiims-cs-archive .row-card img,.aiims-cs-archive .case-card img{border-radius:4px!important}
/* (round 4) The archive hero's serif-italic line and the single-page breadcrumb text keep their
   own face / size / colour - text attributes are not part of this layer any more. Only the
   breadcrumb's layout is still contained (the plugin printed it full-bleed at x=0). */
body.single-case_study nav.wp-block-breadcrumbs{width:calc(100% - 48px);max-width:1462px;margin:0 auto;padding:14px 0}
body.single-case_study nav.wp-block-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none}
body.single-case_study nav.wp-block-breadcrumbs li{padding:0}

/* 2k. mu-plugin content patches for individual case studies */
#htp-b91c5799 .img-block,#htp-b91c5799 .deliverable-card,#htp-b91c5799 .deliverable-icon,#htp-b91c5799 .social-card,
#htp-b91c5799 .video-tag,#htp-b91c5799 .video-embed-wrap p,
#htp-cd27a8e3 .story-img,#htp-cd27a8e3 .masonry-item,#htp-cd27a8e3 .vision-callout,#htp-cd27a8e3 .deliverable-item,#htp-cd27a8e3 .cta-btn,
.tldr-card,.toc-box,.toc-summary{border-radius:4px!important}
#htp-b91c5799 .pull-stat,.quote-block{border-radius:0 4px 4px 0!important}

/* 2l. Case-study single: in-content fixed pill nav */
body.single-case_study .case-nav{border-radius:4px!important}

/* --------------------------------------------------------------------------
   3. Global header / chrome fixes
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. SVG flags (functions/flags.php + scripts/aiims-flags.js)
   -------------------------------------------------------------------------- */
/* Flags swapped in running text (content, menus, popup) */
img.aiims-flag-inline,.aiims-flag-wrap svg{display:inline-block;width:1.25em;height:.9375em;vertical-align:-.12em;margin:0 .15em;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.aiims-flag-wrap{display:inline-block;line-height:0;vertical-align:middle}

/* --------------------------------------------------------------------------
   5. Branded CTA buttons (Oct 2026, round 2; rules revised in round 3)
   Spec from the designer (Home Page):
     primary : btn bg-primary hover:bg-white text-white hover:text-secondary … rounded
     outline : btn hover:bg-primary border border-white hover:border-primary text-white … rounded
   Robert's rules: a button always keeps its own SIZE (font, padding, weight). If it uses the
   page's own colours (gold, yellow, orange …) it keeps those too - only the corners become 4px
   and a hover is added when the page gives none (.aiims-cta-own). Buttons in the generic
   red / white / dark palette get the Home Page colours + hover (.aiims-cta). Classes are added
   by design-consistency.js (ctaClassify). Everything is !important because the 300+ content
   pages style their own buttons with their own CSS. Nothing in this section sets a size.
   Backgrounds: default = dark section · --on-light = white/light section · --on-red = brand-red section.
   -------------------------------------------------------------------------- */
html body .aiims-cta{
  border-radius:4px!important;text-decoration:none!important;background-image:none!important;box-shadow:none!important;cursor:pointer!important;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease!important;
}
html body .aiims-cta:hover{transform:scale(1.05)!important}
html body .aiims-cta:focus-visible{outline:2px solid #fff!important;outline-offset:3px!important}
html body .aiims-cta--on-light:focus-visible{outline-color:#0E0E0E!important}
/* a ghost button that had no border of its own gets the outline's 1px */
html body .aiims-cta--bordered{border-width:1px!important;border-style:solid!important}
/* primary — dark sections */
html body .aiims-cta--primary{background-color:#F5412C!important;border-color:#F5412C!important;color:#fff!important}
html body .aiims-cta--primary:hover,html body .aiims-cta--primary:focus-visible{background-color:#fff!important;border-color:#fff!important;color:#0E0E0E!important}
/* outline — dark sections */
html body .aiims-cta--outline{background-color:transparent!important;border-color:#fff!important;color:#fff!important}
html body .aiims-cta--outline:hover,html body .aiims-cta--outline:focus-visible{background-color:#F5412C!important;border-color:#F5412C!important;color:#fff!important}
/* light sections (chosen: dark equivalents) */
html body .aiims-cta--on-light.aiims-cta--primary:hover,html body .aiims-cta--on-light.aiims-cta--primary:focus-visible{background-color:#0E0E0E!important;border-color:#0E0E0E!important;color:#fff!important}
html body .aiims-cta--on-light.aiims-cta--outline{border-color:#0E0E0E!important;color:#0E0E0E!important}
html body .aiims-cta--on-light.aiims-cta--outline:hover,html body .aiims-cta--on-light.aiims-cta--outline:focus-visible{background-color:#F5412C!important;border-color:#F5412C!important;color:#fff!important}
/* brand-red sections: every generic button is the white outline (a red fill would vanish); hover fills white */
html body .aiims-cta--on-red.aiims-cta--outline,html body .aiims-cta--on-red.aiims-cta--primary{background-color:transparent!important;border-color:#fff!important;color:#fff!important}
html body .aiims-cta--on-red.aiims-cta--outline:hover,html body .aiims-cta--on-red.aiims-cta--outline:focus-visible,
html body .aiims-cta--on-red.aiims-cta--primary:hover,html body .aiims-cta--on-red.aiims-cta--primary:focus-visible{background-color:#fff!important;border-color:#fff!important;color:#0E0E0E!important}
/* text inside gets the button colour too (content buttons often wrap spans with their own colour) */
html body .aiims-cta *{color:inherit!important}

/* page-branded buttons: own colours + size stay, corners → 4px … */
html body .aiims-cta-own{border-radius:4px!important}
/* … and, only where the page gives no hover of its own, fill and text swap on hover */
html body .aiims-cta-own--hover{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease!important}
html body .aiims-cta-own--hover:hover,html body .aiims-cta-own--hover:focus-visible{
  background:var(--aiims-hv-bg)!important;color:var(--aiims-hv-fg)!important;border-color:var(--aiims-hv-bd)!important;
  box-shadow:var(--aiims-hv-ring,none)!important;transform:scale(1.05)!important;
}
html body .aiims-cta-own--hover:hover *{color:inherit!important}

/* 5d. Case Studies archive: the floating "Request a Case Study" shared the bottom-right corner with the
   phone button (JustCall: right 20px, bottom 20px, 60px circle). It now sits to the left of it, same baseline. */
html body.aiims-cs-archive .floating-cta{right:96px!important;bottom:25px!important}
@media (max-width:560px){html body.aiims-cs-archive .floating-cta{right:86px!important;bottom:25px!important}}

/* 5c. UAE region popup (#region-switch-popup, inline-styled in dubai-functions.php): hover states */
html body #region-switch-popup a,html body #region-switch-popup #close-region-popup{border-radius:4px!important;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease!important}
html body #region-switch-popup a:hover,html body #region-switch-popup a:focus-visible{background:#F5412C!important;color:#fff!important;transform:scale(1.04)!important;outline:0!important}
html body #region-switch-popup #close-region-popup:hover,html body #region-switch-popup #close-region-popup:focus-visible{border-color:#fff!important;background:rgba(255,255,255,.12)!important;transform:scale(1.04)!important;outline:0!important}

/* --------------------------------------------------------------------------
   6. Floating buttons: JustCall phone (#toggleButton) and back-to-top (#back-top)
   design-consistency.js swaps the JustCall <img> for the designer's animated SVG and
   samples the page colour behind both buttons on scroll:
     phone  : brand red, turns dark when it floats over a red section
     to-top : dark, turns brand red when it floats over a dark section
   -------------------------------------------------------------------------- */
html body #toggleButton.aiims-fab{background:#F5412C!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;box-shadow:0 8px 24px rgba(0,0,0,.35)!important;transition:background-color .3s ease,transform .3s ease!important}
html body #toggleButton.aiims-fab:hover{transform:scale(1.06)!important}
html body #toggleButton.aiims-fab.aiims-fab--on-red{background:#0E0E0E!important}
html body #toggleButton.aiims-fab img{display:none!important}
html body #toggleButton.aiims-fab.aiims-fab--alt img{display:block!important}
html body #toggleButton.aiims-fab.aiims-fab--alt .phone-icon-svg{display:none!important}
html body #toggleButton .phone-icon-svg{width:44px;height:44px;display:block;transform-origin:center;color:#fff}
.phone-icon-main{transform-origin:center;transform-box:fill-box;animation:phoneTilt 2s infinite}
.phone-icon-wave-1{transform-origin:21px 21px;transform-box:fill-box;animation:phoneWave 2s infinite;animation-delay:0s}
.phone-icon-wave-2{transform-origin:21px 21px;transform-box:fill-box;animation:phoneWave2 2s infinite;animation-delay:.25s}
@keyframes phoneTilt{0%{transform:scale(1) rotate(0deg)}5%{transform:scale(1.1) rotate(-4deg)}10%{transform:scale(1.1) rotate(4deg)}15%{transform:scale(1.1) rotate(-3.5deg)}20%{transform:scale(1.1) rotate(3.5deg)}25%{transform:scale(1.1) rotate(-3deg)}30%{transform:scale(1.1) rotate(3deg)}35%{transform:scale(1.1) rotate(-2deg)}40%{transform:scale(1.1) rotate(0deg)}50%{transform:scale(1) rotate(0deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes phoneWave{0%{transform:translate(-15px,-1px) scale(.3);opacity:0}25%{opacity:1}50%{transform:translate(0,0) scale(1);opacity:0}100%{opacity:0}}
@keyframes phoneWave2{0%{transform:translate(-15px,-1px) scale(.3);opacity:0}35%{opacity:1}60%{transform:translate(0,0) scale(1);opacity:0}100%{opacity:0}}
html body #back-top .back-to-top-icon{background:#0E0E0E!important;color:#fff!important;border-radius:50%!important;transition:background-color .3s ease,color .3s ease!important}
html body #back-top .back-to-top-icon{padding:15px!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body #back-top .back-to-top-icon svg{width:18px!important;height:18px!important;display:block!important}
html body #back-top .back-to-top-icon:hover{background:#F5412C!important}
html body #back-top.aiims-fab--on-dark .back-to-top-icon{background:#F5412C!important}
html body #back-top.aiims-fab--on-dark .back-to-top-icon:hover{background:#fff!important;color:#0E0E0E!important}
@media (prefers-reduced-motion:reduce){.phone-icon-main,.phone-icon-wave-1,.phone-icon-wave-2{animation:none!important}}