/* ============================================================
   Part 12 / P1 — icon theme: THE single control point for how icons LOOK.
   (P2: weight → Phosphor Regular; optical scale; stateful fill; burger folded in.)

   Split of responsibilities — keep it:
     icons12.css     → glyph SHAPES only (GENERATED by scripts/build-icons.mjs).
                        Change the family/weight there, then re-run the script.
     icons-theme.css → SIZE, COLOUR, HOVER. Hand-written. Everything below is
                        driven by the variables in the :root block, so recolouring
                        or resizing every icon on the site is a one-line edit here.

   MUST load after front.css, header9.css and icons12.css.

   Design (approved as "option A", see public/icon-style-preview.html):
     · no circle / no box behind any icon
     · the glyph grows to the size the old circle used to be, no extra padding
     · brand teal, going darker on hover
     · a springy scale-up on hover
   P2 additions on top of that:
     · the family is Phosphor REGULAR, not the Bold the preview page shows — bold
       out-weighed the Persian body type. Only the stroke weight changed.
     · inline glyphs are scaled to the text they sit beside (--sd-ic-scale)
     · icons that carry state go solid instead of outline (section 4)
   ============================================================ */

:root{
    /* —— optical scale ————————————————————————————————————
       Every masked glyph is drawn in a box of 1em × --sd-ic-scale (icons12.css reads
       these two). Phosphor draws inside a 256 viewBox with generous margins, so a
       literal 1em box lands noticeably shorter than the Persian text beside it —
       which is what made inline icons look undersized next to their labels. 1.15
       lines the glyph's cap height up with the text's. --sd-ic-valign re-centres it:
       -0.125em (the FontAwesome baseline nudge) minus half the extra height. */
    --sd-ic-scale:      1.15;
    --sd-ic-valign:     -0.2em;

    /* —— colour ——————————————————————————————————————————— */
    --sd-ic:            #0e8a72;              /* = --sd-teal-600, the brand teal */
    --sd-ic-hover:      #0b6f5c;              /* = --sd-teal-hover */
    --sd-ic-quiet:      #6d7a76;              /* = --sd-muted, for secondary chrome */
    /* on the dark ink footer the teal goes muddy, so use a light tint instead */
    --sd-ic-on-dark:       #8fd9c9;
    --sd-ic-on-dark-hover: #ffffff;

    /* —— size ————————————————————————————————————————————— */
    --sd-ic-lg:         46px;                 /* homepage trust + service tiles */
    --sd-ic-lg-sm:      38px;                 /* …the same tiles under 640px      */
    --sd-ic-md:         42px;                 /* footer social band               */
    --sd-ic-sm:         34px;                 /* header actions (desktop)         */
    /* On phones the header is one row of logo + search + 3 icons. At 34px the icons
       ate the search field, so they step down and hand the width back to it. */
    --sd-ic-sm-mob:     27px;                 /* header actions under 900px       */
    --sd-ic-sm-xs:      24px;                 /* …and under 400px                 */

    /* —— motion ——————————————————————————————————————————— */
    --sd-ic-dur:        .32s;
    --sd-ic-ease:       cubic-bezier(.34,1.56,.64,1);   /* slight overshoot */
    --sd-ic-pop:        1.14;                 /* hover scale */
    --sd-ic-tilt:       -5deg;                /* hover rotation */
}

/* Shared: every icon that participates in the theme animates the same way.
   The glyph is an `<i>`; its wrapper is display:flex, which blockifies the `<i>`
   so `transform` applies to it (it would be ignored on a plain inline box). */
.sd-trust-ic > i,
.sd-service-ic > i,
.solid_footer > ul > li > a > i,
.sd9-search button > i,
.sd9-micon > i,
.sd9-burger > i,
.sd9-sb-close > i{
    display: block;
    line-height: 1;
    transition: transform var(--sd-ic-dur) var(--sd-ic-ease), color .2s ease;
}

/* ---- 1. Homepage trust bar + service cards ------------------------------- */
.sd-trust-ic,
.sd-service-ic{
    color: var(--sd-ic);
    font-size: var(--sd-ic-lg);
    line-height: 1;
    transition: color .2s ease;
}
.sd-trust-item:hover .sd-trust-ic,
.sd-service:hover .sd-service-ic{ color: var(--sd-ic-hover); }
.sd-trust-item:hover .sd-trust-ic > i,
.sd-service:hover .sd-service-ic > i{
    transform: scale(var(--sd-ic-pop)) rotate(var(--sd-ic-tilt));
}

