/* ------------------------------------------------------------------
 * Destination guides, redesigned 2026-09-11.
 *
 * One stylesheet for all ten country pages (they share one markup
 * template). Every rule is scoped to #country-content, so it outranks
 * the older sg-* rules in site-audit-2026.css without !important.
 *
 * Hooks kept for js/main.js: .sg-hero-image (moved into
 * .sg-country-profile with the facts/weather tabs), .sg-country-hero
 * (the quicknav is inserted after it) and the country-* section ids.
 *
 * Rhythm: photo hero, white overview, navy study options, white
 * timeline, soft costs, white budget, soft living, white sources.
 * No decorative rules under headings, by request.
 * ------------------------------------------------------------------ */

#country-content {
    --ink: #0E1C3C;
    --copy: #44516B;
    --muted: #55627A;
    --navy: #12244E;
    --navy-deep: #0A142B;
    --blue: #134BC3;
    --blue-dark: #0F3C9E;
    --blue-soft: #E9EFFD;
    --line: #DDE3EE;
    --soft: #F2F5FB;
    --header-h: 86px;
    background: #fff;
    color: var(--ink);
    font-family: "Source Sans 3", Arial, sans-serif;
}
#country-content * { box-sizing: border-box; min-width: 0; }
#country-content .sg-country-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
#country-content :is(h1, h2, h3) {
    margin: 0;
    color: var(--ink);
    font-family: inherit !important;
    letter-spacing: -.02em;
    text-align: left;
}
#country-content :is(h1, h2, h3, .sg-kicker)::before,
#country-content :is(h1, h2, h3, .sg-kicker)::after { content: none !important; display: none !important; }
#country-content h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 800; line-height: 1.05; }
#country-content h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; line-height: 1.12; }
#country-content h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
#country-content p { margin: 0; color: var(--copy); font-size: 16.5px; line-height: 1.7; }
#country-content [id] { scroll-margin-top: calc(var(--header-h) + 72px); }
#country-content a { color: var(--blue); }
#country-content :is(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#country-content .sg-kicker {
    display: block;
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Buttons */
#country-content :is(.sg-primary-button, .sg-secondary-button, .sg-process-intro a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease;
}
#country-content :is(.sg-primary-button, .sg-process-intro a) { background: var(--blue); color: #fff; }
#country-content :is(.sg-primary-button, .sg-process-intro a):hover { background: var(--blue-dark); }
#country-content .sg-secondary-button { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
#country-content .sg-secondary-button:hover { background: rgba(255, 255, 255, .12); }

/* Destination switcher */
#country-content .sg-country-nav { border-bottom: 1px solid var(--line); background: #fff; }
#country-content .sg-country-nav .sg-country-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
}
#country-content .sg-country-nav-label {
    flex: none;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#country-content .sg-country-nav-links { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#country-content .sg-country-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
#country-content .sg-country-nav a:hover { background: var(--soft); }
#country-content .sg-country-nav a.is-active { background: var(--navy); color: #fff; }

/* Hero: the country photo fills the band, copy sits on a navy wash. */
#country-content .sg-country-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(44px, 6vw, 88px) 0;
    background: var(--navy-deep);
}
#country-content .sg-country-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(10, 20, 43, .95) 0%, rgba(10, 20, 43, .84) 46%, rgba(10, 20, 43, .38) 100%);
    content: "";
}
#country-content .sg-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: auto;
    margin: 0;
}
#country-content .sg-hero-image img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
#country-content .sg-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 48px;
    align-items: center;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
#country-content .sg-hero-copy { padding: 0; }
#country-content .sg-hero-copy .sg-kicker { color: #9DB8F5; }
#country-content .sg-hero-copy h1 { max-width: 14ch; margin: 14px 0 18px; color: #fff; }
#country-content .sg-hero-copy p { max-width: 58ch; color: #DCE4F5; font-size: 17.5px; }
#country-content .sg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#country-content .sg-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding: 0;
    border: 0;
}
#country-content .sg-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #E6ECF8;
    font-size: 13.5px;
    line-height: 1.3;
}

/* Facts / weather card (built by main.js around .sg-hero-image). */
#country-content .sg-country-profile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(4, 12, 32, .35);
    color: var(--ink);
}
#country-content .sg-country-profile__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border: 0;
    background: var(--soft);
}
#country-content .sg-country-profile__tabs button {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
#country-content .sg-country-profile__tabs button::after { display: none; }
#country-content .sg-country-profile__tabs button[aria-selected="true"] {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(14, 28, 60, .12);
}
#country-content .sg-country-profile__panel { padding: 18px 22px 22px; background: #fff; }
#country-content .sg-country-profile__panel[hidden] { display: none; }
#country-content .sg-country-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
#country-content .sg-country-fact { padding: 12px 0; border-bottom: 1px solid var(--line); }
#country-content .sg-country-fact:nth-last-child(-n+2) { border-bottom: 0; }
#country-content :is(.sg-country-fact span, .sg-country-weather__eyebrow, .sg-country-season span) {
    display: block;
    margin-bottom: 4px;
    color: #5A6782;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
