/*
Theme Name: Sandra James (Kadence Child)
Template: kadence
Description: Presentation layer for the Sandra James site. Content stays in the block editor; only scoped CSS lives here.
Author: Sandra James
Version: 0.3.5
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: sandra-james
*/

/* Fonts: local, OFL 1.1 — see assets/fonts/SOURCES.md. */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/poppins-400.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/poppins-500.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/poppins-700.woff2") format("woff2");
}

@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/libre-baskerville-variable.woff2") format("woff2");
}

/*
 * Site header and mobile menu drawer, every page. Kadence's header items are
 * set to inherit the body font, which only the frontpage overrides, so the
 * header lost its Poppins type on other pages. Scope stays on the header.
 */
#masthead,
#mobile-drawer {
	--global-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-family: var(--global-body-font-family);
}

/*
 * Site footer, every page. Layout, colours, sizes and spacing come from the
 * Kadence footer builder and the footer widgets; these rules only add the
 * local fonts, the thin gold top edge, stack the footer menu and give its
 * links a gold focus state.
 */
#colophon {
	--global-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--global-heading-font-family: "Libre Baskerville", georgia, "Times New Roman", serif;
	font-family: var(--global-body-font-family);
	/* Painted inside the footer, so the edge adds no height. */
	box-shadow: inset 0 2px 0 rgba(251, 172, 14, 0.6);
}

#colophon .footer-navigation {
	margin-top: 0.375rem;
}

#colophon .footer-navigation .menu {
	flex-direction: column;
	align-items: flex-start;
}

/* Taller tap area for links in footer text, without changing the line layout. */
#colophon .widget p a {
	padding-block: 0.6875rem;
}

#colophon a:focus-visible {
	outline: 2px solid #fbac0e;
	outline-offset: 2px;
}

/* Gold text on keyboard focus too; specific enough to beat Kadence's rest and current-item colours. */
#colophon .footer-navigation .menu .menu-item a:focus-visible {
	color: #fbac0e;
}

/*
 * Frontpage only, scoped to the body class added in functions.php. Type,
 * colours, spacing and buttons are block settings, and the shared details
 * (fonts, eyebrow rule, focus rings, book shadow) live in
 * assets/css/sandra-james-pages.css under the page's `.sj-page` wrapper, so
 * they also show in the editor. Only page-wide defaults and one layout rule
 * remain here.
 */
body.sandra-james-frontpage {
	--sj-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sj-serif: "Libre Baskerville", georgia, "Times New Roman", serif;
	--global-body-font-family: var(--sj-sans);
	--global-heading-font-family: var(--sj-serif);
	font-family: var(--sj-sans);
	color: #001524;
}

/* Hero text sits mid-height while the cut-out portrait stays on the section floor. */
.sandra-james-frontpage #top .kt-row-column-wrap > .wp-block-kadence-column:first-child {
	align-self: center;
	padding-bottom: 3rem;
}