/* ---- 2. Footer social band ----------------------------------------------- */
.solid_footer > ul > li > a{ color: var(--sd-ic-on-dark); }
.solid_footer > ul > li > a > i{ color: inherit; font-size: var(--sd-ic-md); }
.solid_footer > ul > li > a:hover{ color: var(--sd-ic-on-dark-hover); }
.solid_footer > ul > li > a:hover > i{
    transform: translateY(-4px) scale(1.16);
}

/* ---- 3. Header: search button, mobile action icons, burger, sidebar close --- */
.sd9-search button{ color: var(--sd-ic); font-size: var(--sd-ic-sm); }
.sd9-search button:hover{ color: var(--sd-ic-hover); }
.sd9-micon{ color: var(--sd-ic); font-size: var(--sd-ic-sm); }
.sd9-micon:hover{ color: var(--sd-ic-hover); }
/* The burger was the last piece of header chrome still on ink — next to teal cart and
   user glyphs it read as a different family. It also sat a size below them. */
.sd9-burger{ color: var(--sd-ic); font-size: var(--sd-ic-sm); }
.sd9-burger:hover{ color: var(--sd-ic-hover); }
.sd9-sb-close{ color: var(--sd-ic-quiet); font-size: 26px; }
.sd9-sb-close:hover{ color: var(--sd-ic); }
.sd9-search button:hover > i,
.sd9-micon:hover > i,
.sd9-burger:hover > i,
.sd9-sb-close:hover > i{ transform: scale(1.16); }

/* The header collapses to its mobile layout at 900px (matches header9.css). Everything
   in that row shares one size so nothing looks out of family, and the whole row is
   smaller than on desktop so the search field keeps a usable width. */
@media(max-width: 900px){
    .sd9-micon,
    .sd9-burger{ font-size: var(--sd-ic-sm-mob); }
    .sd9-search button{ font-size: var(--sd-ic-sm-mob); }
    .sd9-burger{ padding: 3px; }
}
@media(max-width: 400px){
    .sd9-micon,
    .sd9-burger,
    .sd9-search button{ font-size: var(--sd-ic-sm-xs); }
}

/* ---- 4. Stateful icons: outline = off, solid = on ------------------------- */
/* The solid twins come from icons12.css as --sd-ic-fill-* variables.
   Two different signals feed this, so both are wired up:
     · explicit state classes the layout already emits (.is-auth, .has-items)
     · the fas/far pair, which the rating and favourite markup has always used to
       mean full/empty. Under the mask sheet `fas` and `far` render the SAME glyph,
       so without this every star looked full and no favourite looked set. */
.sd9-micon.user.is-auth > i::before,
.sd9-actions .sd9-login.is-auth > i::before{
    -webkit-mask-image: var(--sd-ic-fill-user); mask-image: var(--sd-ic-fill-user);
}
.sd9-micon.cart.has-items > i::before,
.sd9-actions .sd9-cart.has-items > i::before{
    -webkit-mask-image: var(--sd-ic-fill-shopping-cart); mask-image: var(--sd-ic-fill-shopping-cart);
}
.fas.fa-star::before{
    -webkit-mask-image: var(--sd-ic-fill-star); mask-image: var(--sd-ic-fill-star);
}
.fas.fa-star-half-alt::before{
    -webkit-mask-image: var(--sd-ic-fill-star-half); mask-image: var(--sd-ic-fill-star-half);
}
.fas.fa-heart::before{
    -webkit-mask-image: var(--sd-ic-fill-heart); mask-image: var(--sd-ic-fill-heart);
}
.fas.fa-bell::before{
    -webkit-mask-image: var(--sd-ic-fill-bell); mask-image: var(--sd-ic-fill-bell);
}

/* ---- 5. Opt-outs from the optical scale ---------------------------------- */
/* --sd-ic-scale exists to pull *inline* glyphs up to the size of the text they sit
   next to. The components above are already sized in explicit px to an approved
   design, so they take the glyph at face value instead. */
.sd-trust-ic, .sd-service-ic,
.solid_footer > ul > li > a,
.sd9-search button, .sd9-micon, .sd9-burger, .sd9-sb-close{
    --sd-ic-scale: 1;
    --sd-ic-valign: -0.125em;
}
@media(max-width: 640px){
    .sd-trust-ic,
    .sd-service-ic{ font-size: var(--sd-ic-lg-sm); }
    .solid_footer > ul > li > a > i{ font-size: 34px; }
}

/* Respect the OS "reduce motion" setting — the colour change still communicates
   hover, so nothing is lost. */
@media (prefers-reduced-motion: reduce){
    .sd-trust-ic > i,
    .sd-service-ic > i,
    .solid_footer > ul > li > a > i,
    .sd9-search button > i,
    .sd9-micon > i,
    .sd9-burger > i,
    .sd9-sb-close > i{ transition: color .2s ease; transform: none !important; }
}