/* ============================================
   References Page — Stylesheet
   Don Joyce | Real Estate Broker
   ============================================ */

/* ============================================
   Fonts — self-hosted, latin subset
   ============================================
   Previously loaded from fonts.googleapis.com, which cost two extra DNS lookups
   and TLS handshakes plus a render-blocking stylesheet before a single glyph could
   be requested. On rural LTE — which is exactly where a QR scan happens — that was
   the largest remaining delay in front of first paint.

   Latin subset only. Verified sufficient: every non-ASCII character on the site
   (é è ê à ç î ô ù û œ « » – — É ®) falls inside this range. The only characters
   outside it are the four CTA emoji, which the OS renders, not these fonts.

   The src paths are relative to THIS FILE, not to the page, so they resolve
   correctly from /en/, /fr/ and the root 404 alike. */

/* Inter ships as a variable font — Google served one identical file for weights
   400, 500 and 600, so a single request covers every weight the site uses. It also
   means font-weight: 300 (used by .nav__lang-sep) now renders authentically
   instead of being snapped to the nearest static weight. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins is used only by headings, and only at 600 — checked against every
   font-weight declaration in this file. The 700 file Google offers is deliberately
   NOT shipped: the sole `font-weight: 700` rule is .nav__lang-label--active, which
   is Inter. Shipping it would have been 7.8 KB nothing ever renders. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* CSS Variables */
:root {
    --color-primary: #002d62;      /* Royal LePage Navy */
    --color-accent: #e31837;       /* Royal LePage Red — BRAND. Do not change. */
    /* Accent red for TEXT on light backgrounds. The brand red above is 4.72:1 on
       white (passes) but only 4.47:1 on --color-bg-light — under the 4.5:1 AA
       threshold, which is what Lighthouse flagged on .intro__cta 2026-09-02.
       #c8102e is 5.88:1 on white and 5.58:1 on the tint, so it is safe on both and
       stays visually the same red at a glance. Use this for accent-coloured TEXT;
       keep --color-accent for backgrounds, borders and rules, where it is fine. */
    --color-accent-text: #c8102e;  /* AA-safe accent for text on light bgs */
    --color-text: #2c3e50;         /* Dark gray for readability */
    --color-text-light: #666;      /* Light gray */
    /* Was #999, which is only 2.85:1 on white and failed WCAG AA (needs 4.5:1) —
       Lighthouse flagged it 2026-09-02 as the sole accessibility defect on the site.
       #6e6e6e is 5.10:1 on white and 4.84:1 on --color-bg-light, so it passes on both
       backgrounds while staying visibly lighter than --color-text-light above, which
       is the whole reason this variable exists. DO NOT lighten it back past #727272
       (4.56:1 on the tint) — that is the floor for AA on the striped table rows. */
    --color-text-lighter: #6e6e6e; /* Even lighter gray — AA floor, see above */
    --color-bg: #ffffff;           /* White */
    --color-bg-light: #f8f9fa;     /* Light gray background */
    --color-border: #e0e0e0;       /* Border color */
    
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --spacing-xs: 0.5rem;          /* 8px */
    --spacing-sm: 1rem;            /* 16px */
    --spacing-md: 1.5rem;          /* 24px */
    --spacing-lg: 2rem;            /* 32px */
    --spacing-xl: 3rem;            /* 48px */
    --spacing-2xl: 4rem;           /* 64px */
    --spacing-3xl: 6rem;           /* 96px */
    
    --border-radius: 0.5rem;       /* 8px */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    --transition: all 0.3s ease;
}

/* ============================================
   Global Styles
   ============================================ */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
}

* {
    box-sizing: border-box;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-primary);
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 var(--spacing-md) 0;
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: var(--transition);
}

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

strong {
    font-weight: 600;
    color: var(--color-primary);
}

/* ============================================
   Layout
   ============================================ */

.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 3%;
}

/* ============================================
   Skip Link
   ============================================ */

