/* =====================================================================
   SITE: design settings, page box, "Frequency English" header, menu row, footer, social icons, print. Used by every new page.
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   One place to change the look. For the planned single-colour site,
   point all four --accent-* values at the same colour family.
   ===================================================================== */
:root {
    --ink:        #1F2433;
    --muted:      #5A6072;
    --page-bg:    #f4f4f4;
    --surface:    #ffffff;
    --line:       #E3E5EA;

    --coral:  #E4572E;  --coral-tint:  #FDECE7;
    --blue:   #2E86AB;  --blue-tint:   #E6F2F8;
    --purple: #7B2CBF;  --purple-tint: #F1E8FA;
    --teal:   #2A9D8F;  --teal-tint:   #E3F4F2;
    --right:  var(--teal);
    --wrong:  var(--coral);

    --gradient: linear-gradient(90deg, var(--coral), var(--purple), var(--blue), var(--teal));

    --font:   Verdana, "DejaVu Sans", system-ui, sans-serif;
    --radius-lg: 16px;
    --radius:    10px;
    --shadow:    0 6px 24px rgb(0 0 0 / .12);
    --page-max:  1150px;
    --gutter:    clamp(16px, 4vw, 40px);
}

/* =====================================================================
   2. PAGE SHELL  (replaces the old layout <table>s)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding-block: clamp(0px, 3vw, 30px);
    background: var(--page-bg);
    -webkit-text-size-adjust: 100%;
}

.page {
    text-align: center;          /* centres the site banner + menu, as the old layout table did */
    width: min(100%, var(--page-max));
    margin-inline: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid #c4c3d0;   /* very thin light grey border */
    box-shadow: var(--shadow);
    overflow: clip;              /* keeps the rounded corners clean */
    padding: 3px 8px 24px;       /* same padding as the old layout table cell, so the banner + menu sit where they do on other pages */
}

/* ---- Menu row: same left/right edges as the lesson content below ----
   (the menu has its own 18px left margin, so the row adds the rest of the gutter) */
.page > .menuRow { padding-inline: calc(var(--gutter) - 18px); }

@media (max-width: 768px) and (orientation: portrait) {
    .page > .menuRow { padding-inline: var(--gutter) !important; }   /* phones: the menu has no margin */
}

/* ---- Site header (replaces the banner): just the site name, small and centred ---- */
.site-header {
    padding: 26px 18px 26px;           /* top = space above the site name, bottom = space between it and the menu */
    font-family: var(--font);
}

.site-header__name {
    margin: 0;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-header__name.font-adlib { font-weight: normal; }   /* AdLib has no bold */

@media (max-width: 768px) and (orientation: portrait) {
    .site-header { padding: 18px 0 18px; }
}

@media (max-width: 600px) {
    .page { border-radius: 0; box-shadow: none; }
}

/* =====================================================================
   3. LESSON CONTENT
   Everything is scoped under .lesson so site-wide CSS (styleHmenu.css
   etc.) can't leak in, and lesson styles can't leak out.
   ===================================================================== */
.lesson {
    color: var(--ink);
    font-family: var(--font);
    line-height: 1.5;
    padding: clamp(20px, 3vw, 32px) var(--gutter) 0;
    font-size: 15px;
    text-align: left;
}

.lesson :where(h2, p, ul, ol, table, fieldset) { margin: 0; }

.lesson img { max-width: 100%; height: auto; display: block; }

/* ---- Download + footer ---- */
.page-actions { text-align: center; margin-top: 10px; }

.pdf-download {
    display: inline-block;
    padding: 9px 22px;
    font: bold 15px Arial, sans-serif;
    color: #fff;
    background: #fb762b;
    border-radius: 5px;
    text-decoration: none;
}

.pdf-download:hover { background: #fb972b; }

.site-footer { text-align: center; padding-top: 18px; }

.footer { display: block; font-size: 14px; font-family: Verdana, sans-serif; padding-block: 8px 10px; color: #7F7F7F; }

/* ---- Social media icons (between the home button and the footer text) ---- */
.social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 18px;                /* space above and below the icons */
    padding: 0;
    list-style: none;
}

.social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EEF0F4;                /* light grey circle */
    color: #5A6072;                     /* icon colour */
    font-size: 18px;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.social a:hover,
.social a:focus-visible {
    transform: scale(1.18);             /* enlarge slightly on hover: change to adjust */
    background: #1F2433;
    color: #fff;
    outline: none;
}

/* ---- Accessibility & print ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.print-only { display: none; }

@media print {
    body { background: #fff !important; background-image: none !important; padding: 0; }
    .page { box-shadow: none; border: 0; border-radius: 0; padding-bottom: 0; }
    .page > .menuRow, .hamburger, .phone-search, .say, .check, .score, .answers,
    .page-actions, .site-footer, .screen-only, .social { display: none !important; }
    html { background: #fff !important; }
    .card, .practice-title, .hero, .print-answers { break-inside: avoid; }
    .practice-title { break-after: avoid; }
    .print-only { display: block; }
    .print-answers { margin-top: 6px; font-size: .8rem; color: var(--muted); }
    .print-answers h2 { font-size: .9rem; color: var(--ink); margin: 0 0 4px; }
    .print-answers p { margin: 0 0 3px; }
    .print-answers u { text-decoration: none; color: var(--coral); font-weight: 700; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}