/* GoldenLSAT Courses — theme styles. Values read from goldenlsat.com on 2026-10-12. */

:root {
	--gl-blue: #3b63ab;
	--gl-white: #fff;
	--gl-peach: #ecc3ab;
	--gl-lilac: #e6c9e1;
	--gl-cream: #f3f1f0;
	--gl-gold: #ecb64c;
	--gl-ink: #1f2a44;
	--gl-shadow: 5px 5px 0 0 var(--gl-lilac);
	--gl-gutter: 6%;
	--gl-max: 1280px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; }

/* Headings: Wonderfall is loose and tall; tighten so lines stack like the site. */
h1, h2, h3 { letter-spacing: 0; text-wrap: balance; margin-top: 0; }
/* Wonderfall is drawn at ~2.4x its em box; theme.json applies size-adjust: 42% so sizes and leading behave normally. Script sizes are therefore large numbers. */
h1 { line-height: 1.1; }
/* WooCommerce hooks its account icon and mini-cart into the header; the Sign in button covers that. */
.gl-header .wp-block-woocommerce-customer-account, .gl-header .wp-block-woocommerce-mini-cart { display: none !important; }
h2, h3 { line-height: 1.15; }
h1, h2, h3 { margin-bottom: .25em; }
.gl-access-state h2, .is-style-panel-peach h2, .is-style-panel-lilac h2, .is-style-panel-blue h2 { font-size: clamp(4.3rem, 3.3rem + 4.5vw, 6.2rem); }
.has-blue-background-color h1, .has-blue-background-color h2, .has-blue-background-color h3,
.has-blue-background-color p, .has-blue-background-color li, .has-blue-background-color a,
.is-style-panel-blue, .is-style-panel-blue * { color: var(--gl-white); }
.has-blue-background-color strong { color: inherit; }

/* Paragraph rhythm. */
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
em { font-style: italic; }

/* Links inside blue areas. */
.has-blue-background-color a:hover { color: var(--gl-lilac); }

/* ---------- Buttons: outline + lilac hard shadow ---------- */
.wp-element-button, .wp-block-button__link, button.button, a.button, input[type="submit"], .gl-button {
	display: inline-block;
	background: transparent;
	color: var(--gl-blue);
	border: 2px solid currentColor;
	border-radius: 0;
	box-shadow: var(--gl-shadow);
	font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	padding: 1rem 1.67rem;
	cursor: pointer;
	transition: background-color .05s ease-in, color .05s ease-in, transform .05s ease-in, box-shadow .05s ease-in;
}
.wp-element-button:hover, .wp-block-button__link:hover, button.button:hover, a.button:hover, input[type="submit"]:hover, .gl-button:hover,
.wp-element-button:focus-visible, .wp-block-button__link:focus-visible {
	background: var(--gl-blue);
	color: var(--gl-white);
	border-color: var(--gl-blue);
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 0 var(--gl-lilac);
}
.has-blue-background-color .wp-element-button, .has-blue-background-color .wp-block-button__link,
.is-style-panel-blue .wp-element-button, .gl-on-blue .gl-button {
	color: var(--gl-white); border-color: var(--gl-white);
}
.has-blue-background-color .wp-element-button:hover, .has-blue-background-color .wp-block-button__link:hover,
.is-style-panel-blue .wp-element-button:hover, .gl-on-blue .gl-button:hover {
	background: var(--gl-white); color: var(--gl-blue); border-color: var(--gl-white);
}
.is-style-filled .wp-block-button__link, .gl-button--filled {
	background: var(--gl-blue); color: var(--gl-white); border-color: var(--gl-blue);
}
.is-style-filled .wp-block-button__link:hover, .gl-button--filled:hover {
	background: var(--gl-ink); border-color: var(--gl-ink); color: var(--gl-white);
}
.wp-block-button.is-style-outline .wp-block-button__link { border-width: 2px; }
.gl-button--small, .wp-block-button.is-small .wp-block-button__link { font-size: .7rem; padding: .7rem 1.1rem; }