/* Visible only on keyboard focus. The nav + full header sit before the
   content on every page, so keyboard users need a way past them. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: var(--border-radius);
}

.skip-link:focus {
    left: 0;
}

/* ============================================
   Navigation
   ============================================ */

.nav {
    background: linear-gradient(135deg, var(--color-primary) 0%, #003d8a 100%);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    gap: 0;
}

.nav__item {
    margin: 0;
}

.nav__link {
    display: block;
    padding: 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-bottom: 3px solid transparent;
}

.nav__link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
}

.nav__link--active {
    color: white;
    font-weight: 600;
    border-bottom-color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Language switcher — real links to the other language's equivalent page.
   The current language is a <span>, the other is an <a>. */
.nav__lang {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1.5rem;
    flex-shrink: 0;
}

.nav__lang-label {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.3rem 0;
    user-select: none;
    text-decoration: none;
}

a.nav__lang-label:hover {
    color: white;
    text-decoration: underline;
}

a.nav__lang-label:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
    color: white;
}

.nav__lang-label--active {
    color: white;
    font-weight: 700;
}

.nav__lang-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .nav {
        flex-wrap: wrap;
    }

    .nav__list {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: flex-start;
    }

    .nav__link {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .nav__lang {
        padding: 0.5rem 1rem 0.75rem;
        margin-left: auto;
    }
}

/* ============================================
   Header
   ============================================ */

.header {
    position: relative;
    background: linear-gradient(135deg, var(--color-primary) 0%, #003d8a 100%);
    color: white;
    padding: var(--spacing-2xl) 0;
    text-align: center;
    display: flex;
    align-items: center;
}

.header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    width: 100%;
    position: relative;
}

.header__profile {
    flex-shrink: 0;
}

.header__avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.3);
    display: block;
    background-color: rgba(255, 255, 255, 0.1);
    object-fit: cover;
    image-rendering: auto;
}

/* Award Badge — third column on desktop, below content on mobile.
   Deliberately has NO ring: the artwork is already a circular crest on a
   transparent background, so a CSS border drew a second circle around it.
   The avatar keeps its ring; the badge must not have one. */
.header__badge {
    width: 150px;
    height: 150px;
    background: transparent;
    display: block;
    flex-shrink: 0;
    z-index: 2;
}

.header__badge-wrapper {
    flex-shrink: 0;
}

.header__info {
    max-width: 900px;
}

/* Rendered as <h1> on the references pages and as <p> on the market analysis
   pages, where the article title is the H1 — so the display font and weight are
   set here rather than inherited from the heading rules. */
.header__name {
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    margin-bottom: var(--spacing-sm);
    line-height: 1.1;
}

.header__title {
    font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-xs);
}

.header__brokerage {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Header Listings Link — prominent pill button */
.header__listings-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-accent);
    color: white;
    font-family: var(--font-primary);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    margin-top: var(--spacing-md);
    white-space: nowrap;
}

.header__listings-link:hover {
    background: #c41530;
    color: white;
    text-decoration: none;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(227, 24, 55, 0.4);
}

.header__listings-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.header__contact {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.85);
}

.header__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.header__contact-label {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    font-size: inherit;
}

.header__contact a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.header__contact a:hover {
    color: white;
    text-decoration: underline;
}

.header__contact-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

@media (min-width: 768px) {
    .header {
        padding: var(--spacing-2xl) 0;
    }

    .header__content {
        flex-direction: row;
        justify-content: center;
        text-align: center;
        gap: var(--spacing-3xl);
    }

    .header__avatar {
        width: 360px;
        height: 360px;
        border-width: 6px;
        object-fit: cover;
        image-rendering: auto;
    }

    /* No .header__badge override here — it stays 150px at every width, and the
       ring it used to thicken on desktop is gone. */
}

/* ============================================
   Intro Section
   ============================================ */

.intro {
    background-color: var(--color-bg-light);
    padding: var(--spacing-xl) 0 1.2rem 0;
    text-align: center;
}

.intro__text {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.2rem;
    font-size: 1.35rem;
    line-height: 1.8;
}

