/* ==========================================================================
   OPPAK main.css — every color references var(--oppak-*) set in style.css
   and overridden live by inc/customizer.php. Mobile-first, min-width queries.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body { font-size: 16px; line-height: 1.6; }
h1,h2,h3,h4 { color: var(--oppak-navy); font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 1em; }
.screen-reader-text{ position:absolute; left:-9999px; }

.oppak-container { max-width: var(--oppak-container); margin: 0 auto; padding: 0 20px; }
.oppak-article-column { max-width: var(--oppak-article-col); margin: 0 auto; }
.oppak-section--gray { background: var(--oppak-lightgray); padding: 48px 0; }

/* ---------- Buttons (3.3) ---------- */
.oppak-btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; border: 2px solid transparent; }
.oppak-btn--primary { background: var(--oppak-gold); color: var(--oppak-navy); }
.oppak-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.oppak-btn--secondary { background: transparent; border-color: var(--oppak-navy); color: var(--oppak-navy); }
.oppak-btn--secondary:hover { background: var(--oppak-navy); color: #fff; }
.oppak-btn--tertiary { background: none; border: none; color: var(--oppak-teal); font-weight: 700; padding: 0; } /* underline removed per sitewide no-underline rule; weight carries the link affordance instead */

/* ---------- Pills / badges ---------- */
.oppak-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 600; text-decoration: none; color: var(--oppak-navy); }
.oppak-pill--teal { background: var(--oppak-teal); color: #fff; }
.oppak-pill--blue { background: var(--oppak-blue); color: #fff; }
.oppak-pill--olive { background: var(--oppak-olive); color: #fff; }
.oppak-pill--mint { background: color-mix(in srgb, var(--oppak-teal) 18%, #fff); color: var(--oppak-teal-ink); }
.oppak-pill--gold { background: var(--oppak-gold); color: #fff; }
.oppak-pill--navy { background: var(--oppak-navy); color: #fff; }
.oppak-pill--muted { background: var(--oppak-lightgray); color: var(--oppak-midgray); }
.oppak-pill--active { background: var(--oppak-teal); color: #fff; }
.oppak-badge--gold { background: var(--oppak-gold); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }

/* ---------- Header (3.1) ---------- */
.oppak-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--oppak-lightgray); }
.oppak-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; position: relative; }
.oppak-header__nav { display: none; }
.oppak-menu { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.oppak-menu > li > a { color: var(--oppak-navy); font-weight: 600; font-size: 15px; text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.oppak-menu .oppak-menu-item { position: relative; }
/* Highlight whichever menu item matches the page currently open — WordPress
   adds these classes automatically (current-menu-item for the exact link,
   current-menu-ancestor when a submenu child is the current page). */
.oppak-menu .current-menu-item > a,
.oppak-menu .current_page_item > a,
.oppak-menu .current-menu-ancestor > a,
.oppak-menu .current_page_ancestor > a { color: var(--oppak-teal); border-bottom-color: var(--oppak-teal); }
.oppak-menu--mobile .current-menu-item > a,
.oppak-menu--mobile .current_page_item > a,
.oppak-menu--mobile .current-menu-ancestor > a,
.oppak-menu--mobile .current_page_ancestor > a { border-bottom: none; border-left: 3px solid var(--oppak-teal); padding-left: 9px; }
.oppak-submenu { list-style: none; margin: 0; padding: 12px; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.1); border-radius: 8px; display: none; flex-direction: column; min-width: 220px; }
.oppak-submenu .oppak-menu-item { width: 100%; }
.oppak-submenu > .oppak-menu-item > a { display: block; padding: 8px 6px; white-space: nowrap; }
/* All dropdown levels (including the former "mega" top-level dropdown) now share the
   same single-column vertical style — no grid / multi-column layout. */
.oppak-megamenu { min-width: 220px; }
.oppak-menu-item.has-submenu:hover > .oppak-submenu,
.oppak-menu-item.has-submenu:focus-within > .oppak-submenu { display: flex; }
.oppak-header__actions { display: flex; align-items: center; gap: 12px; }
.oppak-search-toggle, .oppak-nav-toggle { background: none; border: none; cursor: pointer; }
.oppak-search-bar { padding: 12px 0; }
.oppak-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--oppak-navy); margin: 4px 0; }
.oppak-mobile-overlay { position: fixed; inset: 0; background: #fff; z-index: 200; padding: 24px; overflow-y: auto; }
.oppak-menu--mobile { flex-direction: column; gap: 16px; }
.oppak-floating-whatsapp { position: fixed; bottom: 20px; right: 20px; }

@media (min-width: 1024px) {
	.oppak-header__nav { display: block; }
	.oppak-nav-toggle { display: none; }
}

/* ---------- Top utility bar (date/time + social/contact) ---------- */
.oppak-topbar { background: var(--oppak-charcoal); color: #fff; font-size: 13px; }
.oppak-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px; flex-wrap: wrap; }
.oppak-topbar__datetime { display: flex; align-items: center; gap: 6px; color: var(--oppak-mint); }
.oppak-topbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.oppak-topbar__contact { display: flex; align-items: center; gap: 14px; }
.oppak-topbar__contact a { color: #fff; text-decoration: none; }
.oppak-topbar__contact a:hover { color: var(--oppak-mint); }
.oppak-topbar__socials { display: flex; align-items: center; gap: 10px; }
.oppak-topbar__socials a { display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-size: 14px; line-height: 1; }
.oppak-topbar__socials a svg { width: 15px; height: 15px; display: block; }
.oppak-topbar__socials a:hover { color: var(--oppak-mint); }

/* ---------- Breadcrumb spacing below the menu bar ---------- */
.oppak-breadcrumb { display: block; margin-top: 20px; margin-bottom: 12px; font-size: 13px; color: var(--oppak-midgray); }
.oppak-breadcrumb a { color: var(--oppak-teal); text-decoration: none; }
.oppak-breadcrumb__sep { margin: 0 6px; }

/* ---------- Footer (3.2) ---------- */
.oppak-footer { background: var(--oppak-navy); color: #fff; padding: 48px 0 0; margin-top: 64px; }
.oppak-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; text-align: center; }
.oppak-footer__col { display: flex; flex-direction: column; align-items: center; }
.oppak-footer-heading { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.oppak-footer-menu, .oppak-footer-contact { list-style: none; margin: 0; padding: 0; text-align: center; }
.oppak-footer-menu li, .oppak-footer-contact li { margin-bottom: 8px; }
.oppak-footer-menu a, .oppak-footer-contact a { color: var(--oppak-mint); text-decoration: none; }
.oppak-footer__socials { display: flex; gap: 12px; margin-top: 12px; }
.oppak-footer__socials a { color: #fff; text-decoration: none; font-size: 18px; }
.oppak-footer__bottom { border-top: 1px solid rgba(255,255,255,.15); padding: 16px 0; margin-top: 16px; }
.oppak-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--oppak-mint); }
.oppak-footer-legal a { color: var(--oppak-mint); margin-left: 16px; text-decoration: none; }

@media (min-width: 768px) {
	.oppak-footer__grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ---------- Cards (3.4) ---------- */
.oppak-card-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .oppak-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .oppak-card-grid--3up { grid-template-columns: repeat(3, 1fr); } }

.oppak-card { position: relative; background: #fff; border: 1px solid var(--oppak-lightgray); border-radius: var(--oppak-radius); overflow: hidden; transition: background .2s ease; }
.oppak-card:hover { background: color-mix(in srgb, var(--oppak-mint) 10%, #fff); }
.oppak-card__media { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; }
.oppak-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.oppak-card:hover .oppak-card__media img { transform: scale(1.03); }
/* Category badge floats over the top-left corner of the card thumbnail, matching the mockups,
   instead of sitting as a separate line above the image. */
.oppak-card__pill-wrap { position: absolute; top: 8px; left: 8px; z-index: 2; margin-bottom: 0; }
.oppak-card__pill-wrap:empty { display: none; }
.oppak-card__pill-wrap .oppak-pill { padding: 3px 8px; font-size: 9px; border-radius: 4px; color: #fff; }
.oppak-card--row .oppak-card__pill-wrap { display: none; } /* row/list cards show category via meta text instead */
.oppak-card__body { padding: 16px; }
.oppak-card__title a { color: var(--oppak-navy); text-decoration: none; }
.oppak-card--row .oppak-card__title { font-size: 16px; } /* +2px over the previous browser-default heading size */
.oppak-card__meta { color: var(--oppak-midgray); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; margin: 6px 0; }
.oppak-card__excerpt { color: var(--oppak-charcoal); font-size: 14px; }
.oppak-placeholder-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--oppak-mint); }
.oppak-placeholder-thumb img { width: 40%; }

.oppak-card--row { display: flex; gap: 12px; border-radius: 8px; margin-bottom: 12px; align-items: center; }
.oppak-card__thumb-sq { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; }
.oppak-card__thumb-sq img { width: 100%; height: 100%; object-fit: cover; }

.oppak-card--portrait .oppak-card__media--portrait { aspect-ratio: 4/5; }
.oppak-pullquote { border-left: 3px solid var(--oppak-gold); padding-left: 12px; font-style: italic; color: var(--oppak-navy); }

/* ---------- Section headers (3.5) ---------- */
.oppak-section-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.oppak-eyebrow { color: var(--oppak-teal); text-transform: uppercase; font-size: 13px; letter-spacing: .03em; font-weight: 600; margin: 0 0 12px; }
h3.oppak-eyebrow { font-size: 11px; }
.oppak-section-title { margin: 4px 0 0; font-size: 22px; }
@media (min-width: 768px) { .oppak-section-title { font-size: 26px; } }
@media (min-width: 1440px) { .oppak-section-title { font-size: 30px; } }
.oppak-view-all { color: var(--oppak-gold); font-weight: 600; text-decoration: none; }

/* ---------- Homepage modules (4.1) ---------- */
.oppak-hero { padding: 32px 0; }
.oppak-hero__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* Left column: audience wayfinding buttons + a single vertical "Latest Updates" list. */
.oppak-hero__side { display: flex; flex-direction: column; gap: 20px; order: 2; }
.oppak-hero__side-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--oppak-navy); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--oppak-gold); }

.oppak-hero__audience { background: #fff; border: 1px solid var(--oppak-lightgray); border-radius: var(--oppak-radius); padding: 18px; }
.oppak-hero__audience-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.oppak-hero__news { background: #fff; border: 1px solid var(--oppak-lightgray); border-radius: var(--oppak-radius); padding: 18px; }
.oppak-hero__news-list { display: flex; flex-direction: column; }
.oppak-hero__news-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--oppak-lightgray); transition: transform .15s ease; }
.oppak-hero__news-item:last-child { border-bottom: none; padding-bottom: 0; }
.oppak-hero__news-item:first-child { padding-top: 0; }
.oppak-hero__news-item:hover { transform: translateX(3px); }
.oppak-hero__news-item:hover .oppak-hero__news-title { color: var(--oppak-teal); }
.oppak-hero__news-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.oppak-hero__news-thumb img, .oppak-hero__news-thumb .oppak-placeholder-thumb { width: 100%; height: 100%; object-fit: cover; }
.oppak-hero__news-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oppak-hero__news-title { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--oppak-charcoal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s ease; }
.oppak-hero__news-date { font-size: 12px; color: var(--oppak-midgray); }

/* Right column: the big featured story. */
.oppak-hero__main { order: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 300px; background-size: cover; background-position: center; background-color: var(--oppak-navy); border-radius: var(--oppak-radius); padding: 28px; color: #fff; text-decoration: none; box-shadow: 0 12px 28px rgba(27,58,92,.16); }
.oppak-hero__title { font-size: 26px; font-weight: 700; line-height: 1.25; }
.oppak-hero__date { display: block; margin-top: 8px; font-size: 13px; opacity: .85; }

@media (min-width: 1024px) {
	.oppak-hero__grid { grid-template-columns: 320px 1fr; align-items: stretch; }
	.oppak-hero__side { order: 1; }
	.oppak-hero__main { order: 2; min-height: 100%; padding: 36px; }
	.oppak-hero__title { font-size: 32px; }
}
@media (min-width: 1280px) {
	.oppak-hero__grid { grid-template-columns: 360px 1fr; }
}

.oppak-audience__tile { display: inline-flex; align-items: center; gap: 6px; text-align: left; padding: 7px 16px; border-radius: 999px; text-decoration: none; color: var(--oppak-navy); font-weight: 600; font-size: 13px; background: #fff; border: 1px solid var(--oppak-lightgray); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.oppak-audience__tile img { width: 16px; height: 16px; object-fit: cover; border-radius: 50%; }
.oppak-audience__tile--teal:hover { background: var(--oppak-teal); border-color: var(--oppak-teal); color: #fff; }
.oppak-audience__tile--blue:hover { background: var(--oppak-blue); border-color: var(--oppak-blue); color: #fff; }
.oppak-audience__tile--olive:hover { background: var(--oppak-olive); border-color: var(--oppak-olive); }
.oppak-audience__tile--gold:hover { background: var(--oppak-gold); border-color: var(--oppak-gold); }

.oppak-latest-news { padding: 48px 0; }
.oppak-admissions-jobs, .oppak-technology, .oppak-3d-printing { padding: 48px 0; }
.oppak-admissions-jobs { padding: 56px 0; }
.oppak-success-stories { padding: 48px 0; }
.oppak-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.oppak-carousel .oppak-card { flex: 0 0 260px; scroll-snap-align: start; }

.oppak-video-strip { padding: 48px 0; }
.oppak-video__embed { position: relative; padding-top: 56.25%; }
.oppak-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--oppak-radius); }

.oppak-newsletter-band { background: var(--oppak-lightgray); padding: 48px 0; }
.oppak-newsletter-band__inner { text-align: center; }
.oppak-newsletter-band__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 16px; }
.oppak-newsletter-form { display: flex; gap: 8px; }
.oppak-newsletter-form input { padding: 12px 16px; border-radius: 999px; border: 1px solid var(--oppak-midgray); min-width: 240px; }

/* ---------- Archives (4.2 / 4.3) ---------- */
.oppak-archive-header { padding: 32px 0 16px; }
.oppak-archive-intro { color: var(--oppak-charcoal); }
.oppak-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.oppak-sort-bar { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--oppak-lightgray); font-size: 13px; }
.oppak-sort-bar a { text-decoration: none; color: var(--oppak-midgray); font-weight: 600; }
.oppak-sort-bar a.is-active { color: var(--oppak-navy); }
.oppak-archive-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
@media (min-width: 1024px) { .oppak-archive-layout { grid-template-columns: 2.5fr 1fr; } }
.oppak-sidebar { display: none; }
@media (min-width: 1024px) { .oppak-sidebar { display: block; } }
.oppak-widget { background: #fff; border: 1px solid var(--oppak-lightgray); border-radius: var(--oppak-radius); padding: 16px; margin-bottom: 16px; }
.oppak-widget-title { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--oppak-teal); margin-bottom: 10px; }
.oppak-widget ul { list-style: none; margin: 0; padding: 0; }
.oppak-widget li { font-size: 12px; color: var(--oppak-navy); padding: 7px 0; border-bottom: 1px solid var(--oppak-lightgray); }
.oppak-widget li:last-child { border-bottom: none; }
.oppak-widget li a { color: inherit; }
.oppak-widget--cta { background: var(--oppak-lightgray); text-align: center; border: none; }
.oppak-widget--cta p { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--oppak-navy); }

/* Two-column compact list section — used to pair "Admissions & Scholarships" with
   "Jobs & Vacancies" side-by-side on the homepage. Elevated as a distinct panel
   (soft tinted background, card columns, gold accent) so it reads as a featured
   module rather than a plain list, while staying within the site's existing
   card/widget visual language. */
.oppak-admissions-jobs { background: linear-gradient(180deg, color-mix(in srgb, var(--oppak-teal) 6%, #fff), #fff); }
.oppak-two-col { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .oppak-two-col { grid-template-columns: 1fr 1fr; gap: 28px; } }
.oppak-two-col > div { background: #fff; border: 1px solid var(--oppak-lightgray); border-top: 3px solid var(--oppak-gold); border-radius: var(--oppak-radius); padding: 22px 24px; box-shadow: 0 8px 24px rgba(27,58,92,.06); }
.oppak-two-col .oppak-eyebrow { margin-bottom: 16px; }
.oppak-two-col .oppak-list .oppak-card--row { border: none; border-bottom: 1px solid var(--oppak-lightgray); border-radius: 0; padding: 12px 0; margin-bottom: 0; }
.oppak-two-col .oppak-list .oppak-card--row:last-child { border-bottom: none; }
.oppak-two-col .oppak-view-all { display: inline-block; margin-top: 16px; }

/* ---------- Content layout: sidebar on single posts & pages (Section 4.4 / 4.5) ---------- */
.oppak-content-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 24px 0 48px; }
@media (min-width: 1024px) { .oppak-content-layout { grid-template-columns: 2.5fr 1fr; align-items: start; } }
.oppak-content-main { min-width: 0; }

/* ---------- Front page widgets row (Section 4.1) ---------- */
.oppak-frontpage-widgets__grid { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
@media (min-width: 768px) { .oppak-frontpage-widgets__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Extra widget slots in header / top bar / mobile menu ---------- */
.oppak-topbar__widgets { display: flex; align-items: center; gap: 12px; }
.oppak-header__widgets { display: none; }
@media (min-width: 1024px) { .oppak-header__widgets { display: flex; align-items: center; margin-left: 12px; } }
.oppak-mobile-overlay__widgets { margin-top: 24px; border-top: 1px solid var(--oppak-lightgray); padding-top: 16px; }
.oppak-load-more { text-align: center; margin: 32px 0; }
.oppak-filter-bar { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.oppak-filter-bar select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--oppak-midgray); }
.oppak-list { display: flex; flex-direction: column; }

/* ---------- Single post (4.4) ---------- */
.oppak-single__intro { padding: 12px 0; }
.oppak-single__intro h1 { margin-top: 12px; }
.oppak-single__meta { display: flex; align-items: center; gap: 8px; color: var(--oppak-midgray); font-size: 13px; flex-wrap: wrap; margin-top: 8px; }
.oppak-single__meta img { border-radius: 50%; }
.oppak-single__byline { display: flex; align-items: center; gap: 8px; margin: 18px 0; padding-bottom: 14px; border-bottom: 1px solid var(--oppak-lightgray); }
.oppak-single__byline img { width: 28px; height: 28px; border-radius: 50%; }
.oppak-single__byline-avatar { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--oppak-teal) 18%, #fff); color: var(--oppak-teal-ink); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.oppak-single__byline-name { font-size: 12px; font-weight: 600; color: var(--oppak-navy); }
.oppak-single__byline-role { color: var(--oppak-midgray); font-weight: 400; }
.oppak-single__featured-image img { width: 100%; border-radius: var(--oppak-radius); margin: 16px 0; }
.oppak-share-row { display: flex; gap: 16px; margin: 24px 0; }
.oppak-share-row a { color: var(--oppak-teal); text-decoration: none; font-weight: 600; }
.oppak-trust-block { background: var(--oppak-lightgray); border-radius: var(--oppak-radius); padding: 20px; margin: 32px 0; }
.oppak-related { margin: 32px 0; }

/* ---------- Contact form (4.5) ---------- */
.oppak-contact-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.oppak-contact-form input, .oppak-contact-form textarea { padding: 12px; border-radius: 8px; border: 1px solid var(--oppak-midgray); font-family: inherit; }
.oppak-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.oppak-notice--success { background: var(--oppak-mint); color: var(--oppak-navy); }
.oppak-notice--error { background: #f8d7da; color: #842029; }

/* ---------- Page banner / static pages (4.5) ---------- */
.oppak-page-banner { position: relative; }
.oppak-page-banner img { width: 100%; max-height: 320px; object-fit: cover; }
.oppak-page-banner__title { position: absolute; bottom: 20px; left: 20px; color: #fff; }

/* ---------- 404 ---------- */
.oppak-404 { text-align: center; padding: 80px 0; }

/* ---------- Affiliations (homepage section) ---------- */
.oppak-affiliations__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
.oppak-affiliation { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 120px; color: var(--oppak-charcoal); font-weight: 600; font-size: 13px; filter: grayscale(100%); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.oppak-affiliation:hover { filter: grayscale(0%); opacity: 1; }
.oppak-affiliation__logo { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; }

/* ---------- Professional of the Week (homepage section) ---------- */
.oppak-pow__card { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; background: var(--oppak-lightgray); border-radius: var(--oppak-radius); padding: 28px; }
.oppak-pow__photo { flex: 0 0 160px; width: 160px; border-radius: var(--oppak-radius); overflow: hidden; }
.oppak-pow__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oppak-pow__body { flex: 1 1 260px; }
.oppak-pow__name { margin-bottom: 2px; }
.oppak-pow__title { color: var(--oppak-teal); font-weight: 600; margin-bottom: 10px; }
.oppak-pow__bio { color: var(--oppak-charcoal); }

/* ---------- Above-footer YouTube band ---------- */
.oppak-above-footer { background: var(--oppak-navy); padding: 32px 0; }

/* YouTube Channel Videos — a movable homepage section (Homepage Sections & Order).
   The main video plays inline via an embedded player; the thumbnails beside it swap
   that player to the clicked video (handled in main.js) rather than navigating away.
   Only the explicit "Visit our Channel" button goes to YouTube. */
.oppak-youtube-band { background: var(--oppak-navy); padding: 48px 0; }
.oppak-youtube-band__header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.oppak-youtube-band__header .oppak-eyebrow { color: var(--oppak-mint); }
.oppak-youtube-band__header h3 { color: #fff; margin: 4px 0 0; }

.oppak-youtube-band__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) { .oppak-youtube-band__grid { grid-template-columns: 2fr 1fr; } }

.oppak-youtube-band__player { position: relative; aspect-ratio: 16/9; border-radius: var(--oppak-radius); overflow: hidden; background: #000; }
.oppak-youtube-band__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.oppak-youtube-band__main-title { margin: 12px 0 0; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4; }

.oppak-youtube-band__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(27,58,92,.75); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background .15s ease; }
.oppak-youtube-band__item:hover .oppak-youtube-band__play { background: var(--oppak-gold); color: var(--oppak-gold-ink); }
.oppak-youtube-band__play--sm { width: 32px; height: 32px; font-size: 12px; }

.oppak-youtube-band__list { display: flex; flex-direction: column; gap: 10px; }
.oppak-youtube-band__item { display: flex; gap: 10px; align-items: center; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 6px; cursor: pointer; color: #fff; font-family: inherit; }
.oppak-youtube-band__item:hover, .oppak-youtube-band__item.is-active { background: rgba(255,255,255,.08); }
.oppak-youtube-band__item-thumb { position: relative; flex: 0 0 104px; width: 104px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.oppak-youtube-band__item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.oppak-youtube-band__item-title { font-size: 12px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oppak-youtube-band__item.is-active .oppak-youtube-band__item-title { color: var(--oppak-mint); }

/* ---------- Mobile-first responsive typography scale ---------- */
@media (min-width: 768px) {
	h1 { font-size: 34px; }
	h2 { font-size: 28px; }
	h3 { font-size: 22px; }
	h4 { font-size: 18px; }
}
@media (min-width: 1440px) {
	h1 { font-size: 40px; }
	h2 { font-size: 32px; }
	h3 { font-size: 26px; }
}
/* ---------- Audience pages: topic-box grid (Students/Professionals/Parents/Employers) ---------- */
.oppak-topic-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 32px 0 48px; }
@media (min-width: 768px) { .oppak-topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .oppak-topic-grid { grid-template-columns: repeat(4, 1fr); } }

.oppak-topic-box { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--oppak-lightgray); border-top: 4px solid var(--oppak-teal); border-radius: var(--oppak-radius); padding: 18px; }
.oppak-topic-box--teal   { border-top-color: var(--oppak-teal); }
.oppak-topic-box--blue   { border-top-color: var(--oppak-blue); }
.oppak-topic-box--olive  { border-top-color: var(--oppak-olive); }
.oppak-topic-box--gold   { border-top-color: var(--oppak-gold); }

.oppak-topic-box__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.oppak-topic-box__title { font-size: 15px; margin: 0; line-height: 1.3; }
.oppak-topic-box__header .oppak-pill { flex: 0 0 auto; padding: 2px 9px; font-size: 10px; }

.oppak-topic-box__list { list-style: none; margin: 0 0 12px; padding: 0; flex: 1; }
.oppak-topic-box__list li { border-bottom: 1px solid var(--oppak-lightgray); padding: 8px 0; }
.oppak-topic-box__list li:last-child { border-bottom: none; }
.oppak-topic-box__list a { color: var(--oppak-charcoal); text-decoration: none; font-size: 14px; font-weight: 600; }
.oppak-topic-box__list a:hover { color: var(--oppak-teal); }

.oppak-topic-box__empty { color: var(--oppak-midgray); font-size: 13px; font-style: italic; flex: 1; margin: 0 0 12px; }

.oppak-topic-box__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--oppak-lightgray); font-size: 13px; }
.oppak-topic-box__add { color: var(--oppak-midgray); text-decoration: none; font-weight: 600; }
.oppak-topic-box__add:hover { color: var(--oppak-navy); }