/* The shared site header, footer and back-to-top button: the public home
   page (layouts/home.blade.php) and every public portal page
   (layouts/public.blade.php) include the same two partials
   (resources/views/partials/site-header|site-footer.blade.php).

   Self-contained on purpose: every class is prefixed site-, and the design
   tokens are set on these elements rather than :root, so it sits on top of
   Bootstrap and the portal's own app.css without either side restyling the
   other. */

.site-header,
.site-footer,
.back-to-top,
.site-skip-link {
    --orange: #f39122;
    --orange-dark: #dd7c0e;
    --navy: #224680;
    --text: #1d2433;
    --white: #ffffff;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Montserrat', var(--font-body);
    --container: 1160px;
    --gutter: 24px;
    --section-y: clamp(56px, 5.5vw, 88px);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --site-header-h: 104px;
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* Resets inside :where(), so they weigh nothing and every rule below
   still wins over them. */
:where(.site-header, .site-footer) *,
:where(.site-header, .site-footer) *::before,
:where(.site-header, .site-footer) *::after { box-sizing: border-box; }
:where(.site-header, .site-footer) ul { margin: 0; padding: 0; list-style: none; }
:where(.site-header, .site-footer) img { display: block; max-width: 100%; height: auto; }
:where(.site-footer) :where(h2, p) { margin: 0; }
:where(.site-header, .site-footer) a { color: inherit; }
.site-header :focus-visible,
.site-footer :focus-visible,
.back-to-top:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.site-container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.site-skip-link {
    position: absolute;
    left: 16px; top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--navy);
    color: var(--white);
    border-radius: 6px;
    text-decoration: none;
}
.site-skip-link:focus { top: 16px; color: var(--white); }

/* On the public portal pages the header and footer line up with the page
   content instead: the same width and side padding as app.css's
   .public-content (and the course filter bar, which matches it), so the
   logo starts where the banner does and the last link ends where it ends.
   Keep the two in step. */
.site-container--portal {
    max-width: 1680px;
    padding-left: 5%;
    padding-right: 5%;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(160%) blur(8px);
    transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(17, 36, 70, .08); }
/* The portal pages' header carries no shadow, scrolled or not (direct instruction) */
.site-header.is-compact,
.site-header.is-compact.is-scrolled { box-shadow: none; }

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--site-header-h);
    transition: min-height .3s var(--ease);
}
.is-scrolled .site-header-inner,
.is-compact .site-header-inner { min-height: 76px; }

.site-brand img { width: 170px; transition: width .3s var(--ease); }
.is-scrolled .site-brand img,
.is-compact .site-brand img { width: 140px; }

.site-nav { display: flex; align-items: center; gap: 40px; }

.site-nav-list { display: flex; gap: 30px; }
.site-nav-list a {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    font: 600 14px/1 var(--font-body);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
    letter-spacing: .01em;
    transition: color .2s ease;
}
.site-nav-list a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.site-nav-list a:hover,
.site-nav-list a.is-active { color: var(--orange-dark); }
.site-nav-list a:hover::after,
.site-nav-list a.is-active::after { transform: scaleX(1); }

.site-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.site-nav-toggle-bar { width: 26px; height: 3px; border-radius: 2px; background: var(--navy); transition: transform .3s var(--ease), opacity .2s ease; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Log out is a form button; it reads exactly like the links beside it */
.site-nav-list form { margin: 0; }
.site-nav-list button {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    background: none;
    border: 0;
    font: 600 14px/1 var(--font-body);
    text-transform: uppercase;
    color: var(--text);
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .2s ease;
}
.site-nav-list button:hover { color: var(--orange-dark); }

/* The header's call to action (home page only) */
.site-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 6px 16px rgba(243, 145, 34, .28);
    font: 700 15px/1.2 var(--font-display);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.site-cta:hover { background: var(--orange-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(243, 145, 34, .38); }
.site-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s var(--ease);
}
.site-cta:hover::after { transform: translateX(120%); }
.site-cta-arrow { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.site-cta:hover .site-cta-arrow { transform: translateX(4px); }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy); color: var(--white); }

