/* ==========================================================================
   Outlaw Alliance Radio — child styles
   Loaded at priority 9999 so it wins against Divi's cached inline CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens

   These mirror the Divi 5 Global Variables you set in the builder. Keep both
   in sync: the builder owns anything a client might want to change, this file
   owns anything they shouldn't.
   -------------------------------------------------------------------------- */
:root {
	--oar-ink:       #140F0D; /* page background, warm near-black */
	--oar-panel:     #1C1512; /* raised surfaces */
	--oar-panel-alt: #241B16; /* hover surfaces */
	--oar-line:      #3B2C24; /* hairlines and borders */
	--oar-bone:      #EFE6D7; /* primary text */
	--oar-bone-dim:  #A2917E; /* secondary text, labels */
	--oar-amber:     #E9A63C; /* primary accent, links, buttons */
	--oar-oxide:     #C24428; /* on-air red, live indicators */

	--oar-display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
	--oar-body:    "Spectral", Georgia, serif;
	--oar-util:    "Space Mono", ui-monospace, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2. Accessibility

   Divi strips focus outlines on most interactive elements. This puts a visible
   one back without affecting mouse users. Don't delete it — it's the single
   most common WCAG failure on Divi sites.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible,
.et_pb_menu a:focus-visible {
	outline: 2px solid var(--oar-amber);
	outline-offset: 3px;
}

/* Skip link — Divi renders one but hides it off-screen with no visible state. */
.et_pb_skip_link:focus {
	background: var(--oar-amber);
	color: var(--oar-ink);
	padding: 12px 20px;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   3. Typography

   Set the families here and the sizes in Divi's Theme Customizer, so the client
   can adjust scale without touching code.
   -------------------------------------------------------------------------- */
body,
.et_pb_module {
	font-family: var(--oar-body);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
	font-family: var(--oar-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: -0.005em;
}

/* Utility face for anything that reads as station metadata: timeslots, DJ
   handles, air dates. Add the class in the module's CSS Class field. */
.oar-meta {
	font-family: var(--oar-util);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oar-bone-dim);
}

/* --------------------------------------------------------------------------
   4. Buttons

   Divi's button defaults come from the Customizer, but its hover transition is
   half a second and feels sluggish on a site about live radio.
   -------------------------------------------------------------------------- */
.et_pb_button {
	font-family: var(--oar-util);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* --------------------------------------------------------------------------
   5. On-air indicator

   Reusable pill for "we're live right now" states. Drop the class on any Divi
   text module, or use the [oar_on_air] shortcode from functions.php.
   -------------------------------------------------------------------------- */
.oar-on-air {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--oar-util);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--oar-bone);
	border: 1px solid var(--oar-oxide);
	background: rgba(194, 68, 40, 0.1);
	padding: 7px 13px 6px;
}

.oar-on-air::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--oar-oxide);
	box-shadow: 0 0 10px 1px rgba(194, 68, 40, 0.9);
	animation: oar-breathe 2.6s ease-in-out infinite;
}

@keyframes oar-breathe {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
	.oar-on-air::before { animation: none; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   6. Print
   -------------------------------------------------------------------------- */
@media print {
	#main-header,
	#main-footer,
	.et_pb_button { display: none !important; }
	body { background: #fff; color: #000; }
}