/*
Theme Name:   The Wears
Theme URI:    https://thewearsband.co.uk
Description:  ACF block theme for The Wears, indie rock trio from Stockport. Every section is a block with named fields; Site Options holds the logo, links, newsletter and footer.
Author:       W Web Design
Author URI:   https://wwebdesign.co.uk
Version:      1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain:  thewears
License:      Proprietary
*/

/* =========================================================================
   1. FONTS: self-hosted, Latin subset only. No request to Google, so no
   visitor IP leaves for a font and nothing needs a cookie notice.
   Anton is the poster face for headings; Barlow (400, 400 italic, 600, 700) for text,
   chosen by Dan over Archivo on 2026-11-03: slightly narrow and industrial,
   which sits with Anton and the mill photos.
   ====================================================================== */
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/anton-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/barlow-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/barlow-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/barlow-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/barlow-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   2. TOKENS, and the contrast each pair was measured at.

   Black and red, at Josh's request after draft one (it was the Atlas orange,
   which read too much like Bevi's site). The red is fine as TEXT on black
   (5.6:1) and black text on it is 5.6:1; on the bone band it is not (3.1:1),
   which is why the bone band swaps in --tw-red-ink for anything red that is read.
   ====================================================================== */
:root {
	/* grounds */
	--tw-black:      #0b0b0c;
	--tw-coal:       #161618;
	--tw-iron:       #232326;
	--tw-bone:       #f4f1ea;

	/* inks */
	--tw-ink:        #f4f1ea;   /* on black 17.9:1, on coal 16.4:1 */
	--tw-ink-soft:   #a8a39a;   /* on black 7.9:1, on coal 7.1:1, on iron 6.1:1 */
	--tw-ink-dark:   #0b0b0c;   /* on bone 17.9:1, on red 5.6:1 */
	--tw-ink-dark-soft: #4a4740; /* on bone 8.6:1 */

	/* accent */
	--tw-red:        #ff3b3b;   /* text on black 5.6:1, on coal 5.1:1; black on it 5.6:1 */
	--tw-red-hi:     #ff6b6b;   /* hover */
	--tw-red-ink:    #b3121b;   /* red as text on bone, 6.2:1 */

	/* edges: a hairline is decoration; a control's edge needs 3:1 */
	--tw-hairline:   #2c2c30;
	--tw-border-ui:  #8a857c;   /* 5.3:1 on black */

	--tw-font-head:  "Anton", "Impact", "Arial Narrow", sans-serif;
	--tw-font-body:  "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tw-measure:    1320px;
	--tw-gutter:     clamp(16px, 4vw, 40px);
	--tw-radius:     4px;
	--tw-header-h:   76px;
}

/* =========================================================================
   3. BASE
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--tw-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--tw-ink);
	background: var(--tw-black);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--tw-font-head);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1;
	color: inherit;
}
h1 { font-size: clamp(3rem, 9vw, 7rem); }
h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h4 { font-size: 1.375rem; }

p { margin: 0 0 1em; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--tw-red); text-underline-offset: .18em; }
a:hover { color: var(--tw-red-hi); }

.thewears-wrap {
	width: 100%;
	max-width: var(--tw-measure);
	margin-inline: auto;
	padding-inline: var(--tw-gutter);
}
.thewears-wrap--narrow { max-width: 860px; }
.thewears-main { display: block; }

/* ---- focus ring: red on dark (5.6:1), black on the light bands ------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--tw-red);
	outline-offset: 3px;
	border-radius: 2px;
}
:where(.thewears-band--bone, .thewears-band--red) :is(a, button, input, [tabindex]):focus-visible {
	outline-color: var(--tw-black);
}

/* ---- visually hidden, and the skip link that reappears on focus -------- */
.thewears-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
a.thewears-sr-only:focus,
a.thewears-sr-only:focus-visible {
	position: fixed !important;
	top: 12px; left: 12px;
	width: auto; height: auto;
	padding: 12px 20px;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	z-index: 10000;
	background: var(--tw-red);
	color: var(--tw-black);
	font-weight: 700;
	text-decoration: none;
}

/* =========================================================================
   4. SECTIONS AND BANDS. A band is a ground AND an ink, never one alone.
   ====================================================================== */
.thewears-section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.thewears-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.thewears-band--black  { background: var(--tw-black); color: var(--tw-ink); }
.thewears-band--coal   { background: var(--tw-coal);  color: var(--tw-ink); }
.thewears-band--bone   { background: var(--tw-bone);  color: var(--tw-ink-dark); }
.thewears-band--red { background: var(--tw-red); color: var(--tw-ink-dark); }

/* Band link colours are scoped to PROSE only, so they never repaint a button. */
.thewears-band--bone :is(p, li, dd, blockquote, .thewears-prose) a:not(.thewears-btn) { color: var(--tw-red-ink); }
.thewears-band--red :is(p, li, dd, blockquote, .thewears-prose) a:not(.thewears-btn) { color: var(--tw-black); }