.site-footer-stripe { height: 38px; background: var(--orange); }

.site-footer-inner {
    display: grid;
    grid-template-columns: 1.55fr 1fr .95fr;
    gap: 40px;
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

/* Links shrink to the logo, so the clickable area is the logo itself. */
.site-footer-logo-link { display: inline-block; }
.site-footer-powered a { display: block; transition: opacity .2s ease; }
.site-footer-powered a:hover,
.site-footer-logo-link:hover { opacity: .85; }

/* 165px is the logo file's own width — never scaled up, so it stays sharp. */
.site-footer-logo {
    width: 165px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--white);
}

.site-footer-tagline {
    max-width: 320px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.site-footer-col { padding-top: 42px; }

.site-footer-heading { font: 700 16px/1.2 var(--font-body); color: var(--white); }

.site-footer-links { margin-top: 24px; display: grid; gap: 14px; }
.site-footer-links a {
    display: inline-block;
    font-size: 15px;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    transition: color .2s ease, transform .2s var(--ease);
}

.site-footer-contact { margin-top: 26px; display: grid; gap: 22px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.site-footer-contact a { text-decoration: none; transition: color .2s ease; }

.site-footer-links a:hover { color: var(--orange); transform: translateX(4px); }
.site-footer-contact a:hover { color: var(--orange); }

.site-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.site-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.site-footer-copyright { position: relative; top: 6px; font-size: 13px; color: rgba(255, 255, 255, .72); }

.site-footer-powered {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
/* The logo file carries wide transparent margins (left ~18%, right ~25%
   of its width); the negative margins trim them so the visible mark sits
   right beside the label. It is white on transparent, made for this dark
   background, so it needs no white panel like the footer's main logo. */
.site-footer-powered a { margin: 0 -23px 0 -17px; }
.site-footer-powered img {
    height: 55px;
    width: auto;
    max-width: none;
}
/* The tall bars lift the image's centre above the "exd" letters, so the
   label is nudged down to sit level with the letters, not the bars. */
.site-footer-powered span { position: relative; top: 6px; }

/* ---------- Back to top ---------- */

.back-to-top {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border: 0;
    border-radius: 50%;
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 10px 24px rgba(243, 145, 34, .4);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .3s var(--ease), visibility 0s linear .3s, background-color .2s ease;
}
.back-to-top svg { width: 22px; height: 22px; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s var(--ease), visibility 0s, background-color .2s ease; }
.back-to-top:hover { background: var(--navy); }

@media (max-width: 1100px) {
    .site-header { --site-header-h: 84px; }
    .site-header-inner,
    .is-scrolled .site-header-inner,
    .is-compact .site-header-inner { min-height: var(--site-header-h); }
    .site-brand img,
    .is-scrolled .site-brand img,
    .is-compact .site-brand img { width: 170px; }
    .site-nav-toggle { display: flex; }

    .site-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 20px var(--gutter) 28px;
        background: var(--white);
        box-shadow: 0 14px 24px rgba(0, 0, 0, .08);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .3s;
    }
    .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease), visibility 0s; }
    .site-nav-list { flex-direction: column; gap: 0; }
    .site-nav-list a,
    .site-nav-list button { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid #eef0f4; text-align: left; }
    .site-nav-list a::after { display: none; }
    .site-cta { align-self: flex-start; }

    .site-footer-inner { grid-template-columns: 1fr 1fr; }
    .site-footer-brand { grid-column: 1 / -1; }
    .site-footer-col { padding-top: 0; }
}

@media (max-width: 680px) {
    .site-header,
    .site-footer { --gutter: 16px; --section-y: 56px; }
    .site-header { --site-header-h: 68px; }
    .site-brand img,
    .is-scrolled .site-brand img,
    .is-compact .site-brand img { width: 136px; }

    .site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .site-footer-logo { width: 150px; }
    .site-footer-bottom-inner { flex-direction: column-reverse; text-align: center; }
    .site-footer-copyright { top: 0; }

    .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header *, .site-footer *, .site-header, .back-to-top {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}