/*
Theme Name: Offshore Academy
Theme URI: https://terroirbookings.com
Author: Terroirsbookings
Description: Marketing site and learner shell for the OffshorePath offshore career training platform. Navy and teal from the business plan, hi-vis orange from offshore PPE. Phone-first, low-bandwidth, no JS framework. Works with the OffshorePath Core plugin.
Version: 0.2.1
Requires at least: 6.4
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: offshore-academy
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap');

/* =====================================================================
   TOKENS (build-plan 04 §2)
   ================================================================== */

:root {
	--navy-900: #0E1F30;
	--navy-700: #12263A;
	--navy-500: #2B4A66;
	--teal-600: #157F7D;
	--teal-500: #1E9C9A;
	--teal-050: #E8F5F4;
	--hivis-600: #C2470A;
	--hivis-500: #F26B1D;
	--hivis-050: #FEF0E7;

	--ok: #1F8A4C;
	--warn: #8A5A12;
	--risk: #B3261E;

	--ink: #142030;
	--ink-2: #3A4A5C;
	--muted: #5E6C7B;
	--ground: #F5F7F9;
	--card: #FFFFFF;
	--line: #DCE3E9;

	--font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
	--font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--radius: 6px;
	--shadow: 0 1px 2px rgb(14 31 48 / .08), 0 4px 16px rgb(14 31 48 / .06);
	--wrap: 72rem;
	--gutter: 16px;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ground: #0B1825;
		--card: #12263A;
		--ink: #E8EEF3;
		--ink-2: #C3CFDA;
		--muted: #93A4B4;
		--line: #22384D;
		--teal-600: #4CC2BF;
		--teal-050: #10302F;
		--hivis-050: #3A2012;
		--warn: #E0B25C;
		--shadow: none;
	}
}

/* =====================================================================
   BASE
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 400 1.125rem/1.6 var(--font-sans);
}
img { max-width: 100%; height: auto; }
/* Inline SVG with only a viewBox grows to its container — pin icons (lesson from the old theme). */
svg:not([width]):not([height]) { max-width: 100%; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.15;
	letter-spacing: .01em;
	margin: 1.6em 0 .5em;
	color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-top: .4em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.35rem; }
