/* Slick site skin — bento/aurora theme.
   Loaded alongside the Tailwind CDN + /files/slick-tailwind.js on every page.
   Keep in sync across index, stores, policies, /ar/*, and the Social landing. */

:focus-visible { outline: 2px solid #265B84; outline-offset: 3px; border-radius: 4px; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(71, 131, 181, 0.15); }
.num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
    .tile-hover { transition: transform 0.2s ease; }
    .tile-hover:hover { transform: translateY(-3px); }
}

/* ---- Aurora logo band (silver field + flowing brand ribbons + crisp logo) ---- */
.aurora-logo { position: relative; overflow: hidden; background: #eef2f7; }
.aurora-logo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.aurora-logo img {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: 62%; max-height: 150px; width: auto; z-index: 1;
}

/* Full-bleed masthead band under the header */
.aurora-full { width: 100%; height: 240px; border-radius: 0; }
@media (max-width: 600px) { .aurora-full { height: 180px; } }

/* Square mark variant (the About tile) — the mark, not the wordmark */
.aurora-mark img { height: auto; width: 58%; max-width: 150px; max-height: none; }

/* RTL: mirror the ribbon drift direction */
[dir="rtl"] .aurora-logo canvas { transform: scaleX(-1); }

/* ---- Mobile navigation -------------------------------------------------
   The inline header links are hidden below 768px, so without this the site
   has no reachable navigation on a phone. slick-nav.js injects the button and
   panel; the styles live here (not as Tailwind classes) so they do not depend
   on the CDN's runtime class scanner picking up injected markup. */

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #D9E6F0;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
.nav-toggle:hover { border-color: #4783B5; }
.nav-toggle span {
    display: block;
    position: relative;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #1D3A52;
}
.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #1D3A52;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* Open state: the bars become an X. */
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
    .nav-toggle span,
    .nav-toggle span::before,
    .nav-toggle span::after { transition: transform .18s ease, top .18s ease, background .18s ease; }
}

.nav-panel {
    display: none;
    border-top: 1px solid #D9E6F0;
    background: #F4F8FB;
    padding: 8px 16px 16px;
}
.nav-panel.open { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel li + li { border-top: 1px solid #E6EEF6; }
.nav-panel a {
    display: block;
    padding: 14px 4px;          /* >=48px tap target */
    font-weight: 600;
    font-size: 1rem;
    color: #1D3A52;
    text-decoration: none;
}
.nav-panel a:hover { color: #4783B5; }
/* The two call-to-action links keep their emphasis inside the panel. */
.nav-panel a.nav-cta {
    margin-top: 12px;
    text-align: center;
    background: #4783B5;
    color: #fff;
    border-radius: 16px;
    font-weight: 700;
    padding: 14px 20px;
}
.nav-panel a.nav-cta:hover { background: #265B84; color: #fff; }
.nav-panel a.nav-alt {
    margin-top: 8px;
    text-align: center;
    border: 1px solid #4783B5;
    color: #265B84;
    border-radius: 16px;
    font-weight: 700;
    padding: 13px 20px;
}

@media (max-width: 767px) {
    .nav-toggle { display: inline-flex; }
    /* Collapse the header's own inline links; the panel carries them instead. */
    .nav-links-inline { display: none !important; }
}