/*
Theme Name: SAFE of Harnett County
Theme URI: https://safeofhc.org/
Author: Built for SAFE of Harnett County
Description: A clean, accessible, mobile-friendly theme for SAFE of Harnett County. Designed to pair with the "SAFE of Harnett County – Site Core" plugin, which provides the always-on Safety Exit button, the editable homepage slider, and shared contact info. Pages are edited with the built-in WordPress editor — no page builder required.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: safe-hc-theme
APP_FILE_VER: 1.3.0
*/

/* ==========================================================================
   Design tokens
   Purple is SAFE's existing brand color. Around it: a soft lilac background,
   warm ink for text, and a single gold accent for emphasis.
   ========================================================================== */
:root {
	/*
	   Palette recovered from the previous site's own compiled theme variables
	   (the7-css/css-vars.css), so this is the agency's real brand rather than
	   an approximation:
	     accent          #7f4cbe -> #d462c5   (purple to pink gradient)
	     footer          #1a1c20               (near-black charcoal)
	     mobile menu     #3c3248               (deep aubergine)
	     header bar      #ffffff               (white, with the logo)
	   The old site paired a white header with a dark nav and a near-black
	   footer. That contrast is what makes it read as "the SAFE site", and it is
	   what the first pass here was missing.
	*/
	--purple: #7f4cbe;
	--pink: #d462c5;
	--accent-grad: linear-gradient(135deg, #7f4cbe 30%, #d462c5 100%);
	--purple-dark: #5f3596;
	--purple-deep: #2d144b;

	--nav-bg: #2b2533;        /* dark bar under the white header */
	--nav-bg-hover: #3c3248;  /* the7-mobile-menu-bg-color */
	--footer-bg: #1a1c20;     /* the7-footer-bg-color, exactly */
	--footer-bg-2: #121418;

	--lilac-bg: #f2eff7;
	--surface: #ffffff;
	--ink: #1a1c20;
	--ink-soft: #4d4854;
	--line: #ddd6e8;
	--gold: #f2b705;
	--exit-red: #b3261e;
	--display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--wrap: 1140px;
	--radius: 8px;
}

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

body {
	margin: 0;
	font-family: var(--body);
	color: var(--ink);
	background: var(--lilac-bg);
	line-height: 1.65;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.2; color: var(--purple-deep); }
a { color: var(--purple-dark); }
a:hover { color: var(--purple); }
img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--purple-deep); color: #fff;
	padding: 10px 16px; z-index: 100000; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: var(--surface); position: relative; }