/* ---------- Header ---------- */
.gl-header { background: var(--gl-blue); color: var(--gl-white); }
.gl-header .wp-block-site-logo img { width: clamp(150px, 19vw, 250px); height: auto; display: block; }
.gl-header .wp-block-navigation a { color: var(--gl-white); font-size: .9375rem; letter-spacing: .1em; text-decoration: none; }
.gl-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }
.gl-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-underline-offset: 4px; }
.gl-header .wp-block-navigation__responsive-container-open,
.gl-header .wp-block-navigation__responsive-container-close { color: var(--gl-white); }
/* Mobile menu icon: the gold + hollow dot pair, as on the main site. */
.gl-header .wp-block-navigation__responsive-container-open svg { display: none; }
.gl-header .wp-block-navigation__responsive-container-open {
	width: 48px; height: 44px; padding: 0;
	background: url("../img/favicon-192.png") center / 40px auto no-repeat;
}
.gl-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--gl-blue); }
.gl-header .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.4rem; }
.gl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--gl-white); }
.gl-header .gl-header-button .wp-block-button__link { font-size: .7rem; padding: .75rem 1.1rem; box-shadow: none; }
.gl-header .gl-header-button .wp-block-button__link:hover { transform: none; }

/* ---------- Footer ---------- */
.gl-footer { background: var(--gl-blue); color: var(--gl-white); text-align: center; }
.gl-footer a { color: var(--gl-white); }
.gl-footer .gl-footer-logo img { width: 160px; height: auto; margin: 0 auto; display: block; }
.gl-footer .gl-footer-links { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.gl-footer .gl-footer-links a { text-decoration: underline; text-underline-offset: 3px; }
.gl-footer .gl-footer-links a:hover { color: var(--gl-lilac); }
.gl-footer .wp-block-social-links .wp-social-link svg { fill: var(--gl-white); }
.gl-footer .wp-block-social-links .wp-social-link { background: transparent; }
.gl-footer hr.wp-block-separator { border: 0; border-top: 1px solid var(--gl-white); opacity: 1; width: 100%; max-width: var(--gl-max); margin: 2rem auto; }
.gl-footer .gl-footer-legal { font-size: .85rem; line-height: 1.5; max-width: 60rem; margin: 0 auto; }
.gl-footer .gl-footer-legal em { font-style: italic; }
.gl-footer .gl-footer-credit .wp-block-button__link { font-size: .55rem; padding: .5rem .8rem; box-shadow: none; letter-spacing: .1em; }

/* ---------- Panels ---------- */
.is-style-panel-peach, .gl-panel--peach { background: var(--gl-peach); color: var(--gl-blue); padding: clamp(1.5rem, 4vw, 3rem); }
.is-style-panel-lilac, .gl-panel--lilac { background: var(--gl-lilac); color: var(--gl-blue); padding: clamp(1.5rem, 4vw, 3rem); }
.is-style-panel-blue,  .gl-panel--blue  { background: var(--gl-blue);  color: var(--gl-white); padding: clamp(1.5rem, 4vw, 3rem); }
.is-style-card, .gl-card { background: var(--gl-white); color: var(--gl-blue); padding: clamp(1.25rem, 3vw, 2rem); border: 2px solid var(--gl-blue); box-shadow: var(--gl-shadow); }
.has-cream-background-color { color: var(--gl-blue); }

/* ---------- Four-dot divider and squiggle ---------- */
hr.is-style-dots, .gl-dots {
	border: 0; height: 14px; width: 120px; margin: 2rem auto; background: none; position: relative; opacity: 1;
}
hr.is-style-dots::before, .gl-dots::before {
	content: ""; position: absolute; inset: 0;
	background: url("../img/dots-color.png") center / contain no-repeat;
}
.has-blue-background-color hr.is-style-dots::before, .gl-on-blue .gl-dots::before { background-image: url("../img/dots-white.png"); }
/* Single alternating dots as paragraph separators (site's "bright-inverse" sections). */
.gl-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--gl-blue); margin: 1.75rem auto; }
.gl-dot--hollow { background: transparent; border: 2px solid var(--gl-blue); box-sizing: border-box; }
.gl-dot--gold { background: var(--gl-gold); }
.gl-on-blue .gl-dot { background: var(--gl-white); }
.gl-on-blue .gl-dot--hollow { background: transparent; border-color: var(--gl-white); }
hr.is-style-squiggle {
	border: 0; height: 18px; width: 60px; margin: 1.5rem auto; opacity: 1;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 18'><path d='M3 9c6-8 12-8 18 0s12 8 18 0 12-8 18 0' fill='none' stroke='%233b63ab' stroke-width='2.2' stroke-linecap='round'/></svg>") center / contain no-repeat;
}
.has-blue-background-color hr.is-style-squiggle {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 18'><path d='M3 9c6-8 12-8 18 0s12 8 18 0 12-8 18 0' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/></svg>");
}