#country-content .sg-country-fact strong { display: block; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.35; }
#country-content .sg-country-weather { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; min-height: 208px; }
#country-content .sg-country-temperature { display: block; margin: 6px 0 4px; color: var(--ink); font-size: 44px; font-weight: 800; line-height: 1; }
#country-content .sg-country-weather .sg-country-condition { color: var(--muted); font-size: 15px; line-height: 1.5; }
#country-content .sg-country-season { padding: 18px; border-radius: 12px; background: var(--soft); }
#country-content .sg-country-season strong { display: block; color: var(--ink); font-size: 16px; line-height: 1.45; }

/* "On this page" (built by main.js after the hero): a bar that sticks
   under the site header, replacing the floating left rail that sat
   over the content at 1280px. */
#country-content .sg-country-quicknav {
    position: sticky;
    top: var(--header-h);
    left: auto;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    padding: 10px max(24px, calc((100% - 1180px) / 2));
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 18px rgba(14, 28, 60, .06);
    transform: none;
    backdrop-filter: blur(8px);
}
#country-content .sg-country-quicknav > span {
    flex: none;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#country-content .sg-country-quicknav > div { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#country-content .sg-country-quicknav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
#country-content .sg-country-quicknav a:hover { background: var(--soft); }
#country-content .sg-country-quicknav a.is-active { background: var(--navy); color: #fff; }

/* Sections */
#country-content .sg-section { padding: clamp(56px, 7vw, 96px) 0; border: 0; }
#country-content .sg-section + .sg-section { border-top: 0; }
#country-content .sg-section-heading { max-width: 720px; margin-bottom: 36px; }
#country-content .sg-section-heading h2 { margin: 10px 0 12px; }
#country-content .sg-heading-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 48px;
    align-items: end;
    max-width: none;
}
#country-content .sg-heading-split h2 { margin-bottom: 0; }

#country-content .sg-card-number,
#country-content .sg-life-grid article > span {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 0 18px;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}

/* Overview + costs: white cards, four across. */
#country-content :is(.sg-overview-grid, .sg-program-grid, .sg-cost-grid) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
#country-content :is(.sg-country-card, .sg-cost-card) {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 28, 60, .04);
    transition: transform .2s ease, box-shadow .2s ease;
}
#country-content :is(.sg-country-card, .sg-cost-card):hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14, 28, 60, .08); }
#country-content :is(.sg-country-card, .sg-cost-card, .sg-program-card) h3 { margin-bottom: 8px; }
#country-content :is(.sg-country-card, .sg-cost-card, .sg-program-card) p { font-size: 15.5px; line-height: 1.65; }

/* Study options on navy. */
#country-content .sg-section-dark { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); }
#country-content .sg-section-dark :is(h2, h3) { color: #fff; }
#country-content .sg-section-dark p { color: #CBD5EA; }
#country-content .sg-section-dark .sg-kicker { color: #9DB8F5; }
#country-content .sg-program-card {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
}
#country-content .sg-program-card .sg-card-number { background: rgba(157, 184, 245, .16); color: #C9D8FA; }

/* Application: intro stays in view while the steps run as a timeline. */
#country-content .sg-process-panel {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr);
    gap: 64px;
    align-items: start;
}
#country-content .sg-process-intro {
    position: sticky;
    top: calc(var(--header-h) + 88px);
    padding: 0;
    border-radius: 0;
    background: none;
}
#country-content .sg-process-intro h2 { margin: 10px 0 14px; font-size: clamp(28px, 3.2vw, 40px); }
#country-content .sg-process-intro a { margin-top: 24px; }
#country-content .sg-process-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
#country-content .sg-step-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 20px;
    padding: 0 0 30px;
    border: 0;
    border-radius: 0;
    background: none;
}
#country-content .sg-step-card::before {
    position: absolute;
    top: 52px;
    bottom: 4px;
    left: 23px;
    width: 2px;
    border-radius: 2px;
    background: var(--line);
    content: "";
}
#country-content .sg-step-card:last-child { padding-bottom: 0; }
#country-content .sg-step-card:last-child::before { display: none; }
#country-content .sg-step-card .sg-card-number {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
}
#country-content .sg-step-card h3 { grid-column: 2; margin: 11px 0 6px; font-size: 19px; }
#country-content .sg-step-card p { grid-column: 2; font-size: 15.5px; }

/* Costs */
#country-content .sg-cost-section { background: var(--soft); }
#country-content .sg-data-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid #C9D6F6;
    border-radius: 12px;
    background: var(--blue-soft);
    color: #1E3A7A;
    font-size: 15px;
}
#country-content .sg-data-note::before {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    content: "i";
}

