/* FirstHope colours and supplied logo on the spacious campaign layout. */
:root {
  --ink: #132526;
  --muted: #405258;
  --line: #d8e1ea;
  --paper: #f8fafc;
  --wash: #f5f8fb;
  --action: #123d30;
  --button-ink: #050505;
  --teal: #0f4a49;
  --blue: #173f68;
  --purple: #514070;
  --clay: #6a4634;
  --accent: #123d30;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: #e99a3c;
}
.brand .brand-logo { display: block; width: 164px; height: auto; }
.site-header { border-bottom-color: #dce8e9; }
.desktop-nav { font-size: .88rem; }
.desktop-nav a:hover, .desktop-nav a[aria-current] {
  background: #e8f2f2;
  color: var(--action);
}
.mobile-menu a:hover { background: #e8f2f2; color: var(--action); }
.header-actions .button, .button {
  background: var(--button-ink);
  border-color: var(--button-ink);
  color: white;
}
.header-actions .button:hover, .button:hover {
  background: #252525;
  border-color: #252525;
}
.button.secondary { background: #e9f2f3; border-color: #d2e3e5; color: var(--action); }
.button.secondary:hover { background: #dcebec; border-color: #c1d8db; color: var(--action); }
.text-link, .card-link { color: var(--action); }
.text-link:hover, .card-link:hover { color: #0b3938; }

.hero { background: #102b2e; }
.hero-figure::after {
  background: linear-gradient(180deg, rgba(0,0,0,.43), rgba(0,0,0,.45) 45%, rgba(0,0,0,.75));
}
.hero-description { font-size: 1.03rem; }
.hero-footnote { font-size: .82rem; }
.hero .hero-actions .button.secondary { background: rgba(7,48,49,.75); border-color: rgba(255,255,255,.8); }
.hero .hero-actions .button.secondary:hover { background: rgba(15,74,73,.95); }
.hero-highlights strong { font-size: .82rem; }
.section-heading .eyebrow, .faq-grid .eyebrow, .page-hero .eyebrow,
.editorial-intro .eyebrow, .publisher-heading .eyebrow { color: var(--action); }

.area-card, .area-card.pharmacy { background-image: none; border: 0; color: white; }
.area-card:nth-child(4n+1) { background: var(--teal); }
.area-card:nth-child(4n+2) { background: var(--blue); }
.area-card:nth-child(4n+3) { background: var(--purple); }
.area-card:nth-child(4n+4) { background: var(--clay); }
.area-card:hover, .area-card.pharmacy:hover { border: 0; filter: brightness(1.09); }
.area-card h3, .area-card:not(.pharmacy) h3,
.area-card p, .area-card:not(.pharmacy) p,
.area-card .area-number, .area-card:not(.pharmacy) .area-number,
.area-card .area-link, .area-card:not(.pharmacy) .area-link {
  color: white;
}
.area-card p, .area-card:not(.pharmacy) p { color: #e7f0f1; }
.area-card .area-number { color: #d6e5e7; }

.course-card, .class-card, .collection-card, .platform-card,
.availability-panel, .search-form, .note-panel, .support-card {
  background: #f3f8fa;
  border-color: #dce8e9;
}
.course-card:hover, .class-card:hover, .collection-card:hover { background: #e8f2f4; border-color: #b9d2d5; }
.course-card .card-link, .collection-card .card-link,
.course-card .card-link:hover, .collection-card .card-link:hover { color: var(--action); }
.sample-image, .sample-image:hover { background: #eaf2f5; }
.sample-card { border-color: #dce8e9; }
.sample-status { border-color: #bad2d5; background: #eef6f7; color: var(--action); }
.updates-home, .faq-section { background: #f5f8fb; }
.samples-section { background: #eef3fb; }
.learning-home { background: #e9f1f7; }
.updates-home { border-bottom-color: #dce8e9; }
.update-card { border-color: #d5e2e4; }
.update-card:hover { border-color: var(--action); }
.editorial-tag.pharmacy { background: #dceeee; color: #0b4645; }
.editorial-tag.nursing { background: #e3ecf7; color: #173f68; }
.editorial-tag.mbbs { background: #ebe6f3; color: #514070; }
.editorial-tag.school { background: #f1e8df; color: #6a4634; }

.benefits, .final-cta, .access-card { background: #102b2e; }
.benefits p, .final-cta p:not(.eyebrow), .access-card p { color: #d9e7e8; }
.benefits .eyebrow, .final-cta .eyebrow, .access-card .eyebrow { color: #b7d8d7; }
.access-card > .button { background: white; color: var(--action); border-color: white; }
.access-card > .button:hover { background: #e8f2f2; border-color: #e8f2f2; color: var(--action); }
.final-cta > .button { color: var(--action); }
.page-hero { background: #eef3fb; border-bottom-color: #dce8e9; }
.page-hero h1 { color: var(--ink); }
.page-hero .button { background: var(--button-ink); border-color: var(--button-ink); }
.page-hero .button:hover { background: #252525; border-color: #252525; }
.page-hero .button.secondary { color: var(--action); }
.page-hero .breadcrumbs { color: var(--muted); }
body[data-page-path="/get-the-app/"] .page-hero {
  background: linear-gradient(90deg, rgba(5,31,33,.84), rgba(5,31,33,.42)), url('/assets/firsthope-campaign.webp') center 60% / cover;
}
.editorial-tabs [aria-current], .editorial-tabs [aria-selected="true"] { background: var(--button-ink); border-color: var(--button-ink); }
.editorial-filters, .publisher-list, .article-sidebar .notice, .publisher-notice,
.publisher-status, .editor-attachment { background: #f3f8fa; }
.article-body a:not(.button), .article-sidebar a { color: var(--action); text-decoration: underline; text-underline-offset: 4px; }
.publisher-status.error { background: #f8e9e7; color: #81362a; }

.site-footer { background: #102b2e; border-top-color: #102b2e; color: white; }
.site-footer .brand-logo { width: 194px; height: auto; }
.site-footer h2, .site-footer p, .site-footer a:not(.button) { color: #e4f0f0; }
.site-footer a:not(.button):hover { color: white; text-decoration: underline; }
.site-footer .button { background: white; border-color: white; color: var(--action); }
.site-footer .button:hover { background: #e8f2f2; border-color: #e8f2f2; color: var(--action); }
.footer-bottom { border-top-color: #5b7779; color: #d1e2e2; }
.mobile-app-bar { border-top-color: #d4e2e4; }
.mobile-app-bar a { background: var(--button-ink); }

/* Less repeated copy needs a tighter rhythm and simpler course tiles. */
.section { padding: 72px 0; }
.section.section-topless { padding-top: 0; }
.section-heading { margin-bottom: 32px; }
.section-heading h2 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.study-section { padding-top: 72px; }
.hero { min-height: max(650px, calc(85svh - 72px)); }
.hero .hero-actions { margin-top: 30px; }
.area-card, .area-card.pharmacy { min-height: 210px; padding: 26px; }
.area-card h3 { margin-bottom: 0; }
.update-card { padding: 26px; }
.final-cta { padding: 52px; }
.final-cta h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.page-hero { padding-top: 35px; padding-bottom: 68px; }
.breadcrumbs { margin-bottom: 35px; }
.editorial-intro { padding-top: 38px; padding-bottom: 43px; }

/* Match the reference site's readable type and sentence-case interface. */
body {
  background: var(--wash);
  font-family: Aptos, "Aptos Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
h1, h2, h3 { letter-spacing: normal; }
.hero h1 {
  max-width: 900px;
  font-size: clamp(3.6rem, 6.7vw, 6.7rem);
  line-height: 1.04;
  letter-spacing: normal;
  text-wrap: balance;
}
.page-hero h1, .editorial-intro h1, .publisher-heading h1 {
  line-height: 1.04;
  letter-spacing: normal;
  text-wrap: balance;
}
.section-heading h2 { letter-spacing: normal; }
.hero-description { line-height: 1.55; }
.hero-copy > .eyebrow { font-size: .92rem; justify-content: center; text-align: center; }
:is(.button, .eyebrow, .text-link, .card-link, .area-link, .sample-badge,
  .sample-status, .editorial-tag, .mobile-app-bar a, .editorial-tabs a,
  .editorial-tabs button, .site-footer h2, .learning-shortcuts > a > span:first-child) {
  text-transform: none;
  letter-spacing: normal;
}
.button { font-size: .91rem; }
.header-actions .button { font-size: .86rem; }
.mobile-app-bar a { font-size: .85rem; }
.page-hero .eyebrow { font-size: .85rem; }
.section-heading .text-link { font-size: .92rem; }
.editorial-tag, .sample-badge, .sample-status { font-size: .75rem; }
.site-header { background: rgba(248,250,252,.96); }
.desktop-nav a:hover, .desktop-nav a[aria-current], .mobile-menu a:hover {
  background: #e9f1f7;
}

/* Illustrated study areas and Pharmacy courses echo the owner site's cards. */
.area-grid { gap: 16px; }
.area-card, .area-card.pharmacy {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 15px;
  min-height: 310px;
  padding: 18px;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(19,37,38,.14);
}
.area-card > div, .area-card.pharmacy > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.area-card .area-art {
  display: block;
  width: 100%;
  max-height: 170px;
  aspect-ratio: 520 / 340;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
}
.area-card h3 { margin: 0; padding: 0 2px 2px; font-size: 1.55rem; line-height: 1.18; }
.area-card:hover, .area-card.pharmacy:hover { box-shadow: 0 23px 46px rgba(19,37,38,.22); transform: translateY(-3px); }
.area-card.pharmacy:hover { background: var(--blue); }
.domain-notes-section .course-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.domain-notes-section .course-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 372px;
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(19,37,38,.08);
  border: 0;
  color: white;
}
.domain-notes-section .course-card:nth-child(4n+1) { background: var(--teal); }
.domain-notes-section .course-card:nth-child(4n+2) { background: var(--blue); }
.domain-notes-section .course-card:nth-child(4n+3) { background: var(--purple); }
.domain-notes-section .course-card:nth-child(4n+4) { background: var(--clay); }
.domain-notes-section .course-card:hover { filter: brightness(1.08); box-shadow: 0 19px 45px rgba(19,37,38,.2); }
.domain-notes-section .course-card h2,
.domain-notes-section .course-card p:not(.eyebrow),
.domain-notes-section .course-card .card-link { color: white; }
.domain-notes-section .course-card .eyebrow { color: #ffd2a8; }
.course-art { display: block; width: 100%; height: auto; aspect-ratio: 520 / 340; border-radius: 12px; margin-bottom: 20px; }
.course-card h2 { font-size: 1.55rem; line-height: 1.15; letter-spacing: normal; }
.course-card p:not(.eyebrow) { font-size: .91rem; line-height: 1.48; }
.course-card .card-link { margin-top: auto; }

/* Give adjacent content cards different, readable colours throughout the site. */
:is(.collection-grid, .updates-grid, .learning-shortcuts, .sample-grid, .app-access-grid, .area-grid) > :nth-child(6n+1) {
  --box-bg: #c6f5e3; --box-border: #86d9b5; --box-accent: #09674e;
}
:is(.collection-grid, .updates-grid, .learning-shortcuts, .sample-grid, .app-access-grid, .area-grid) > :nth-child(6n+2) {
  --box-bg: #d0e5ff; --box-border: #8cbcf6; --box-accent: #225fb0;
}
:is(.collection-grid, .updates-grid, .learning-shortcuts, .sample-grid, .app-access-grid, .area-grid) > :nth-child(6n+3) {
  --box-bg: #e5d6ff; --box-border: #c2a0f0; --box-accent: #7446b1;
}
:is(.collection-grid, .updates-grid, .learning-shortcuts, .sample-grid, .app-access-grid, .area-grid) > :nth-child(6n+4) {
  --box-bg: #ffdfc5; --box-border: #f3b98a; --box-accent: #a85419;
}
:is(.collection-grid, .updates-grid, .learning-shortcuts, .sample-grid, .app-access-grid, .area-grid) > :nth-child(6n+5) {
  --box-bg: #c5f0f1; --box-border: #8bcfd4; --box-accent: #086871;
}
:is(.collection-grid, .updates-grid, .learning-shortcuts, .sample-grid, .app-access-grid, .area-grid) > :nth-child(6n+6) {
  --box-bg: #ffedb5; --box-border: #e8c765; --box-accent: #86590d;
}
.collection-grid > .collection-card,
.updates-grid > .update-card,
.learning-shortcuts > a,
.sample-grid .sample-card,
.app-access-grid > .platform-card,
.area-grid > .class-card {
  background: var(--box-bg);
  border-color: var(--box-border);
  box-shadow: 0 8px 24px rgba(19,37,38,.06);
}
.sample-grid .sample-image,
.sample-grid .sample-image:hover { background: var(--box-bg); }
.collection-grid > .collection-card:hover,
.updates-grid > .update-card:hover,
.learning-shortcuts > a:hover,
.app-access-grid > .platform-card:hover,
.area-grid > .class-card:hover {
  background: var(--box-bg);
  border-color: var(--box-accent);
  filter: brightness(.98);
}
.area-grid > .class-card h2 { color: var(--ink); }
.area-grid > .class-card .card-link { color: var(--action); }

@media (max-width: 1150px) {
  .domain-notes-section .course-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .area-card, .area-card.pharmacy { min-height: 220px; padding: 12px; gap: 10px; border-radius: 13px; }
  .area-card .area-art { max-height: 110px; border-radius: 8px; }
  .area-card h3 { font-size: clamp(1.05rem, 4.7vw, 1.3rem); }
  .area-number { font-size: .68rem; }
  .domain-notes-section .course-grid { grid-template-columns: 1fr; gap: 12px; }
  .domain-notes-section .course-card {
    display: grid;
    grid-template-columns: minmax(90px, 34%) 1fr;
    grid-template-rows: repeat(4, auto);
    align-content: center;
    column-gap: 15px;
    min-height: 0;
    padding: 13px;
  }
  .course-art { grid-column: 1; grid-row: 1 / 5; align-self: center; margin-bottom: 0; }
  .course-card .eyebrow, .course-card h2, .course-card p:not(.eyebrow), .course-card .card-link { grid-column: 2; }
  .course-card .eyebrow { grid-row: 1; margin-bottom: 4px; }
  .course-card h2 { grid-row: 2; margin-bottom: 3px; font-size: 1.3rem; }
  .course-card p:not(.eyebrow) { grid-row: 3; margin-bottom: 5px; font-size: .82rem; }
  .course-card .card-link { grid-row: 4; font-size: .88rem; }
}

@media (max-width: 480px) {
  .brand .brand-logo { width: 145px; }
  .header-actions .icon-button:first-child { display: inline-flex; }
  .hero-highlights strong { font-size: .76rem; }
  .hero .hero-actions .button { font-size: .9rem; }
  .hero-copy > .eyebrow { font-size: .78rem; letter-spacing: normal; line-height: 1.5; max-width: 330px; margin-inline: auto; }
  .hero h1 { font-size: clamp(3.05rem, 12vw, 3.75rem); letter-spacing: normal; line-height: 1.07; }
  .hero { min-height: clamp(610px, 85svh, 760px); }
  .section { padding: 58px 0; }
  .study-section { padding-top: 58px; }
  .area-card, .area-card.pharmacy { min-height: 155px; }
  .section-heading h2 { font-size: clamp(2.15rem, 8vw, 3rem); }
  .final-cta { padding: 40px 25px; }
}