/*
Theme Name:   AB Starter
Description:  A minimal classic theme for Elementor sites. The theme supplies the header, footer, menus, widget areas and blog templates; Elementor designs the page content. Colours and fonts come from the Autism Bucks design system.
Author:       Neil Cary
Version:      0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License:      GNU General Public License v2 or later
Text Domain:  ab-starter
*/

/* =====================================================================
   HOW THIS FILE IS ORGANISED
   1. Design tokens  — the ONLY place colours, fonts and sizes are set.
                       Change a value here and the whole site follows.
   2. Base           — sensible defaults for plain HTML elements.
   3. Layout         — containers and content widths.
   4. Header & nav
   5. Footer
   6. Blog bits      — post lists, single posts, pagination, comments.
   7. Utilities      — buttons and helpers you can use anywhere,
                       including in Elementor (Advanced → CSS Classes).
   ===================================================================== */


/* ---------- 1. Design tokens ---------- */
:root {
	/* Brand colours */
	--ab-teal:          #274B47;
	--ab-teal-dark:     #1B3734;
	--ab-orange:        #FF7300;
	--ab-orange-dark:   #C25700;   /* use for text/buttons: passes contrast on white */
	--ab-orange-darker: #A54A00;
	--ab-orange-tint:   #FFE9D6;
	--ab-orange-soft:   #FFF0E3;
	--ab-orange-wash:   #FFF6EE;
	--ab-sage:          #E7EDE0;
	--ab-sage-border:   #D3DBCB;
	--ab-cream:         #FBF8F2;
	--ab-white:         #FFFFFF;
	--ab-ink:           #1F2A28;   /* body text */
	--ab-muted:         #4A5856;   /* secondary text */
	--ab-border:        #ECE6DA;
	--ab-field-border:  #C9D2C6;
	--ab-error:         #A3290F;

	/* Typography */
	--ab-font-heading: Poppins, system-ui, sans-serif;
	--ab-font-body:    'Atkinson Hyperlegible', system-ui, sans-serif;
	--ab-text-base:    18px;
	--ab-text-h1:      clamp(44px, 6vw, 72px);
	--ab-text-h2:      clamp(30px, 3.4vw, 42px);
	--ab-text-h3:      clamp(22px, 2.2vw, 26px);

	/* Layout & spacing */
	--ab-container: 1240px;   /* widest content */
	--ab-reading:   760px;    /* comfortable line length for posts */
	--ab-gutter:    clamp(20px, 4vw, 40px);
	--ab-section-y: clamp(48px, 8vw, 96px);
	--ab-gap:       clamp(16px, 2.5vw, 24px);

	/* Shape */
	--ab-radius-sm:   12px;
	--ab-radius-md:   18px;
	--ab-radius-lg:   24px;
	--ab-radius-pill: 999px;

	/* Elevation & focus */
	--ab-shadow-soft:  0 1px 2px rgba(39, 75, 71, .04), 0 8px 24px rgba(39, 75, 71, .05);
	--ab-shadow-hover: 0 14px 32px rgba(39, 75, 71, .12);
	--ab-focus-ring:   0 0 0 2px #C25700, 0 0 0 6px rgba(255, 115, 0, .2);

	/* Motion */
	--ab-ease-out:   cubic-bezier(.22, .61, .36, 1);
	--ab-dur-hover:  300ms;
}


/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ab-cream);
	color: var(--ab-ink);
	font-family: var(--ab-font-body);
	font-size: var(--ab-text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ab-font-heading);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ab-teal);
	margin: 0 0 .5em;
}
h1 { font-size: var(--ab-text-h1); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--ab-text-h2); }
h3 { font-size: var(--ab-text-h3); }

p, ul, ol, blockquote, figure { margin: 0 0 1.2em; }

a { color: var(--ab-teal); text-underline-offset: .15em; }
a:hover { color: var(--ab-orange-dark); }

:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); border-radius: 4px; }

img { max-width: 100%; height: auto; }

blockquote {
	border-left: 4px solid var(--ab-orange);
	padding-left: 1em;
	font-style: italic;
	color: var(--ab-muted);
}

input, textarea, select {
	font: inherit;
	padding: .6em .8em;
	border: 1px solid var(--ab-field-border);
	border-radius: var(--ab-radius-sm);
	background: var(--ab-white);
	max-width: 100%;
}

/* WordPress's own alignment classes (from the block editor) */
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: .85em; color: var(--ab-muted); }