/* ---------- Page chrome ---------- */
.gl-page-title { text-align: center; }
.gl-hero { background: var(--gl-blue); color: var(--gl-white); padding: clamp(2.5rem, 7vw, 5rem) var(--gl-gutter); }
.gl-hero h1, .gl-hero h2, .gl-hero p { color: var(--gl-white); }
.gl-main { padding: clamp(2rem, 5vw, 4rem) var(--gl-gutter); }
.gl-main > .wp-block-post-content, .gl-main .entry-content { max-width: 900px; margin: 0 auto; }
.gl-narrow { max-width: 640px; margin-inline: auto; }

/* Photo ring (lilac ring with white inner ring), for profile images. */
.gl-ring img { border-radius: 50%; border: 6px solid var(--gl-white); box-shadow: 0 0 0 12px var(--gl-lilac); }

/* Illustrations at section edges. */
.gl-illustration img { max-width: 260px; height: auto; }

/* ---------- Forms (login, checkout, account) ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
	font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	color: var(--gl-ink);
	background: var(--gl-white);
	border: 2px solid var(--gl-blue);
	border-radius: 0;
	padding: .8rem 1rem;
	width: 100%;
	box-sizing: border-box;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--gl-gold); outline-offset: 1px; }
label { font-weight: 600; font-size: .9rem; letter-spacing: .02em; }
::placeholder { color: #7f8ba6; opacity: 1; }

/* Notices (WordPress, WooCommerce and the connector share these classes). */
.gl-notice, .woocommerce-message, .woocommerce-info, .woocommerce-error, .gl-state {
	padding: 1rem 1.25rem; margin: 0 0 1.5rem; border: 2px solid var(--gl-blue); background: var(--gl-cream); color: var(--gl-blue); list-style: none; box-shadow: var(--gl-shadow);
}
.woocommerce-error, .gl-notice--error { background: var(--gl-peach); }
.woocommerce-message, .gl-notice--success { background: var(--gl-lilac); }

/* Focus and accessibility. */
a:focus-visible, button:focus-visible { outline: 3px solid var(--gl-gold); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Header account control: "Account" links to the account page; hover or keyboard focus reveals a small menu. */
.gl-header .gl-account { position: relative; display: inline-block; }
.gl-header .gl-account .gl-account__link { margin: 0; }
.gl-header .gl-account__menu {
	position: absolute; top: calc(100% + .6rem); right: 0; z-index: 50; min-width: 12rem; margin: 0; padding: .35rem 0; list-style: none;
	background: var(--gl-white); border: 2px solid var(--gl-blue); box-shadow: var(--gl-shadow);
	display: none;
}
.gl-header .gl-account__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; } /* keeps the hover alive across the gap */
.gl-header .gl-account:focus-within .gl-account__menu { display: block; }
@media (hover: hover) { .gl-header .gl-account:hover .gl-account__menu { display: block; } }
.gl-header .gl-account__menu li { margin: 0; }
.gl-header .gl-account__menu a {
	display: block; padding: .75rem 1.1rem; color: var(--gl-blue); font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
	font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.gl-header .gl-account__menu a:hover, .gl-header .gl-account__menu a:focus-visible { background: var(--gl-cream); color: var(--gl-blue); outline: none; box-shadow: inset 0 0 0 3px var(--gl-gold); }
.gl-header .gl-account__menu a:hover { box-shadow: none; }
.gl-header .gl-account__signout { border-top: 1px solid var(--gl-lilac); margin-top: .35rem; padding-top: .35rem; }