/*
   The white bar is sized by the logo, not by the text next to it. Padding is
   deliberately small: everything in here is chrome, and on a phone every pixel
   spent on chrome is a pixel not spent on the crisis number.
*/
.site-header__bar {
	max-width: var(--wrap); margin: 0 auto;
	display: flex; align-items: center; gap: 20px;
	padding: 8px 24px;
	min-height: 0;
}
.site-header__brand { flex: 0 0 auto; display: flex; align-items: center; }
.site-header__brand img { max-height: 56px; width: auto; }
.site-header__title {
	font-family: var(--display); font-weight: 700; font-size: 1.5rem;
	color: var(--purple-deep); text-decoration: none;
}
.site-header__crisis { margin-left: auto; text-align: right; line-height: 1.2; }
.site-header__crisis-label { display: block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.site-header__crisis-number {
	font-family: var(--display); font-weight: 700; font-size: 1.35rem;
	color: var(--exit-red); text-decoration: none;
}
.site-header__crisis-number:hover { text-decoration: underline; }

/* Navigation */
.site-nav { background: var(--nav-bg); border-bottom: 3px solid var(--purple); }
.site-nav__menu {
	max-width: var(--wrap); margin: 0 auto; padding: 0;
	list-style: none; display: flex; flex-wrap: wrap;
}
.site-nav__menu li { position: relative; }
.site-nav__menu a {
	display: block; color: #fff; text-decoration: none;
	padding: 10px 15px; font-weight: 600; font-size: .93rem;
}
.site-nav__menu > li > a:hover,
.site-nav__menu > li:focus-within > a { background: var(--purple); }
.site-nav__menu > li.current-menu-item > a,
.site-nav__menu > li.current-page-ancestor > a { background: var(--purple); }
.site-nav__menu .has-children > a::after { content: " ▾"; font-size: .8em; opacity: .9; }

/* Dropdowns */
.site-nav__menu ul.sub-menu {
	list-style: none; margin: 0; padding: 6px 0;
	position: absolute; left: 0; top: 100%; min-width: 250px;
	background: var(--nav-bg-hover); box-shadow: 0 14px 32px rgba(0,0,0,.38);
	z-index: 50; display: none; border-radius: 0 0 var(--radius) var(--radius);
}
.site-nav__menu li:hover > ul.sub-menu,
.site-nav__menu li:focus-within > ul.sub-menu { display: block; }
.site-nav__menu ul.sub-menu a { padding: 9px 16px; font-size: .9rem; font-weight: 500; }
.site-nav__menu ul.sub-menu a:hover { background: var(--purple); }

/* ==========================================================================
   Page banner + breadcrumb
   ========================================================================== */
.page-banner { background: linear-gradient(120deg, var(--footer-bg) 0%, var(--purple-deep) 55%, var(--purple) 100%); color: #fff; }
.page-banner__inner { max-width: var(--wrap); margin: 0 auto; padding: 36px 24px 28px; }
.page-banner__title { color: #fff; margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.breadcrumb { font-size: .9rem; color: rgba(255,255,255,.85); }
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--gold); }

/* ==========================================================================
   Layout: main + sidebar
   ========================================================================== */
.layout { max-width: var(--wrap); margin: 0 auto; padding: 40px 24px; }
.layout--with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.layout__main { min-width: 0; }

.page-content > * + * { margin-top: 1.1em; }
.page-content h2 { margin-top: 1.6em; font-size: 1.55rem; }
.page-content h3 { margin-top: 1.4em; font-size: 1.2rem; color: var(--purple-dark); }
.page-content a { font-weight: 600; }
.page-content ul, .page-content ol { padding-left: 1.4em; }
.page-content img { border-radius: var(--radius); }

/* ==========================================================================
   Home: help boxes
   ========================================================================== */
.home-help { margin-top: 48px; }
.home-help__title { font-size: 1.7rem; margin: 0 0 20px; }
.home-help__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.home-help__box {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 24px; border-top: 4px solid var(--purple);
}
.home-help__box h3 { margin: 0 0 10px; font-size: 1.2rem; }
.home-help__box p { margin: 0 0 8px; color: var(--ink-soft); font-size: .98rem; }
.home-help__box--accent { background: var(--purple-deep); border-top-color: var(--gold); }
.home-help__box--accent h3, .home-help__box--accent p { color: #fff; }
.home-help__phone a { color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-decoration: none; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar-block {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 20px 22px; margin-bottom: 22px;
}
.sidebar-block__title {
	margin: 0 0 12px; font-size: 1.15rem; color: var(--purple-dark);
	padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.sidebar-block__list { list-style: none; margin: 0; padding: 0; }
.sidebar-block__list li + li { border-top: 1px solid var(--line); }
.sidebar-block__list a { display: block; padding: 9px 0; text-decoration: none; font-weight: 600; font-size: .96rem; }
.sidebar-block__list a:hover { color: var(--purple); padding-left: 4px; transition: padding .12s ease; }
.sidebar-block--mission p { font-size: .94rem; color: var(--ink-soft); }
.sidebar-block__contact a { color: var(--exit-red); font-weight: 700; text-decoration: none; }

.safe-donate-btn, .sidebar-block--donate a {
	display: inline-block; background: var(--gold); color: var(--purple-deep);
	font-weight: 700; padding: 12px 26px; border-radius: var(--radius);
	text-decoration: none; font-size: 1.05rem;
}
.safe-donate-btn:hover { background: #ffca2c; color: var(--purple-deep); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--footer-bg); color: #b9b3c2; margin-top: 60px; border-top: 4px solid var(--purple); }
.site-footer__inner {
	max-width: var(--wrap); margin: 0 auto; padding: 48px 24px 24px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px;
}
.site-footer__title { color: #fff; font-size: 1.15rem; margin: 0 0 14px; }
.site-footer a { color: #fff; }
.site-footer__social { list-style: none; padding: 0; margin: 0 0 16px; }
.site-footer__social li { margin-bottom: 8px; }
.site-footer__phone { color: var(--gold) !important; font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.site-footer__credit { background: var(--footer-bg-2); border-top: 1px solid rgba(255,255,255,.10); text-align: center; padding: 18px; font-size: .85rem; }
.site-footer__credit p { margin: 0; }

/* ==========================================================================
   Mobile nav toggle
   ========================================================================== */
.nav-toggle { display: none; background: var(--purple); border: 0; border-radius: var(--radius); padding: 12px; cursor: pointer; margin-left: auto; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 24px; height: 3px; background: #fff; border-radius: 2px; position: relative;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

@media (max-width: 900px) {
	.layout--with-sidebar { grid-template-columns: 1fr; }
	.site-header__crisis { margin-left: 0; }
	.site-header__bar { flex-wrap: wrap; }
	.nav-toggle { display: inline-block; }
	.site-nav__menu { display: none; flex-direction: column; }
	.site-nav__menu.is-open { display: flex; }
	.site-nav__menu ul.sub-menu { position: static; display: block; box-shadow: none; background: var(--purple-deep); }
	.site-nav__menu .has-children > a::after { content: ""; }
}

@media (max-width: 600px) {
	body { font-size: 17px; }
	.site-header__crisis { text-align: left; width: 100%; }
}


/* ==========================================================================
   Added in 1.1.0
   ========================================================================== */

/* Callout box, shared with the Site Core plugin's page content. */
.safe-callout {
	background: #f3eefb;
	border-left: 4px solid #7f4cbe;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	border-radius: 4px;
}
.safe-callout p:last-child { margin-bottom: 0; }

/* Search form. */
.safe-search {
	display: flex;
	gap: 0.5rem;
	max-width: 460px;
	margin: 1rem 0;
}
.safe-search__field {
	flex: 1 1 auto;
	padding: 0.6rem 0.75rem;
	border: 1px solid #c9c2d6;
	border-radius: 4px;
	font: inherit;
}
.safe-search__submit {
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 4px;
	background: #7f4cbe;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.safe-search__submit:hover,
.safe-search__submit:focus { background: #5c2f96; }

/* Single post. */
.page-banner__meta {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	margin: 0.35rem 0 0;
}
.post-thumb {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 1.25rem;
}
.post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid #ddd8e6;
}
.post-nav__link {
	font-weight: 600;
	text-decoration: none;
}
.post-nav__link:hover,
.post-nav__link:focus { text-decoration: underline; }

/* ==========================================================================
   Added in 1.2.0 — branding lockup
   ========================================================================== */

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--ink);
}
.site-header__logo {
	/*
	   The only logo files the agency has are 91x91 and 105x100, recovered from
	   the old site. Rendering them larger than about 64px makes them visibly
	   soft, so the cap is deliberate — see the release notes.
	*/
	height: 56px;
	width: auto;
	max-height: 56px;
	display: block;
}
.site-header__wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.site-header__wordmark-name {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--ink);
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.site-header__logo-link:hover .site-header__wordmark-name,
.site-header__logo-link:focus-visible .site-header__wordmark-name {
	color: var(--purple);
}
.site-header__logo-link:focus-visible {
	outline: 3px solid var(--purple);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.site-header__logo { height: 48px; max-height: 48px; }
	.site-header__wordmark-name { font-size: 1.05rem; }
}


/* ==========================================================================
   Added in 1.3.0 — footer utility row
   The safety and privacy links live here rather than in the main menu. They
   are reference material, not a destination someone navigates to in a hurry,
   and as menu items they were long enough to wrap the nav onto a second line.
   ========================================================================== */

.site-footer__utility {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px 20px;
	border-top: 1px solid rgba(255, 255, 255, .10);
	padding-top: 18px;
}
.site-footer__utility-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: .9rem;
}
.site-footer__utility-list a {
	color: #d8d3e0;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.site-footer__utility-list a:hover,
.site-footer__utility-list a:focus-visible {
	color: #fff;
	border-bottom-color: var(--purple);
}
.site-footer__utility-note {
	margin: 10px 0 0;
	font-size: .85rem;
	color: #8e8898;
	max-width: 70ch;
}