/* ===== frinally_styles.css — components =====
   Ported from frinally_styles.24.css (map §6):
   - base-layer + variables → tokens.css / base.css
   - grid → layout.css
   - [[$colour]] → var(--color-*) */

body
{
    font-family: 'Montserrat-Regular', sans-serif;
    color: var(--color-black);
    background: var(--color-blue);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}

a
{
    color: var(--color-grey);
    text-decoration: none;
}

a:hover
{
    color: var(--color-black);
}

a[href^="tel:"]
{
    color: var(--color-white) !important;
    text-decoration: none !important;
}

.main a:not(.button-cta):not([href^="tel:"]),
.site-footer a
{
    color: var(--color-link);
    font-family: var(--font-semi);
}

.main a:not(.button-cta):not([href^="tel:"]):hover,
.site-footer a:hover
{
    color: var(--color-black);
}

/* main text */
.main p,
.main li
{
    line-height: 150%;
    font-size: 1.1rem;
    font-weight: 100;
}

.main p + p,
.main h4 + p,
.main ul + p
{
    padding-top: 1rem;
}

.main p + h4
{
    padding-top: 3rem;
}

.main p + h3
{
    padding-top: 3rem;
}

.main ul + h3
{
    padding-top: 3rem;
}

/* more space before a heading after copy */

/* content headings on inner pages (About etc.) — h4 matches the home teaser h4;
   h2 is the page title, a touch larger. Applies to every page using the
   .main.inside wrapper (basic-page.php: About, Contact, ...) */
.main.inside h2
{
    font-size: 2rem;
}

.main.inside h3
{
    font-size: 1.5rem;
}

.main.inside h4
{
    font-size: 1.62rem;
}

.main.inside h2 + p,
.main.inside h2 + h3,
.main.inside h2 + h4,
.main.inside h3 + p
{
    padding-top: 1rem;
}

.main.inside p + h2,
.main.inside p + h3,
.main.inside p + h4,
.main.inside ul + h2,
.main.inside ul + h3,
.main.inside ul + h4
{
    padding-top: 3rem;
}

.main.inside h3 + table
{
    padding-top: 1rem;
}

.main.inside table
{
    width: 100%;
    margin: 1rem 0 0;
    border-collapse: collapse;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 1rem;
}

.main.inside th,
.main.inside td
{
    padding: .8rem 1rem;
    border: 1px solid var(--color-mid-grey);
    text-align: left;
    vertical-align: top;
}

.main.inside th
{
    background: var(--color-blue);
    font-family: var(--font-semi);
    font-weight: 600;
}

.main.inside tr:nth-child(even) td
{
    background: var(--color-light-grey);
}

.main.inside table + h2,
.main.inside table + h3,
.main.inside table + h4
{
    padding-top: 3rem;
}

.page-updated
{
    margin-top: 2rem;
    color: var(--color-grey);
    font-size: .8rem;
}

/* logo (was .logo) */
.site-header__logo a,
.site-header__logo svg
{
    display: inline-block;
    width: 12.5rem;
    height: 4.25rem;
    color: var(--color-black);
}

/* social icons (was .social-icons) */
.site-header__social a,
.site-header__social svg
{
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-black);
}

.site-header__social a + a
{
    margin-left: .5rem;
}

/* hero */
.hero
{
    flex: 0 0 auto;
    width: 100%;
}

.hero-image
{
    display: block;
    width: 100%;
    height: auto;
}

/* picture wrapper for the responsive hero — same full-bleed behaviour as the img */
picture.hero-image
{
    line-height: 0;
}

picture.hero-image > img
{
    display: block;
    width: 100%;
    height: auto;
}

.hero-content,
.teaser,
.main.inside,
.drop__body
{
    display: block;
    padding: 4rem 16.66666%;
}

.teaser
{
    padding-top: 0;
}

.teaser h4
{
    font-size: 1.62rem;
}

/* ~108% of the drop h3 (1.5rem) — slightly bolder presence */
.hero-content h3
{
    font-size: 1.5rem;
}

.hero-content h4
{
    font-size: 3rem;
    padding: .5rem 0 1.3rem 0;
}

.hero-content p + p
{
    padding-top: 1rem;
}

section.teaser,
section.main
{
    background: var(--color-white);
    color: var(--color-black);
}

.error-404
{
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-black);
    color: var(--color-blue);
    text-align: center;
}

.error-404 > *
{
    max-width: 70rem;
    padding-inline: var(--space-gutter);
}

.error-404 h2
{
    font-size: 5rem;
    padding: 2rem 0;
}

.error-404 h3
{
    font-size: 3rem;
}

.error-404 h3 + p
{
    margin-top: 2rem;
}

.error-404 h2 + p
{
    margin-top: 1rem;
}

.error-404 a
{
    color: var(--color-white);
}

.error-404 a:hover
{
    color: var(--color-blue);
}

.error-404 .button-cta
{
    margin-top: 2rem;
}

/* hero-headings — the big black intro block */
section.hero-headings
{
    align-self: flex-start;
    width: 100%;
    background: var(--color-black);
    color: var(--color-blue);
    padding: 8rem 0;
}

section.hero-headings h1
{
    font-size: 2rem;
}

section.hero-headings h2
{
    font-size: 5rem;
    padding: 2rem 0;
}

section.hero-headings h3
{
    font-size: 3rem;
}

/* Friday drop — text block underneath the hero image (same spec as .teaser) */
.drop__body h3
{
    font-size: 1.5rem;
}

.drop__body h4
{
    font-size: 3rem;
    padding: .5rem 0 1.3rem;
}

.drop__body p + p
{
    padding-top: 1rem;
}

/* button-cta */
.button-cta
{
    display: inline-block;
    width: 15rem;
    text-align: center;
    font-size: .9rem;
    line-height: 1.5;
    padding: .25rem 2rem calc(.25rem + 2px);
    background: var(--color-black);
    color: var(--color-white);
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Montserrat-SemiBold', sans-serif;
    text-transform: uppercase;
    transition: color .3s ease, background-color .4s ease;
    margin-top: 1rem;
    margin-bottom: .5rem;
}

.button-cta:hover,
.button-cta:focus
{
    color: var(--color-black);
    background: var(--color-white);
}

.teaser .button-cta:hover,
.teaser .button-cta:focus
{
    background: var(--color-blue);
}

.main.inside .button-cta:hover,
.main.inside .button-cta:focus
{
    background: var(--color-blue);
}