@import url("style.css?v=20260816-finalfix4");
:root { --rh-navy: #123a58; --rh-blue: #276989; --rh-gold: #ffd326; --rh-cream: #f3ead7; --rh-mist: #e9f1f5; --rh-ink: #17364b; --rh-muted: #425e70; }
html { text-size-adjust: 100%; }
body { font-size: 17px; line-height: 1.65; color: var(--rh-ink); background: rgb(232, 240, 244); font-weight: 500; }
p, li, span { color: inherit; }
.site-header { border-bottom: 2px solid rgba(214, 166, 62, 0.55); background: rgb(18, 58, 88) !important; }
.brand { font-weight: 700; }
.brand strong { color: rgb(242, 204, 110) !important; }
.main-nav a { font-weight: 700; color: rgb(255, 255, 255) !important; }
.nav-cta { background: var(--rh-gold); color: rgb(16, 40, 58) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
.hero-welcome { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(29, 90, 123), rgb(57, 131, 162) 72%, rgb(91, 157, 179)) !important; }
.hero-welcome h1 { font-weight: 800; text-shadow: rgba(0, 0, 0, 0.18) 0px 2px 10px; }
.hero-welcome .lead { color: rgb(242, 247, 250) !important; font-weight: 600; }
.welcome-principles span { background: rgba(10, 38, 57, 0.76) !important; color: rgb(248, 218, 135) !important; border-color: rgb(228, 183, 79) !important; }
.journey-cue { font-size: 1rem; }
.hero-utility-nav { display: flex; gap: 0.65rem; flex-wrap: wrap; justify-content: flex-end; margin: 0px 0px 1rem auto; max-width: 100%; }
.hero-utility-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 0.58rem 0.82rem; border-radius: 999px; background: rgba(8, 20, 32, 0.88); border: 1px solid rgba(255, 211, 38, 0.75); text-decoration: none; font-weight: 800; font-size: 0.82rem; line-height: 1.2; box-shadow: rgba(0, 0, 0, 0.18) 0px 10px 22px; color: rgb(255, 246, 204) !important; }
.hero-utility-nav a:hover { background: rgb(17, 31, 47); border-color: rgb(255, 229, 90); color: rgb(255, 255, 255) !important; }
.section { background: rgb(234, 241, 245) !important; }
.section:nth-of-type(2n) { background: rgb(244, 236, 220) !important; }
.section.intro { background: linear-gradient(rgb(220, 234, 241), rgb(238, 244, 247)) !important; }
.section.intro .split { background: rgb(215, 231, 239) !important; border: 1px solid rgb(169, 199, 215) !important; box-shadow: rgba(18, 58, 88, 0.14) 0px 16px 38px !important; }
.philosophy, .news, .laws-feature, .visual-library, .official-media, .app-showcase { background: linear-gradient(rgb(232, 241, 245), rgb(220, 233, 240)) !important; }
.section h2, .section h3, .featured-article h3, .leader-content h3 { color: rgb(18, 58, 88) !important; font-weight: 800 !important; }
.section-kicker, .eyebrow, .article-meta, .leader-role, .media-tag { color: rgb(155, 107, 8) !important; font-weight: 900 !important; }
.section-intro, .prose p, .card p, .program-card p, .note-card p, .featured-article p, .leader-content p, .badge-card p, .official-media-card p, .visual-card figcaption span { color: rgb(48, 78, 97) !important; font-weight: 500; }
.card, .program-card, .note-card, .featured-article, .leader-card, .official-media-card, .badge-card, .visual-card { background: rgb(247, 251, 253) !important; border: 1px solid rgb(183, 206, 218) !important; box-shadow: rgba(18, 58, 88, 0.14) 0px 14px 34px !important; }
.card:nth-child(2n), .program-card:nth-child(2n), .badge-card:nth-child(2n) { background: rgb(245, 237, 221) !important; }
.info-grid div, .values-row div { background: rgb(220, 234, 241) !important; border-top-color: rgb(201, 152, 46) !important; }
.info-grid strong, .values-row strong { font-weight: 800 !important; color: rgb(18, 58, 88) !important; }
.info-grid span, .values-row span { color: rgb(54, 84, 103) !important; font-size: 0.92rem !important; }
.btn { letter-spacing: 0.01em; font-size: 1rem !important; font-weight: 900 !important; }
.btn.primary { box-shadow: rgba(89, 62, 10, 0.18) 0px 9px 18px; background: linear-gradient(135deg, rgb(237, 197, 97), rgb(200, 145, 39)) !important; color: rgb(19, 42, 59) !important; }
.btn.secondary { border: 2px solid rgb(214, 166, 62) !important; }
@media (max-width: 900px) {
  .nav-wrap { min-height: 70px !important; }
  .menu-toggle { display: block !important; font-size: 1.9rem !important; color: rgb(255, 255, 255) !important; padding: 8px 10px !important; }
  .main-nav { display: none !important; position: absolute !important; top: 70px !important; left: 0px !important; right: 0px !important; background: rgb(18, 58, 88) !important; padding: 18px !important; gap: 4px !important; border-top: 1px solid rgba(214, 166, 62, 0.45) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 16px 30px !important; }
  .main-nav.open { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .main-nav a { display: block !important; width: 100% !important; padding: 12px 14px !important; font-size: 1rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
  .nav-cta { text-align: center !important; margin-top: 8px !important; border-radius: 9px !important; }
}
@media (max-width: 760px) {
  body { font-size: 17px !important; line-height: 1.65 !important; }
  .container { width: calc(100% - 28px) !important; }
  .brand img { width: 42px !important; height: 42px !important; }
  .brand span { font-size: 0.78rem !important; line-height: 1.25 !important; }
  .brand strong { font-size: 0.86rem !important; }
  .hero-welcome { min-height: auto !important; }
  .welcome-stage { padding: 48px 0px 44px !important; }
  .welcome-emblem { width: 88px !important; height: 88px !important; }
  .hero h1, .hero-welcome h1 { font-size: 2.25rem !important; line-height: 1.08 !important; margin: 12px 0px 18px !important; }
  .hero .lead, .hero-welcome .lead { font-size: 1.05rem !important; line-height: 1.6 !important; }
  .welcome-principles { gap: 8px !important; margin: 24px 0px 30px !important; }
  .welcome-principles span { font-size: 0.73rem !important; padding: 8px 10px !important; }
  .section { padding: 48px 0px !important; }
  .section h2, .badges h2 { font-size: 1.85rem !important; line-height: 1.18 !important; margin-bottom: 16px !important; }
  .section h3, .card h3, .program-card h3, .note-card h3, .official-media-card h3, .badge-card h3, .leader-content h3, .public-learning-callout h3 { font-size: 1.28rem !important; line-height: 1.3 !important; }
  .featured-article h3, .dompreh-feature h3, .biney-feature h3 { font-size: 1.7rem !important; line-height: 1.22 !important; }
  .section-intro, .prose p, .card p, .program-card p, .note-card p, .official-media-card p, .badge-card p, .leader-content p, .featured-article p, .featured-article .article-lead { font-size: 1rem !important; line-height: 1.65 !important; }
  .section-kicker, .eyebrow, .article-meta, .leader-role, .media-tag { font-size: 0.72rem !important; letter-spacing: 0.1em !important; }
  .section.intro .split { padding: 24px 20px !important; border-radius: 18px !important; }
  .card, .program-card, .note-card, .featured-article, .leader-card, .official-media-card, .badge-card, .visual-card, .public-learning-callout { padding: 22px !important; border-radius: 17px !important; }
  .cards.two, .cards.three, .leadership-grid, .pathway-banner, .section-heading-row, .split, .book-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .btn { padding: 15px 16px !important; font-size: 1rem !important; min-height: 52px !important; }
  .article-author-row { display: grid !important; grid-template-columns: 78px 1fr !important; align-items: center !important; text-align: left !important; }
  .article-author-row img { width: 78px !important; height: 78px !important; }
  .article-author-row p, .article-author-row strong { font-size: 0.95rem !important; }
  .leader-photo { height: 260px !important; max-height: 260px !important; }
  .official-badge-wrap img { max-width: 160px !important; }
}
@media (max-width: 390px) {
  body { font-size: 16px !important; }
  .hero h1, .hero-welcome h1 { font-size: 2rem !important; }
  .section h2, .badges h2 { font-size: 1.65rem !important; }
  .featured-article h3, .dompreh-feature h3, .biney-feature h3 { font-size: 1.52rem !important; }
  .card, .program-card, .note-card, .featured-article, .leader-card, .official-media-card, .badge-card, .visual-card, .public-learning-callout { padding: 18px !important; }
}
.site-back-button { position: fixed; left: 10px; bottom: 12px; z-index: 9999; border: 0px; border-radius: 999px; background: rgb(8, 40, 68); color: rgb(255, 255, 255); padding: 0.7rem 0.9rem; font-weight: 800; box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 24px; cursor: pointer; }
.classroom-bridge-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; }

/* Official Digital Campus bridge */
.digital-campus-entry { background: linear-gradient(135deg, #071b31, #123a58) !important; }
.digital-campus-entry-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr); gap: 1.5rem; align-items: center; padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid rgba(255, 211, 38, 0.55); border-radius: 22px; background: rgba(3, 15, 28, 0.48); box-shadow: rgba(0, 0, 0, 0.24) 0 18px 42px; }
.digital-campus-entry .section-kicker { color: #ffe68b !important; }
.digital-campus-entry h2 { margin: 0.25rem 0 0.7rem; color: #ffffff !important; }
.digital-campus-entry p { margin-bottom: 0; color: #eaf2f7 !important; }
.digital-campus-entry-actions { display: grid; gap: 0.75rem; }
.digital-campus-entry-actions .btn { width: 100%; text-align: center; }

@media (max-width: 760px) {
  .digital-campus-entry-card { grid-template-columns: 1fr; padding: 1.25rem; border-radius: 18px; }
  .digital-campus-entry h2 { font-size: 1.7rem !important; line-height: 1.2 !important; }
  .digital-campus-entry p { font-size: 1rem !important; line-height: 1.6 !important; }
}
.site-logo img, .brand img, .logo img, header img[src*="badge"], header img[src*="logo"] { object-fit: contain; max-width: 64px !important; max-height: 64px !important; }
@media (max-width: 700px) {
  .site-logo img, .brand img, .logo img, header img[src*="badge"], header img[src*="logo"] { max-width: 44px !important; max-height: 44px !important; }
  .site-back-button { font-size: 0.92rem; padding: 0.6rem 0.78rem; }
  .classroom-bridge-actions { display: grid; }
  .classroom-bridge-actions .btn { width: 100%; text-align: center; }
}
html, body { max-width: 100%; overflow-x: hidden; }
*, ::before, ::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, li, a, span, strong, small, button { overflow-wrap: anywhere; word-break: normal; hyphens: auto; max-width: 100%; }
.card, .program-card, .note-card, .featured-article, .leader-card, .official-media-card, .badge-card, .visual-card, .public-learning-callout, .info-grid > *, .values-row > *, .btn { min-width: 0px; max-width: 100%; }
@media (max-width: 760px) {
  body { font-size: 15px !important; line-height: 1.52 !important; }
  .container { width: calc(100% - 24px) !important; }
  .section { padding: 32px 0px !important; }
  .hero h1, .hero-welcome h1 { font-size: clamp(1.75rem, 8vw, 2.15rem) !important; line-height: 1.08 !important; }
  .section h2, .badges h2 { font-size: clamp(1.35rem, 6.3vw, 1.7rem) !important; line-height: 1.16 !important; }
  .featured-article h3, .dompreh-feature h3, .biney-feature h3 { font-size: clamp(1.25rem, 5.8vw, 1.5rem) !important; line-height: 1.2 !important; }
  .section h3, .card h3, .program-card h3, .note-card h3, .official-media-card h3, .badge-card h3, .leader-content h3, .public-learning-callout h3 { font-size: 1.08rem !important; line-height: 1.25 !important; }
  .section-intro, .prose p, .card p, .program-card p, .note-card p, .official-media-card p, .badge-card p, .leader-content p, .featured-article p, .featured-article .article-lead { font-size: 0.9rem !important; line-height: 1.5 !important; }
  .card, .program-card, .note-card, .featured-article, .leader-card, .official-media-card, .badge-card, .visual-card, .public-learning-callout { padding: 16px !important; border-radius: 14px !important; }
  .btn { font-size: 0.84rem !important; line-height: 1.25 !important; padding: 11px 13px !important; min-height: 44px !important; white-space: normal !important; }
  .welcome-principles span { font-size: 0.68rem !important; line-height: 1.2 !important; padding: 7px 8px !important; }
  .info-grid span, .values-row span { font-size: 0.82rem !important; }
  .leader-photo { height: 230px !important; max-height: 230px !important; }
}
@media (max-width: 390px) {
  body { font-size: 14.5px !important; }
  .hero h1, .hero-welcome h1 { font-size: 1.85rem !important; }
  .section h2, .badges h2 { font-size: 1.45rem !important; }
  .section h3, .card h3, .program-card h3 { font-size: 1rem !important; }
}
@media (max-width: 760px) {
  body { font-size: 16px !important; }
  .hero h1, .hero-welcome h1 { font-size: 1.95rem !important; line-height: 1.08 !important; }
  .section h2, .badges h2 { font-size: 1.65rem !important; }
  .card h3, .program-card h3, .featured-article h3 { font-size: 1.15rem !important; }
  .card p, .program-card p, .featured-article p { font-size: 0.98rem !important; }
  .btn { font-size: 0.95rem !important; }
  .site-logo, .brand-logo { max-width: 70px !important; }
}
@media (max-width: 760px) {
  .hero-utility-nav { justify-content: flex-start; gap: 0.45rem; margin-bottom: 0.85rem; }
  .hero-utility-nav a { font-size: 0.74rem; padding: 0.5rem 0.68rem; }
}
@media (max-width: 420px) {
  .hero-utility-nav { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); width: 100%; }
  .hero-utility-nav a { text-align: center; padding: 0.52rem 0.4rem; font-size: 0.7rem; }
}
.site-back-button, .rhli-priority-floating { display: none !important; }
.hero-welcome { min-height: auto !important; }
.welcome-stage { padding-top: 28px !important; padding-bottom: 38px !important; }
.welcome-emblem { width: 92px !important; height: 92px !important; margin-bottom: 0.7rem !important; }
.hero-utility-nav { margin-bottom: 0.8rem !important; gap: 0.45rem !important; }
.hero-utility-nav a { font-size: 0.72rem !important; padding: 0.46rem 0.62rem !important; border-color: rgb(255, 229, 90) !important; color: rgb(255, 251, 232) !important; }
.hero-welcome .eyebrow { color: rgb(255, 227, 79) !important; font-size: 0.78rem !important; }
.hero-welcome h1 { font-size: clamp(2rem, 5vw, 3.35rem) !important; line-height: 1.04 !important; margin: 0.5rem 0px 0.85rem !important; }
.hero-welcome .lead { font-size: 1rem !important; line-height: 1.5 !important; max-width: 720px !important; }
.welcome-principles span { color: rgb(255, 227, 79) !important; border-color: rgb(255, 227, 79) !important; }
@media (max-width: 760px) {
  .welcome-stage { padding-top: 20px !important; padding-bottom: 28px !important; }
  .welcome-emblem { width: 78px !important; height: 78px !important; }
  .hero-utility-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; width: 100% !important; margin: 0px 0px 0.75rem !important; }
  .hero-utility-nav a { font-size: 0.66rem !important; padding: 0.45rem 0.3rem !important; }
  .hero-welcome .eyebrow { font-size: 0.68rem !important; line-height: 1.35 !important; }
  .hero-welcome h1 { font-size: 1.8rem !important; }
  .hero-welcome .lead { font-size: 0.94rem !important; }
}
.affiliate-partnerships { background: linear-gradient(rgb(6, 20, 43), rgb(10, 35, 68)) !important; color: rgb(255, 255, 255) !important; }
.affiliate-partnerships .container { display: grid; gap: 1.2rem; }
.affiliate-banner-wrap { background: rgb(3, 11, 24); border: 1px solid rgba(255, 211, 38, 0.48); border-radius: 20px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.34) 0px 20px 48px; }
.affiliate-banner-wrap img { display: block; width: 100%; height: auto; }
.affiliate-copy-card { display: grid; grid-template-columns: 1.4fr auto; gap: 1.4rem; align-items: center; background: linear-gradient(145deg, rgb(11, 29, 55), rgb(5, 10, 19)); border: 1px solid rgba(255, 211, 38, 0.45); border-radius: 18px; padding: 1.25rem 1.35rem; box-shadow: rgba(0, 0, 0, 0.28) 0px 16px 36px; }
.affiliate-copy-card h2 { color: rgb(255, 255, 255) !important; margin: 0.2rem 0px 0.7rem !important; font-size: clamp(1.65rem, 3vw, 2.35rem) !important; }
.affiliate-copy-card p { color: rgb(232, 237, 243) !important; font-size: 1rem !important; line-height: 1.55 !important; margin: 0.45rem 0px !important; }
.affiliate-copy-card .section-kicker { color: rgb(255, 227, 79) !important; }
.affiliate-note { font-size: 0.87rem !important; color: rgb(200, 208, 220) !important; }
.affiliate-actions { display: flex; flex-direction: column; gap: 0.65rem; min-width: 220px; }
.affiliate-actions .btn { text-align: center; white-space: normal; }
@media (max-width: 820px) {
  .affiliate-copy-card { grid-template-columns: 1fr; }
  .affiliate-actions { display: grid; grid-template-columns: 1fr 1fr; min-width: 0px; }
}
@media (max-width: 560px) {
  .affiliate-partnerships { padding: 1.25rem 0px !important; }
  .affiliate-banner-wrap { border-radius: 14px; }
  .affiliate-copy-card { padding: 1rem; border-radius: 14px; }
  .affiliate-copy-card p { font-size: 0.94rem !important; }
  .affiliate-actions { grid-template-columns: 1fr; }
  .affiliate-actions .btn { width: 100%; }
}
html { text-size-adjust: none !important; }
h1, h2, h3, h4, h5, h6, p, li, a, span, strong, small, button { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }
.section .public-learning-callout h3 { color: rgb(255, 255, 255) !important; }
.section .public-learning-callout p { color: rgb(232, 237, 243) !important; }
.section .public-learning-callout .section-kicker { color: rgb(255, 216, 77) !important; }
.app-showcase .lead { color: rgb(48, 78, 97) !important; font-weight: 600 !important; }
@media (max-width: 760px) {
  body { font-size: 16px !important; line-height: 1.6 !important; }
  .hero h1, .hero-welcome h1 { font-size: 1.9rem !important; line-height: 1.12 !important; }
  .section h2, .badges h2, .affiliate-copy-card h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .section h3, .card h3, .program-card h3, .note-card h3, .official-media-card h3, .badge-card h3, .leader-content h3, .public-learning-callout h3, .featured-article h3 { font-size: 1.15rem !important; line-height: 1.3 !important; }
  .section-intro, .prose p, .card p, .program-card p, .note-card p, .official-media-card p, .badge-card p, .leader-content p, .featured-article p, .featured-article .article-lead { font-size: 1rem !important; line-height: 1.6 !important; }
}

/* Main-site mobile readability: medium type and strong contact contrast. */
.contact,
.contact p,
.contact label,
.contact-details,
.contact-details p { color: #17344d !important; }
.contact .section-kicker { color: #8a5d00 !important; }
.contact a { color: #0b4f79 !important; font-weight: 800; }

@media (max-width: 760px) {
  body { font-size: 15px !important; line-height: 1.52 !important; }
  .hero h1,
  .hero-welcome h1 { font-size: 1.72rem !important; line-height: 1.12 !important; }
  .section h2,
  .badges h2,
  .affiliate-copy-card h2 { font-size: 1.38rem !important; line-height: 1.22 !important; }
  .section h3,
  .card h3,
  .program-card h3,
  .note-card h3,
  .official-media-card h3,
  .badge-card h3,
  .leader-content h3,
  .public-learning-callout h3,
  .featured-article h3 { font-size: 1.05rem !important; line-height: 1.3 !important; }
  .section-intro,
  .prose p,
  .card p,
  .program-card p,
  .note-card p,
  .official-media-card p,
  .badge-card p,
  .leader-content p,
  .featured-article p,
  .contact p { font-size: .94rem !important; line-height: 1.52 !important; }
  .contact h2 { font-size: 1.42rem !important; margin-bottom: .8rem !important; }
  .contact-details p { font-size: .9rem !important; line-height: 1.45 !important; overflow-wrap: anywhere; }
  .btn { min-height: 44px !important; padding: 11px 13px !important; font-size: .9rem !important; }
}