p, ul, ol, dl { margin: 0 0 1em; }
a { color: var(--teal-600); text-underline-offset: .15em; }
a:hover { color: var(--hivis-600); }
:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
code { font-size: .9em; background: var(--teal-050); padding: .1em .3em; border-radius: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--card); padding: .6em 1em; z-index: 100; }
.skip-link:focus { left: var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* =====================================================================
   HEADER / FOOTER
   ================================================================== */

.site-header { background: var(--navy-900); color: #fff; border-bottom: 3px solid var(--teal-500); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font: 700 1.5rem/1 var(--font-display); letter-spacing: .02em; }
.brand:hover { color: #fff; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: .25rem 1.1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
.site-nav a { color: #DDE7EF; text-decoration: none; font-weight: 600; font-size: 1rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--hivis-500); text-decoration-thickness: 2px; }
.site-nav .nav-cta a { background: var(--hivis-600); color: #fff; padding: .45em .9em; border-radius: var(--radius); text-decoration: none; }
.site-nav .nav-cta a:hover { background: var(--hivis-500); color: #fff; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
	.nav-toggle { display: inline-block; margin-left: auto; background: transparent; color: #fff; border: 1px solid #ffffff55; border-radius: var(--radius); padding: .4em .8em; font: 600 1rem var(--font-sans); }
	.site-nav { flex-basis: 100%; display: none; padding-bottom: 1rem; }
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; align-items: flex-start; gap: .7rem; }
}

.site-main { padding: 0 0 4rem; }
.site-footer { background: var(--navy-900); color: #B9C7D4; padding: 3rem 0 2rem; font-size: 1rem; }
.site-footer a { color: #E2EBF2; }
.site-footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer h2 { color: #fff; font-size: 1.15rem; margin: 0 0 .6em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .3em 0; }
.site-footer__legal { border-top: 1px solid #ffffff22; margin-top: 2rem; padding-top: 1.2rem; font-size: .9rem; }
.site-footer__legal p { margin: .3em 0; }

/* =====================================================================
   COMPONENTS
   ================================================================== */

.oct-button, .button-primary-oct {
	display: inline-block; background: var(--hivis-600); color: #fff; border: 2px solid var(--hivis-600);
	padding: .65em 1.15em; border-radius: var(--radius); font: 700 1.05rem/1.2 var(--font-sans);
	text-decoration: none; cursor: pointer; text-align: center;
}
.oct-button:hover { background: var(--hivis-500); border-color: var(--hivis-500); color: #fff; }
.oct-button--ghost { background: transparent; color: var(--teal-600); border-color: currentColor; }
.oct-button--ghost:hover { background: var(--teal-050); color: var(--teal-600); border-color: var(--teal-600); }
.oct-button--small { padding: .4em .8em; font-size: .95rem; }
.oct-button:disabled { opacity: .6; cursor: wait; }

.breadcrumbs { font-size: .95rem; color: var(--muted); margin: 1.2rem 0 0; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3em; }
.breadcrumbs li + li::before { content: '›'; margin-right: .3em; color: var(--line); }

.card, .oct-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.oct-cards, .cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1.5rem 0; }
.oct-card__title { margin-top: 0; font-size: 1.4rem; }
.oct-card__title a { color: inherit; text-decoration: none; }
.oct-card__meta { color: var(--muted); font-size: 1rem; }

.oct-progress { height: 10px; background: var(--teal-050); border-radius: 999px; overflow: hidden; margin: .8rem 0 .4rem; }
.oct-progress span { display: block; height: 100%; background: var(--teal-500); }

.oct-notice { background: var(--hivis-050); border-left: 4px solid var(--hivis-500); padding: .8em 1em; border-radius: 0 var(--radius) var(--radius) 0; }
.oct-small { font-size: .92rem; color: var(--muted); }
.oct-tag { display: inline-block; font-size: .8rem; font-weight: 700; padding: .1em .55em; border-radius: 999px; vertical-align: middle; }
.oct-tag--verified { background: var(--teal-050); color: var(--teal-600); }
.oct-tag--sponsored { background: var(--hivis-050); color: var(--hivis-600); border: 1px solid currentColor; }

/* Callouts — same five types and colours as the PDFs */
.oct-callout { border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.5em 0; border-left: 5px solid; background: var(--card); box-shadow: var(--shadow); }
.oct-callout p:last-child { margin-bottom: 0; }
.oct-callout__label { font: 700 .85rem/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6em !important; }
.oct-callout--offshore { border-color: var(--navy-500); }
.oct-callout--offshore .oct-callout__label { color: var(--navy-500); }
.oct-callout--dont-spend { border-color: var(--ok); }
.oct-callout--dont-spend .oct-callout__label { color: var(--ok); }
.oct-callout--scam { border-color: var(--risk); background: color-mix(in srgb, var(--risk) 6%, var(--card)); }
.oct-callout--scam .oct-callout__label { color: var(--risk); }
.oct-callout--verify { border-color: #D69E2E; }
.oct-callout--verify .oct-callout__label { color: var(--warn); }
.oct-callout--trade { border-color: var(--teal-500); }
.oct-callout--trade .oct-callout__label { color: var(--teal-600); }
@media (prefers-color-scheme: dark) { .oct-callout--offshore { border-color: #7FA6C8; } .oct-callout--offshore .oct-callout__label { color: #9CC0DE; } }

.oct-fact a { font-size: .7em; text-decoration: none; color: var(--teal-600); padding: 0 .15em; }
.oct-fact a::before { content: '✓'; }

.oct-table { overflow-x: auto; margin: 1.2em 0 1.6em; }
.oct-table table, .entry table { width: 100%; border-collapse: collapse; font-size: 1rem; background: var(--card); }
.oct-table th, .oct-table td { text-align: left; vertical-align: top; padding: .6em .75em; border-bottom: 1px solid var(--line); }
.oct-table th { background: var(--navy-700); color: #fff; font-weight: 600; }

/* Forms */
.oct-form { max-width: 34rem; }
.oct-form label { display: block; font-weight: 600; margin-bottom: .25em; }
.oct-form input[type="text"], .oct-form input[type="email"], .oct-form input[type="password"], .oct-form input:not([type]), .oct-form select {
	width: 100%; padding: .65em .75em; font: inherit; color: var(--ink); background: var(--card);
	border: 1.5px solid var(--line); border-radius: var(--radius);
}
.oct-form input:focus, .oct-form select:focus { border-color: var(--teal-500); outline: none; box-shadow: 0 0 0 3px var(--teal-050); }
.oct-form__row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.oct-check label { font-weight: 400; display: flex; gap: .5em; align-items: flex-start; }
.oct-check input { margin-top: .35em; }
.oct-hp { position: absolute; left: -9999px; }
.oct-form--inline { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.oct-form--inline input { max-width: 14rem; }

/* =====================================================================
   PAGES
   ================================================================== */

.hero { background: var(--navy-900); color: #E6EEF5; padding: 3.5rem 0 4rem; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--teal-500) 0 70%, var(--hivis-500) 70% 100%); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero__lede { font-size: 1.25rem; max-width: 38rem; color: #CFDCE7; }
.hero__ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 1rem; }
.hero .oct-button--ghost { color: #fff; border-color: #ffffff88; }
.hero .oct-button--ghost:hover { background: #ffffff14; color: #fff; }
.hero__trust { font-size: .95rem; color: #9FB3C5; }

.section { padding: 3rem 0 1rem; }
.section--alt { background: var(--card); border-block: 1px solid var(--line); }
.steps { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: s; }
.steps li { counter-increment: s; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--teal-500); color: #fff; font: 700 1.1rem var(--font-display); margin-bottom: .6rem; }
.steps h3 { margin: .2em 0 .3em; }

.disclaimer { background: var(--card); border: 1px solid var(--line); border-left: 5px solid #D69E2E; border-radius: var(--radius); padding: 1.1rem 1.3rem; font-size: 1rem; }

.entry { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 4vw, 2.5rem); box-shadow: var(--shadow); }
.entry > :first-child { margin-top: 0; }

/* Course page */
.course-hero { background: var(--navy-700); color: #DCE7F0; padding: 2.5rem 0; }
.course-hero h1 { color: #fff; }
.course-hero__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; color: #B7C8D6; }
.module-list { list-style: none; padding: 0; margin: 0; counter-reset: m; }
.module-list li { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.module-list .num { font: 700 1.3rem var(--font-display); color: var(--teal-600); min-width: 2ch; }
.module-list .meta { margin-left: auto; color: var(--muted); font-size: .95rem; white-space: nowrap; }
.module-list .is-done .num::after { content: ' ✓'; color: var(--ok); }
.module-list a { font-weight: 600; }

/* Lesson page */
.lesson-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 1000px) { .lesson-layout { grid-template-columns: 17rem 1fr; } }
.lesson-nav { font-size: 1rem; }
.lesson-nav details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.lesson-nav summary { font-weight: 700; cursor: pointer; }
.lesson-nav ol { padding-left: 1.2rem; margin: .8rem 0 0; }
.lesson-nav li { margin: .35em 0; }
.lesson-nav .is-current a { font-weight: 700; color: var(--ink); }
@media (min-width: 1000px) { .lesson-nav { position: sticky; top: 1rem; align-self: start; } }
.lesson-body { min-width: 0; }
.lesson-body h1 { margin-top: 0; }
.lesson-meta { color: var(--muted); font-size: 1rem; margin-top: -.3rem; }
.lesson-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.oct-paywall { margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius); background: var(--teal-050); border: 1px solid var(--teal-500); text-align: center; }
.oct-paywall h2 { margin-top: 0; }

/* Quiz */
.oct-quiz { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 3px solid var(--teal-500); }
.oct-q { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1rem; background: var(--card); }
.oct-q legend { font-weight: 700; padding: 0 .3em; }
.oct-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .6rem; border-radius: var(--radius); cursor: pointer; }
.oct-opt:hover { background: var(--teal-050); }
.oct-opt input { margin-top: .35em; flex: none; width: 1.1rem; height: 1.1rem; }
.oct-q.is-correct { border-color: var(--ok); }
.oct-q.is-wrong { border-color: var(--risk); }
.oct-opt.is-answer { background: color-mix(in srgb, var(--ok) 12%, transparent); font-weight: 600; }
.oct-q__explain { margin: .6rem 0 0; font-size: 1rem; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: .6rem; }
.oct-quiz__status { font-weight: 700; }

/* Finder */
.oct-finder__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.oct-finder__map { height: 380px; border-radius: var(--radius); border: 1px solid var(--line); margin: 1rem 0; }
.oct-results { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .9rem; }
.oct-result { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.oct-result__name { margin: 0 0 .3em; font-size: 1.3rem; }
.oct-result__meta { color: var(--muted); font-size: 1rem; }
.oct-result__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 0; }
.oct-sponsored-slot { border: 1px dashed var(--hivis-500); border-radius: var(--radius); padding: .5rem .8rem; }
.oct-finder .oct-form { max-width: none; }

/* Dashboard + verify */
.oct-dashboard__hello { font: 700 1.6rem var(--font-display); }
.oct-verify { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--ok); border-radius: var(--radius); padding: 1rem 1.3rem; margin-top: 1rem; }
.oct-verify dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.oct-verify dt { font-weight: 600; }
.oct-verify dd { margin: 0; }

.pricing { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pricing .card h3 { margin-top: 0; }
.price { font: 700 2rem var(--font-display); color: var(--ink); }
.price small { font: 400 1rem var(--font-sans); color: var(--muted); }

.plans-graphic { margin: 0 auto 2rem; max-width: 520px; }
.plans-graphic img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Tiers */
.tier { display: flex; flex-direction: column; }
.tier .oct-button { margin-top: auto; }
.tier--featured { border: 2px solid var(--teal-500); position: relative; }
.tier--featured::before { content: 'Most popular'; position: absolute; top: -.8rem; left: 1.2rem; background: var(--teal-500); color: #fff; font: 700 .8rem var(--font-sans); padding: .15em .7em; border-radius: 999px; }
.tier__features { list-style: none; padding: 0; margin: .8rem 0 1.2rem; font-size: 1rem; }
.tier__features li { padding: .3em 0 .3em 1.6em; position: relative; border-bottom: 1px dashed var(--line); }
.tier__features li::before { content: '✓'; position: absolute; left: 0; color: var(--teal-600); font-weight: 700; }

/* Paywall unlock options */
.oct-paywall__lock { font-size: 2rem; margin: 0; }
.oct-unlock { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 1.2rem 0; text-align: center; }
.oct-unlock__option { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.oct-unlock__option .oct-button { margin-top: auto; }
.oct-unlock__name { font: 700 1.25rem var(--font-display); margin: 0; }
.oct-unlock .price { font-size: 1.6rem; margin: 0; }
.oct-checkout { max-width: 40rem; }
.module-list a.is-locked { color: var(--ink-2); }

/* Video */
.oct-video { margin: 0 0 1.8rem; aspect-ratio: 16 / 9; background: var(--navy-900); border-radius: var(--radius); overflow: hidden; position: relative; }
.oct-video iframe, .oct-video video { width: 100%; height: 100%; border: 0; display: block; }
.oct-video__play { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 1rem; text-align: center; color: #fff;
	background: radial-gradient(circle at 30% 20%, #1E9C9A33, transparent 60%), linear-gradient(160deg, var(--navy-700), var(--navy-900)); }
.oct-video__play:focus-visible { outline: 3px solid var(--hivis-500); outline-offset: -3px; }
.oct-video__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--hivis-600); position: relative; box-shadow: 0 6px 24px #0006; transition: transform .15s; }
.oct-video__icon::after { content: ''; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.oct-video__play:hover .oct-video__icon { transform: scale(1.06); background: var(--hivis-500); }
.oct-video__title { font: 700 1.4rem var(--font-display); max-width: 30ch; }
.oct-video__note { font-size: .85rem; color: #9FB3C5; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .site-header, .site-footer, .lesson-nav, .oct-quiz { display: none; } body { background: #fff; } }