/* Work and budget */
#country-content .sg-earnings-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    overflow: visible;
    border-radius: 0;
    background: none;
}
#country-content .sg-earnings-band > div {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}
#country-content .sg-earnings-band span { display: block; color: var(--muted); font-size: 14px; font-weight: 600; }
#country-content .sg-earnings-band strong { display: block; margin: 8px 0 6px; color: var(--blue); font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.2; }
#country-content .sg-earnings-band small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
#country-content .sg-budget-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 24px;
    align-items: start;
}
#country-content .sg-expense-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
#country-content .sg-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
}
#country-content .sg-panel-title small { color: var(--muted); font-size: 13px; font-weight: 500; }
#country-content .sg-expense-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    color: var(--copy);
    font-size: 15.5px;
    line-height: 1.5;
}
#country-content .sg-expense-row:nth-child(odd) { background: #FAFBFE; }
#country-content .sg-expense-row:last-child { border-bottom: 0; }
#country-content .sg-expense-row strong { color: var(--ink); font-weight: 700; text-align: right; }
#country-content .sg-wage-note {
    padding: 24px;
    border: 1px solid #F0C36D;
    border-radius: 16px;
    background: #FFF6E5;
}
#country-content .sg-wage-note .sg-kicker { color: #7A5200; }
#country-content .sg-wage-note h3 { margin: 10px 0 10px; font-size: 20px; }
#country-content .sg-wage-note p { color: #4B3C14; font-size: 15.5px; }
#country-content .sg-budget-warning {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #F0C36D;
    border-radius: 10px;
    background: #fff;
    color: #6B4A06 !important;
    font-weight: 700;
}

/* Living abroad: light cards, number beside the text. */
#country-content .sg-life-section { background: var(--soft); }
#country-content .sg-life-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#country-content .sg-life-grid article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}
#country-content .sg-life-grid article > span { grid-row: 1 / span 2; margin: 0; }
#country-content .sg-life-grid article h3 { grid-column: 2; margin: 8px 0 6px; }
#country-content .sg-life-grid article p { grid-column: 2; font-size: 15.5px; }

/* Sources + next step */
#country-content .sg-final-section { background: #fff; }
#country-content .sg-final-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 48px;
    align-items: center;
}
#country-content .sg-final-grid h2 { margin: 10px 0 14px; }
#country-content .sg-source-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
#country-content .sg-source-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
#country-content .sg-source-links a::after { color: var(--blue); content: "\2197"; }
#country-content .sg-source-links a:hover { border-color: var(--blue); background: var(--blue-soft); }
#country-content .sg-final-grid aside {
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(150deg, var(--navy), var(--blue-dark));
    box-shadow: 0 20px 44px rgba(14, 28, 60, .18);
}
#country-content .sg-final-grid aside > span {
    display: block;
    color: #BFD0F8;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#country-content .sg-final-grid aside h3 { margin: 12px 0; color: #fff; font-size: 24px; }
#country-content .sg-final-grid aside p { color: #DCE4F5; font-size: 15.5px; }
#country-content .sg-final-grid aside .sg-primary-button { margin-top: 22px; background: #fff; color: var(--navy); }
#country-content .sg-final-grid aside .sg-primary-button:hover { background: var(--blue-soft); }

@media (max-width: 1100px) {
    #country-content :is(.sg-overview-grid, .sg-program-grid, .sg-cost-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    #country-content .sg-country-hero::before { background: linear-gradient(180deg, rgba(10, 20, 43, .88), rgba(10, 20, 43, .94)); }
    #country-content .sg-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    #country-content .sg-country-profile { max-width: 560px; }
    #country-content :is(.sg-process-panel, .sg-budget-grid, .sg-final-grid) { grid-template-columns: 1fr; gap: 32px; }
    #country-content .sg-process-intro { position: static; }
    #country-content .sg-heading-split { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 900px) {
    #country-content .sg-country-quicknav { position: relative; top: auto; padding: 10px 16px; box-shadow: none; }
    #country-content .sg-country-quicknav > span,
    #country-content .sg-country-nav-label { display: none; }
    #country-content .sg-country-nav .sg-country-shell { min-height: 0; padding: 10px 0; }
}
@media (max-width: 640px) {
    #country-content .sg-country-shell { width: calc(100% - 32px); }
    #country-content .sg-section { padding: 48px 0; }
    #country-content .sg-country-hero { padding: 36px 0 32px; }
    #country-content h1 { font-size: 38px; }
    #country-content .sg-hero-copy p { font-size: 16.5px; }
    #country-content .sg-hero-actions { flex-direction: column; }
    #country-content .sg-hero-actions a { width: 100%; }
    #country-content :is(.sg-overview-grid, .sg-program-grid, .sg-cost-grid, .sg-life-grid, .sg-earnings-band) { grid-template-columns: 1fr; gap: 14px; }
    #country-content :is(.sg-country-card, .sg-cost-card, .sg-program-card, .sg-life-grid article) { padding: 22px; }
    #country-content .sg-country-profile__panel { padding: 16px 18px 18px; }
    #country-content .sg-country-weather { grid-template-columns: 1fr; gap: 14px; min-height: 0; }
    #country-content .sg-expense-row { padding: 12px 16px; }
    #country-content .sg-panel-title { padding: 16px; }
    #country-content .sg-final-grid aside { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    #country-content :is(.sg-country-card, .sg-cost-card) { transition: none; }
    #country-content :is(.sg-country-card, .sg-cost-card):hover { transform: none; }
}