/* ---------- 3. Layout ---------- */
.ab-container {
	max-width: var(--ab-container);
	margin: 0 auto;
	padding: 0 var(--ab-gutter);
}

.site-main { padding: var(--ab-section-y) 0; }

/* Pages: Elementor content is left alone so its full-width sections work.
   Anything NOT built with Elementor (plain block-editor content) gets a
   comfortable reading width instead. */
.page-content > :not(.elementor) {
	max-width: var(--ab-reading);
	margin-inline: auto;
	padding-inline: var(--ab-gutter);
}
/* Elementor pages don't need the theme's top/bottom padding */
.site-main--page:has(.elementor) { padding: 0; }

/* Posts, archives, search, 404 */
.ab-reading { max-width: var(--ab-reading); margin-inline: auto; padding-inline: var(--ab-gutter); }

/* Optional sidebar layout (Page template "With sidebar", and single posts
   when the Sidebar widget area has widgets in it) */
.ab-with-sidebar {
	display: grid;
	gap: calc(var(--ab-gap) * 2);
	max-width: var(--ab-container);
	margin: 0 auto;
	padding: 0 var(--ab-gutter);
}
@media (min-width: 900px) {
	.ab-with-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
	.ab-with-sidebar .ab-reading { margin: 0; padding: 0; max-width: none; }
}
.widget-area .widget { margin-bottom: 2em; }
.widget-title { font-size: 1.1rem; }


/* ---------- 4. Header & nav ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid #E9ECE4;
}
/* Keep the sticky header below the WordPress admin bar when logged in */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* Below 600px WordPress lets the admin bar scroll away, so no gap is needed */
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
}

.site-branding a { text-decoration: none; }
.site-branding img { display: block; height: 56px; width: auto; border-radius:8px; }
.site-title {
	font-family: var(--ab-font-heading);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--ab-teal);
}

.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav a {
	display: block;
	padding: 8px 12px;
	font-family: var(--ab-font-heading);
	font-weight: 500;
	font-size: 16px;
	color: var(--ab-ink);
	text-decoration: none;
}
.main-nav a:hover { color: var(--ab-orange-dark); }
/* Underline the current page, as in the design */
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-color: var(--ab-orange);
	text-decoration-thickness: 3px;
	text-underline-offset: 10px;
}
/* A menu item given the CSS class "menu-button" (see README) becomes the
   teal Donate-style pill */
.main-nav .menu-button > a {
	background: var(--ab-teal);
	color: #fff;
	border-radius: var(--ab-radius-pill);
	padding: 12px 22px;
	font-weight: 600;
	text-decoration: none;
}
.main-nav .menu-button > a:hover { background: var(--ab-teal-dark); color: #fff; }

.menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: #fff;
	color: var(--ab-teal);
	font: 600 16px var(--ab-font-heading);
	cursor: pointer;
}

/* Desktop: horizontal menu with drop-downs */
@media (min-width: 1061px) {
	.main-nav > ul { display: flex; align-items: center; gap: 4px; }
	.main-nav li { position: relative; }
	.main-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		padding: 8px;
		background: #fff;
		border: 1px solid var(--ab-border);
		border-radius: var(--ab-radius-md);
		box-shadow: var(--ab-shadow-hover);
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity .2s, transform .2s, visibility .2s;
	}
	.main-nav li:hover > .sub-menu,
	.main-nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; }
	.main-nav .sub-menu a { border-radius: 8px; }
	.main-nav .sub-menu a:hover { background: var(--ab-orange-wash); }
	.main-nav .menu-item-has-children > a::after { content: " \25BE"; font-size: .8em; }
}

/* Mobile: a "Menu" button opens a stacked list */
@media (max-width: 1060px) {
	.menu-toggle { display: inline-flex; }
	.main-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 12px var(--ab-gutter) 24px;
		background: #fff;
		border-bottom: 1px solid var(--ab-border);
		box-shadow: var(--ab-shadow-hover);
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}
	.main-nav.is-open { display: block; }
	.main-nav a { padding: 12px 4px; font-size: 18px; }
	.main-nav .sub-menu { padding-left: 16px; border-left: 2px solid var(--ab-orange-tint); }
	.main-nav .menu-button > a { display: inline-block; margin-top: 12px; }
}


/* ---------- 5. Footer ----------
   Compact: square top corners, less padding, the menu shows only
   top-level pages and runs across the column instead of down it. */
