/*
Theme Name: Act 1 Theatrical Supplies
Theme URI: https://act-one.ca
Author: Act 1 Theatrical Supplies
Description: A lightweight, mobile-first WordPress block theme for Act 1 Theatrical Supplies, a dance and theatre supply store in Chatham-Kent, Ontario. Built without a page builder, focused on fast loading, accessible semantic HTML, and local search visibility.
Version: 0.1.2 (Phase 1 foundation, compatibility/content patch)
Requires at least: 6.6
Tested up to: 7.0
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: act1-theatrical-supplies
*/

/* ==========================================================================
   This file intentionally holds very little.
   Color, type, spacing, layout widths, and button styles all live in
   theme.json so the block editor and the front end stay in sync.
   Only things theme.json genuinely cannot express live here:
   local @font-face declarations, accessibility helpers, and a few
   small layout details for custom block patterns (cards, FAQ, map).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Local fonts (self-hosted, not loaded from Google's CDN)
   --------------------------------------------------------------------------
   These @font-face rules point to /assets/fonts/. The actual .woff2 files
   are NOT included yet (see installation notes) — until they're added,
   browsers will silently fall back to the Georgia / system-ui stacks
   defined in theme.json, so the site works correctly either way.
   -------------------------------------------------------------------------- */

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

@font-face {
	font-family: "Work Sans";
	src: url("assets/fonts/work-sans-variable.woff2") format("woff2-variations");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

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

/* Visually hide content but keep it available to screen readers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* Skip link: hidden until focused, then jumps above the header */
.skip-link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	padding: 0.75rem 1.25rem;
	position: absolute;
	left: 0.5rem;
	top: -100px;
	z-index: 100000;
	text-decoration: none;
	border-radius: 4px;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0.5rem;
}

/* Make keyboard focus clearly visible everywhere, beyond browser defaults */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--sage);
	outline-offset: 2px;
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   3. Service / product card grid (used by the card-grid pattern)
   -------------------------------------------------------------------------- */

.act1-card {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--blush);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--30);
	height: 100%;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.act1-card:hover,
.act1-card:focus-within {
	border-color: var(--wp--preset--color--rose);
	transform: translateY(-2px);
}

.act1-card a {
	text-decoration: none;
}

.act1-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.act1-card {
	position: relative;
}


.act1-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   4. FAQ pattern (native Details block) — small visual refinement only
   -------------------------------------------------------------------------- */

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--blush);
	padding-bottom: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   5. Responsive map embed (visit/contact pattern)
   -------------------------------------------------------------------------- */

.act1-map-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: 6px;
}

.act1-map-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   6. Breadcrumbs (core/breadcrumbs block, new in WP 7.0) — small spacing
   -------------------------------------------------------------------------- */

.wp-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--10);
}