/* Secondary text follows the band. */
.thewears-soft { color: var(--tw-ink-soft); }
.thewears-band--bone .thewears-soft { color: var(--tw-ink-dark-soft); }
.thewears-band--red .thewears-soft { color: var(--tw-ink-dark); }

/* The small red label above a heading. */
.thewears-kicker {
	display: inline-block;
	margin: 0 0 1rem;
	font-family: var(--tw-font-body);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tw-red);
}
.thewears-band--bone .thewears-kicker { color: var(--tw-red-ink); }
.thewears-band--red .thewears-kicker { color: var(--tw-black); }

.thewears-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.thewears-section__head > :last-child { margin-bottom: 0; }
.thewears-section__title { margin: 0; }
.thewears-section__intro { max-width: 60ch; margin: 1rem 0 0; }

/* =========================================================================
   5. BUTTONS. 48px tall, well past the 24px target floor.
   ====================================================================== */
.thewears-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--tw-radius);
	font-family: var(--tw-font-body);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.thewears-btn--solid { background: var(--tw-red); color: var(--tw-black); }
.thewears-btn--solid:hover { background: var(--tw-red-hi); color: var(--tw-black); }
.thewears-btn--outline { background: transparent; color: var(--tw-ink); border-color: var(--tw-ink); }
.thewears-btn--outline:hover { background: var(--tw-ink); color: var(--tw-black); }
.thewears-band--bone .thewears-btn--outline,
.thewears-band--red .thewears-btn--outline { color: var(--tw-black); border-color: var(--tw-black); }
.thewears-band--bone .thewears-btn--outline:hover,
.thewears-band--red .thewears-btn--outline:hover { background: var(--tw-black); color: var(--tw-bone); }
.thewears-band--red .thewears-btn--solid { background: var(--tw-black); color: var(--tw-bone); }
.thewears-band--red .thewears-btn--solid:hover { background: var(--tw-iron); color: var(--tw-bone); }
.thewears-btn--small { min-height: 40px; padding: .5rem 1rem; font-size: .8125rem; }

.thewears-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =========================================================================
   6. PROSE
   ====================================================================== */
.thewears-prose { max-width: 68ch; }
.thewears-prose > :last-child { margin-bottom: 0; }
.thewears-prose h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 1.5em; }
.thewears-prose h3 { margin-top: 1.5em; }
.thewears-prose ul, .thewears-prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.thewears-prose li { margin-bottom: .4em; }
.thewears-prose strong { font-weight: 700; }
.thewears-prose .lead, .thewears-lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; }

/* =========================================================================
   7. HEADER. Solid and sticky by default; over a hero it starts
   transparent and the hero itself carries the scrim behind it.
   ====================================================================== */
.thewears-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 11, 12, .96);
	border-bottom: 1px solid var(--tw-hairline);
}
.thewears-has-hero .thewears-header {
	position: fixed;
	left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color .25s ease, border-color .25s ease;
}
/* assets/header.js adds is-scrolled once the page moves, so the header is
   still readable over the sections below the hero. Open drawer: same. */
.thewears-has-hero .thewears-header.is-scrolled,
.thewears-has-hero.thewears-drawer-open .thewears-header {
	background: rgba(11, 11, 12, .96);
	border-bottom-color: var(--tw-hairline);
}
.admin-bar .thewears-has-hero .thewears-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .thewears-has-hero .thewears-header { top: 46px; } }

.thewears-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--tw-header-h);
}
.thewears-header__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-right: auto;
	color: var(--tw-ink);
	text-decoration: none;
}
/* Two classes deep: Woo's `.woocommerce img { height: auto }` otherwise wins on
   shop pages and the wordmark renders at its full 1600px width. */
.thewears-header .thewears-header__logo-img { width: auto; height: 34px; max-width: none; }
.thewears-header__name { font-family: var(--tw-font-head); font-size: 1.75rem; text-transform: uppercase; }

.thewears-nav__list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.thewears-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 .85rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tw-ink);
}
.thewears-nav__list a:hover,
.thewears-nav__list .current-menu-item > a,
.thewears-nav__list .current_page_item > a { color: var(--tw-red); }
.thewears-nav__list .sub-menu { display: none; }

.thewears-header__actions { display: flex; align-items: center; gap: .5rem; }

.thewears-basket {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .5rem;
	color: var(--tw-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: .875rem;
}
.thewears-basket:hover { color: var(--tw-red); }
.thewears-basket__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: var(--tw-red);
	color: var(--tw-black);
	font-size: .75rem;
}