.intro__text--highlight {
    margin-bottom: 0.2rem;
    font-size: 1.35rem;
}

.intro__cta {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    font-weight: 500;
    /* Sits on .intro's --color-bg-light band, so it needs the AA-safe red, not
       --color-accent. At 1.4rem/500 this is under the WCAG large-text threshold
       (24px, or 18.66px bold), so it needs the full 4.5:1 — not 3:1. */
    color: var(--color-accent-text);
    font-size: 1.4rem;
}

/* ============================================
   Section Titles
   ============================================ */

.section-title {
    text-align: center;
    position: relative;
    padding-bottom: 0.3rem;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-accent);
    margin: var(--spacing-sm) auto 0;
}

/* ============================================
   References Section
   ============================================ */

.references {
    padding: var(--spacing-sm) 0 var(--spacing-2xl) 0;
}

.references__grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: 0.3rem;
}

@media (min-width: 768px) {
    .references__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Reference Card */
.reference-card {
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.reference-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.reference-card__header {
    margin-bottom: 0;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--color-bg-light);
}

.reference-card__name {
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xs);
}

.reference-card__transaction {
    color: var(--color-accent);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.reference-card__quote {
    margin: 0;
    margin-block-start: 0;
    padding: 0;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.8;
    font-size: 1.05rem;
}

.reference-card__quote p {
    margin: 0 0 var(--spacing-sm) 0;
}

.reference-card__attribution {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--spacing-sm);
}

.reference-card__translation {
    font-size: 0.75rem;
    color: var(--color-text-lighter);
    font-style: normal;
    font-weight: 400;
    margin-top: 0.125rem;
}

.reference-card__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-md) 0;
    opacity: 0.5;
}

.reference-card.card--placeholder {
    border: 2px dashed var(--color-border);
    opacity: 0.75;
}

.reference-card.card--placeholder:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
}

/* ============================================
   Button Styles (shared)
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: calc(var(--spacing-md) + 0.25rem) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn--primary {
    background-color: var(--color-accent);
    color: white;
    flex: 1;
}

.btn--primary:hover {
    background-color: #c41530;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(227, 24, 55, 0.3);
}

.btn--secondary {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
    flex: 1;
}

.btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: white;
    transform: translateY(-2px);
}

.btn__icon {
    font-size: 1.2rem;
}

/* ============================================
    CTA Section
    ============================================ */

.cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, #003d8a 100%);
    color: white;
    padding: var(--spacing-2xl) 0;
}

.cta__title {
    color: white;
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.cta__subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-xl);
}

.cta__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
    margin: 0 auto var(--spacing-xl);
    max-width: 800px;
}

/* Narrow phones. The CTA buttons stack here, but a single button could still be
   wider than the screen: .btn sets white-space: nowrap, and the longest label
   ("Appeler Direct : 450.242.2000 x304") plus 2rem of padding either side exceeds
   375px. Measured before this rule: 17px of horizontal scroll on the French pages
   at a 375px viewport, 12px at 360px. The French labels overflow before the English
   ones, so testing only in English hides this.

   max-width + white-space: normal are the safety net; the reduced padding and font
   size mean it should not actually need to wrap in practice. */
@media (max-width: 479px) {
    .btn {
        max-width: 100%;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        font-size: 1rem;
        white-space: normal;
    }

    /* The header contact block is a wrapping flex row, and the "|" separators are
       flex items like any other — so a wrap strands one at the end of a line. At
       this width the three items always stack, which makes the separators both
       redundant and untidy. Stack explicitly and drop them. */
    .header__contact {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .header__contact-sep {
        display: none;
    }
}

@media (min-width: 480px) {
    /* flex-wrap is load-bearing. .btn sets white-space: nowrap, so four buttons in
       a non-wrapping row cannot shrink below their combined min-content width and
       overflow the viewport horizontally. Measured at a 485px viewport before this
       was added: document scrollWidth 667px against a 485px viewport — 182px of
       sideways scroll, on a site whose whole purpose is being scanned on a phone.
       Bug predates the EN/FR split; it is present on the live site. */
    .cta__buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    .btn {
        font-size: clamp(0.9rem, 1.8vw, 1.1rem);
        padding: calc(var(--spacing-md) + 0.25rem) clamp(0.5rem, 1.5vw, var(--spacing-lg));
    }
}


/* ============================================
   Footer
   ============================================ */

.footer {
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.footer__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* <h3> rather than <h4> so the document outline doesn't skip a level after the
   page's <h2> sections. Sized to match the old h4 so the design is unchanged. */
.footer__section h3 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
}

.footer__section p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-sm);
}

.footer__section a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* The footer ground is --color-primary navy, where the brand red is only 2.87:1 —
   the worst ratio on the site, and invisible to Lighthouse because axe never
   evaluates hover states. This is the brand red lightened for a dark ground:
   6.02:1 on the navy, still unmistakably red, and a clear change from the 0.9-alpha
   white of the resting state. Do NOT "restore" this to var(--color-accent). */
.footer__section a:hover {
    color: #ff8a99;
}

.footer__licence {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    text-align: left;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer__bottom-logo {
    flex-shrink: 0;
    width: 110px;
    height: auto;
    border-radius: 4px;
}

.footer__bottom-text p {
    margin-bottom: var(--spacing-xs);
}

.footer__bottom-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Service-area line. Approved by Don 2026-08-18 — the town names are the
   point, so they must be real text, not an image, and must not be hidden
   behind a media query on small screens. */
.footer__serving {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Market Report (long-form article)
   ============================================ */

.market-report {
    padding: var(--spacing-md) 0;
    background-color: var(--color-bg);
}

.market-report__body {
    max-width: 1200px;
    margin: 0 auto;
}

.market-report__intro {
    margin-bottom: 0;
}

.market-report__section {
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-bg-light);
}

.market-report__section:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.market-report__article-title {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

/* Data-currency line. The figures end at Q4 2022; saying so plainly is better
   than letting undated four-year-old numbers read as neglect. */
.market-report__dateline {
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

.market-report__heading {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
    padding-bottom: calc(var(--spacing-xs) - 0.2rem);
    border-bottom: 3px solid var(--color-accent);
    display: inline-block;
}

.market-report__text {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

/* Don't rely on :last-child for language-toggled content — hidden DOM elements
   break last-child parity between EN and FR modes. Keep all paragraphs at the
   same margin so both language views produce identical gaps. */
.market-report__text:last-of-type {
    margin-bottom: var(--spacing-md);
}

.market-report__text a {
    color: var(--color-primary);
    font-weight: 500;
}

.market-report__text a:hover {
    color: var(--color-accent);
}

.market-report__chart {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--spacing-lg) auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.market-report__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-md) 0;
    opacity: 0.5;
}

/* ============================================
   Article list (Market Analysis hub)
   ============================================ */

.article-list {
    list-style: none;
    display: grid;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}

.article-card {
    display: block;
    padding: var(--spacing-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.article-card:hover,
.article-card:focus-visible {
    box-shadow: var(--shadow-md);
    border-left-color: var(--color-accent);
    transform: translateY(-2px);
}

.article-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.article-card__meta {
    font-size: 0.9rem;
    color: var(--color-text-lighter);
    margin-bottom: var(--spacing-xs);
}

.article-card__excerpt {
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.article-card__more {
    display: inline-block;
    margin-top: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-accent);
    font-size: 0.95rem;
}

/* ============================================
   FAQ page
   ============================================ */

.faq {
    padding: var(--spacing-md) 0;
    background-color: var(--color-bg-light);
}

.faq__list {
    max-width: 1200px;
    margin: 0 auto;
}

.faq__item {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.faq__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.faq__question {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.faq__answer {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}

.faq__answer a {
    color: var(--color-primary);
    font-weight: 500;
}

/* .faq sets --color-bg-light on the whole section and there is no white card
   between it and the text, so this hover is on the tint, where plain
   --color-accent is 4.47:1. The text token is 5.58:1 there. */
.faq__answer a:hover {
    color: var(--color-accent-text);
}

/* Back link from an article to the hub */
.market-report__backlink {
    display: inline-block;
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.market-report__backlink:hover {
    text-decoration: underline;
    color: var(--color-accent);
}

/* PDF download link */
.market-report__pdf {
    display: inline-block;
    margin: var(--spacing-md) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-light);
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.market-report__pdf:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.market-report__pdf-size {
    font-weight: 400;
    color: var(--color-text-lighter);
}

/* ============================================
   Data table

   Wide tables are the classic mobile-overflow trap: a 6-column table cannot
   shrink to 360px without becoming unreadable. Rather than let it push the
   whole PAGE sideways, the table scrolls inside its own container. The
   wrapper is focusable and labelled so keyboard and screen-reader users can
   reach the scroll region too.
   ============================================ */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    max-width: 100%;
}

.table-scroll:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.market-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;          /* forces the scroll rather than a crushed table */
    font-size: 0.95rem;
    background: var(--color-bg);
}

.market-table caption {
    caption-side: top;
    text-align: left;
    padding: var(--spacing-sm);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

.market-table th,
.market-table td {
    padding: 0.6rem var(--spacing-sm);
    text-align: right;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.market-table thead th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: right;
}

.market-table th[scope="row"],
.market-table thead th:first-child {
    text-align: left;
    font-weight: 600;
}

.market-table tbody tr:last-child th,
.market-table tbody tr:last-child td {
    border-bottom: none;
}

.market-table tbody tr:nth-child(even) {
    background: var(--color-bg-light);
}

/* Even rows are tinted --color-bg-light, so both of these must clear 4.5:1 on the
   tint, not just on white. #1a7f37 is 4.82:1 there; --color-accent-text is 5.58:1.
   Plain --color-accent would be 4.47:1 and fail on every even row. */
.market-table .is-up   { color: #1a7f37; }
.market-table .is-down { color: var(--color-accent-text); }

.table-hint {
    font-size: 0.85rem;
    color: var(--color-text-lighter);
    margin-top: calc(var(--spacing-lg) * -1 + var(--spacing-xs));
    margin-bottom: var(--spacing-lg);
    font-style: italic;
}

@media (min-width: 700px) {
    .table-hint { display: none; }
}

/* Summary callout ("In summary" / "En résumé") */
.market-summary {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius);
}

.market-summary h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.market-summary ul {
    list-style: none;
    display: grid;
    gap: var(--spacing-xs);
}

.market-summary li {
    line-height: 1.65;
}

.market-report__source {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

@media (max-width: 600px) {
    .market-report {
        padding: var(--spacing-xl) 0;
    }

    .market-report__heading {
        font-size: 1.3rem;
    }

    .market-report__text {
        font-size: 1.05rem;
    }
}

/* ============================================
    Print Styles
    ============================================ */

@media print {
    body {
        font-size: 12pt;
        color: black;
    }

    .header {
        background: none;
        border-bottom: 2px solid var(--color-primary);
        color: black;
        padding: var(--spacing-lg) 0;
    }

    .header__avatar {
        border-color: black;
    }

    /* The badge has no border or shadow to convert for print. */

    .header__name,
    .header__title,
    .header__brokerage {
        color: black;
    }

    .btn {
        page-break-inside: avoid;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .cta {
        background: none;
        color: black;
        border: 1px solid var(--color-primary);
    }

    .cta__title,
    .cta__subtitle {
        color: black;
    }

    .footer {
        background: none;
        color: black;
        border-top: 2px solid var(--color-primary);
    }
}

/* ============================================
   Accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    :root {
        --color-primary: #001a3d;
        --color-accent: #cc0000;
        /* Must be overridden alongside --color-accent, or the elements that use the
           text token (.intro__cta, .market-table .is-down) would silently opt out of
           high-contrast mode. #b30000 is 7.20:1 on white and 6.83:1 on the tint. */
        --color-accent-text: #b30000;
    }
}