.site-footer {
	background: var(--ab-teal);
	color: var(--ab-sage);
	padding: clamp(28px, 4vw, 40px) 0 18px;
	font-size: 15px;
	line-height: 1.5;
}
.site-footer a { color: var(--ab-sage); text-decoration: none; }
.site-footer a:hover { color: #FFA05C; }
.site-footer h2, .site-footer .widget-title {
	font-size: 15px;
	color: #fff;
	margin: 0 0 8px;
}
.site-footer p { margin: 0 0 6px; }
.site-footer img { height: 48px; width: auto; border-radius: 8px; margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }

/* Menus in the footer: top level only, in a wrapping row */
.site-footer .sub-menu { display: none; }
.site-footer .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

/* Columns are only as wide as their contents and spread out, so the
   first sits at the left edge and the last at the right edge. */
.footer-widgets {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px clamp(24px, 4vw, 40px);
	align-items: flex-start;
}
.footer-widgets > .widget { flex: 0 1 auto; min-width: 0; }
.footer-widgets .widget_nav_menu { max-width: 400px; }  /* menu wraps onto 2 lines */
@media (max-width: 700px) {
	.footer-widgets { flex-direction: column; }
}
.site-info {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid rgba(231, 237, 224, .2);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 12px;
	font-size: 14px;
}
.site-info p { margin: 0; }


/* ---------- 6. Blog bits ---------- */
.page-header { margin-bottom: 2em; }
.page-header .archive-description { color: var(--ab-muted); }

.post-card {
	background: #fff;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-lg);
	padding: clamp(20px, 3vw, 32px);
	margin-bottom: var(--ab-gap);
	box-shadow: var(--ab-shadow-soft);
}
.post-card .entry-title { font-size: var(--ab-text-h3); margin-bottom: .3em; }
.post-card .entry-title a { text-decoration: none; }
.post-card img { border-radius: var(--ab-radius-md); margin-bottom: 1em; }

.entry-meta { font-size: 15px; color: var(--ab-muted); margin-bottom: 1em; }
.single .entry-title { font-size: var(--ab-text-h2); }
.single .post-thumbnail img { border-radius: var(--ab-radius-lg); margin-bottom: 1.5em; }
.entry-footer { margin-top: 2em; font-size: 15px; color: var(--ab-muted); }

.pagination, .post-navigation { margin-top: 2em; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.page-numbers {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--ab-radius-pill);
	border: 1px solid var(--ab-border);
	background: #fff;
	text-decoration: none;
}
.page-numbers.current { background: var(--ab-teal); color: #fff; border-color: var(--ab-teal); }

.comments-area { margin-top: 3em; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; }
.comment-body { background: #fff; border-radius: var(--ab-radius-md); padding: 16px 20px; margin-bottom: 12px; }


/* ---------- 7. Utilities ----------
   Use these anywhere — in your PHP templates, or in Elementor by typing the
   class name into an element's Style → Classes box.
   "body.ab" in front makes them outrank Elementor's own default styles
   (see the note at the top of css/sections.css). */
body.ab .ab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 28px;
	border-radius: var(--ab-radius-pill);
	border: 2px solid transparent;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ab-dur-hover) ease, border-color var(--ab-dur-hover) ease;
}
body.ab .ab-btn--primary   { background: var(--ab-orange-dark); border-color: var(--ab-orange-dark); color: #fff; }
body.ab .ab-btn--primary:hover { background: var(--ab-orange-darker); border-color: var(--ab-orange-darker); color: #fff; }
body.ab .ab-btn--secondary { background: #fff; border-color: var(--ab-teal); color: var(--ab-teal); }
body.ab .ab-btn--secondary:hover { background: var(--ab-sage); color: var(--ab-teal); }

body.ab .ab-card {
	background: #fff;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-lg);
	box-shadow: var(--ab-shadow-soft);
	transition: transform var(--ab-dur-hover) ease, box-shadow var(--ab-dur-hover) ease;
}
body.ab .ab-card:hover { transform: translateY(-3px); box-shadow: var(--ab-shadow-hover); }

.ab-eyebrow-bar {   /* short orange bar above a section heading */
	display: block;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--ab-orange);
	margin-bottom: 18px;
}

.screen-reader-text, .ab-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--ab-teal);
	color: #fff;
	border-radius: var(--ab-radius-pill);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}