.thewears-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px; height: 48px;
	padding: 12px;
	background: transparent;
	border: 0;
	color: var(--tw-ink);
	cursor: pointer;
}
.thewears-burger__bar { display: block; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.thewears-burger[aria-expanded="true"] .thewears-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.thewears-burger[aria-expanded="true"] .thewears-burger__bar:nth-child(2) { opacity: 0; }
.thewears-burger[aria-expanded="true"] .thewears-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The drawer is NOT a modal: no focus trap, closes on Escape and on a link. */
.thewears-drawer {
	position: fixed;
	inset: var(--tw-header-h) 0 0 0;
	z-index: 99;
	background: var(--tw-black);
	padding: 2rem var(--tw-gutter);
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .25s ease;
}
.thewears-drawer.is-open { transform: none; visibility: visible; }
.thewears-drawer__list { list-style: none; margin: 0; padding: 0; }
.thewears-drawer__list a {
	display: block;
	padding: .6rem 0;
	font-family: var(--tw-font-head);
	font-size: clamp(2.25rem, 10vw, 3.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tw-ink);
}
.thewears-drawer__list a:hover, .thewears-drawer__list .current-menu-item > a { color: var(--tw-red); }
.thewears-drawer__social { margin-top: 2rem; }

/* 1024 must match the resize check in assets/header.js. */
/* Below 480px the header holds the logo, basket and burger only: the Tickets
   button would push it past a 320px screen (1.4.10), and Gigs is the first
   item in the menu anyway. */
@media (max-width: 480px) {
	.thewears-header__cta { display: none; }
}
@media (max-width: 1024px) {
	.thewears-nav { display: none; }
	.thewears-burger { display: inline-flex; }
	.thewears-header .thewears-header__logo-img { height: 28px; }
}
@media (min-width: 1025px) {
	.thewears-drawer { display: none !important; }
}

/* =========================================================================
   8. SOCIAL ICON ROW, used in the footer, the drawer and the contact block.
   Each link is 44x44 and named by the platform, with the icon decorative.
   ====================================================================== */
.thewears-social { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.thewears-social a {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 1px solid var(--tw-border-ui);
	border-radius: 999px;
	color: var(--tw-ink);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.thewears-social a:hover { background: var(--tw-red); border-color: var(--tw-red); color: var(--tw-black); }
.thewears-social svg { width: 20px; height: 20px; }
.thewears-band--bone .thewears-social a { color: var(--tw-black); border-color: var(--tw-black); }

/* =========================================================================
   9. FOOTER
   ====================================================================== */
.thewears-footer {
	background: var(--tw-black);
	border-top: 1px solid var(--tw-hairline);
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	font-size: .9375rem;
}
.thewears-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
}
.thewears-footer .thewears-footer__logo { width: 220px; height: auto; margin-bottom: 1.25rem; }
@media (max-width: 640px) { .thewears-footer .thewears-footer__logo { width: 150px; } }
.thewears-footer__title {
	margin: 0 0 1rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tw-red);
}
.thewears-footer__list { list-style: none; margin: 0; padding: 0; }
.thewears-footer__list li { margin-bottom: .35rem; }
.thewears-footer__list a { color: var(--tw-ink); text-decoration: none; display: inline-block; padding: .2rem 0; }
.thewears-footer__list a:hover { color: var(--tw-red); text-decoration: underline; }
.thewears-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tw-hairline);
	color: var(--tw-ink-soft);
	font-size: .875rem;
}
.thewears-footer__legal p { margin: 0; }
.thewears-footer__legal a { color: var(--tw-ink-soft); }
.thewears-footer__legal a:hover { color: var(--tw-red); }
/* Below 860px the brand column takes the full width and the two link columns
   sit side by side under it: one column of everything was a screen and a half
   of footer on a phone. */
@media (max-width: 860px) {
	.thewears-footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem 1.5rem; }
	.thewears-footer__grid > :first-child { grid-column: 1 / -1; }
	.thewears-footer__list a { padding-block: .45rem; }
	.thewears-footer__list li { margin-bottom: 0; }
	.thewears-footer__legal { margin-top: 2rem; }
}
/* The email address is the longest word on the site: footer.php gives it a
   break after the @, and this is the last resort below that at 320px. */
.thewears-footer__list a[href^="mailto:"] { overflow-wrap: break-word; }

/* =========================================================================
   10. FACADES: the click-to-load poster used by the video and music blocks.
   Nothing from YouTube or Spotify loads (and nothing sets a cookie) until
   the visitor asks for it.
   ====================================================================== */
.thewears-facade {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--tw-iron);
	color: var(--tw-ink);
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--tw-radius);
}
.thewears-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .2s ease; opacity: .85; }
.thewears-facade:hover img { transform: scale(1.03); opacity: 1; }
.thewears-facade__play {
	position: absolute;
	left: 50%; top: 50%;
	display: grid;
	place-items: center;
	width: 64px; height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 999px;
	background: var(--tw-red);
	color: var(--tw-black);
	box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.thewears-facade__play svg { width: 26px; height: 26px; margin-left: 3px; }
.thewears-embed iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--tw-radius); }

/* =========================================================================
   11. FALLBACK PAGE TITLE + 404 (pages without theme blocks, Woo, events)
   ====================================================================== */
.thewears-title-bar { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--tw-hairline); }
.thewears-title-bar h1 { margin: 0; font-size: clamp(2.75rem, 7vw, 5.5rem); }
.thewears-page-body { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }