/* =========================================================
   SAE COLLECTIVE — WordPress-only additions
   Loaded after style.css. Keeps the ported template CSS
   untouched so it can be re-synced from the static build.
   ========================================================= */

/* Sidebar category list is <a> in WordPress, <button> in the static template */
.category-list a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0.1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease);
}
.category-list a:hover,
.category-list a.active { color: var(--color-accent); }

/* Pagination renders real links, not buttons */
a.page-btn { text-decoration: none; }
span.page-btn.disabled { opacity: 0.35; cursor: not-allowed; }

/* WordPress core alignment + caption classes inside post/page content */
.post-content .alignleft,
.entry-content .alignleft { float: left; margin: 0 1.5rem 1.2rem 0; max-width: 50%; }
.post-content .alignright,
.entry-content .alignright { float: right; margin: 0 0 1.2rem 1.5rem; max-width: 50%; }
.post-content .aligncenter,
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.post-content .alignwide { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.post-content figcaption {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  text-align: center;
  margin-top: 0.6rem;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.sticky .card-tag::after { content: " · Featured"; }

/* Search form in the sidebar */
.search-form { display: flex; gap: 0.5rem; }
.search-form input[type="search"] {
  flex: 1;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  color: var(--color-text);
  font-size: 0.85rem;
}
.search-form input[type="search"]:focus { outline: none; border-color: var(--color-accent); }
.search-form button {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0 1rem;
  color: var(--color-text-muted);
  transition: all 0.3s var(--ease);
}
.search-form button:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Empty states + 404 */
.no-results { text-align: center; padding: 4rem 0; }
.no-results h2 { margin-bottom: 1rem; }

/* Comments */
.comments-area { margin-top: 3rem; }
.comments-area .comment-list { list-style: none; }
.comments-area .comment-list li { border-bottom: 1px solid var(--color-border); padding: 1.2rem 0; }
.comments-area .comment-author img { border-radius: 50%; margin-right: 0.6rem; vertical-align: middle; }
.comments-area .comment-meta { font-size: 0.8rem; color: var(--color-text-faint); margin-bottom: 0.6rem; }
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  color: var(--color-text);
  margin-bottom: 1rem;
}

/* Admin bar must not hide the fixed header */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* =========================================================
   BLOCK EDITOR INTEROP
   Content is composed from core blocks, so the template's own
   grids have to survive WordPress's generated layout rules.
   ========================================================= */

/* WP adds `:where(.is-layout-flow) > * { margin-block-start: 24px }` at zero
   specificity; inside the template's grids that shifts items out of place. */
.intro-split > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.section-head > *,
.hero-actions > *,
.marquee-track > * { margin-block-start: 0; }

/* core/image ships a bottom margin the template layouts do not expect. */
.intro-split > figure.wp-block-image,
.section-head > figure.wp-block-image { margin-bottom: 0; }
.intro-split > figure.wp-block-image img { display: block; }

/* core/group renders the section/container wrappers — strip the block defaults
   so `.container` and the section paddings stay in charge. */
.wp-block-group.container { max-width: var(--container); margin-inline: auto; }

/* Marquee speed as a class instead of an inline --marquee-duration. */
.marquee-track.marquee-speed-slow   { --marquee-duration: 57s; }
.marquee-track.marquee-speed-normal { --marquee-duration: 38s; }
.marquee-track.marquee-speed-fast   { --marquee-duration: 26s; }

/* Centred eyebrow (CTA band) — was an inline justify-content in the static template. */
.eyebrow-center { justify-content: center; }

/* Marquee Gallery block: grayscale is opt-out. */
.marquee-track.marquee-no-grayscale .marquee-item img { filter: none; }

/* Map Band block: centred intro line (was an inline style in the template). */
.map-intro { text-align: center; margin-bottom: 2rem; }

/* Inquiry Form block */
.sae-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}
.form-msg--error { color: #ff6b6b; }

/* Editor-only notice shown by blocks that need configuration. */
.sae-block-notice {
	padding: 1.2rem 1.4rem;
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.6;
}
.sae-block-notice strong { color: var(--color-text); }

/* =========================================================
   TRUSTINDEX (Widgets for Google Reviews)
   ========================================================= */

/* The plugin wraps its widget in <pre> so wpautop leaves the markup alone, but
   nothing in the plugin's stylesheet resets that element — the browser's
   defaults (monospace, white-space: pre) are inherited by the whole widget,
   because .ti-widget.ti-goog sets `font-family: unset`, i.e. inherit. */
pre.ti-widget {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: inherit;
	white-space: normal;
	tab-size: initial;
}

/* Trustindex ships its own "dark-background" set; keep the section it sits in
   on the template's alternate ground so the cards read as intended. */
.testimonials pre.ti-widget { margin-top: 1rem; }

/* =========================================================
   HEADER SOCIAL ICONS
   Sit to the left of the "Book Now" button. Unlike .header-cta
   (hidden below 560px) these stay visible on mobile, so the studio's
   Instagram is always one tap away. WhatsApp is excluded in the
   template — the floating chat button already covers it.
   ========================================================= */
.header-social {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.header-social a {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	color: var(--color-text);
	font-size: 0.95rem;
	transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.header-social a:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 560px) {
	/* .header-cta disappears here; tighten the row so the icons and the
	   hamburger still fit comfortably. */
	.header-actions { gap: 0.6rem; }
	.header-social { gap: 0.35rem; }
	.header-social a { width: 34px; height: 34px; font-size: 0.85rem; }
}

@media (max-width: 360px) {
	.header-social a { width: 32px; height: 32px; }
}

/* The scroll-to-top button is gone from the markup (it collided with the
   floating WhatsApp button); make sure a stale one can never reappear. */
.back-to-top { display: none !important; }

/* Button block wrapper — the template's .btn is inline-flex, so alignment
   lives on the row around it. */
.sae-button-row { display: flex; margin-top: 2rem; }
.sae-button-row.is-left { justify-content: flex-start; }
.sae-button-row.is-center { justify-content: center; }
.sae-button-row.is-right { justify-content: flex-end; }

/* =========================================================
   STYLE GALLERY (sae/style-gallery)
   Tabs + a grid of example photos per tab, instead of one card
   per style. Tab/panel show-hide is plain JS in main.js; photos
   reuse the sitewide .gallery-item lightbox as-is.
   ========================================================= */
.style-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.8rem;
}
.style-tabs button {
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 20px;
	font-family: var(--font-body);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: var(--color-text-muted);
	transition: all 0.3s var(--ease);
}
.style-tabs button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.style-tabs button.active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.style-panel { display: none; }
.style-panel.active { display: block; }
.style-panel-excerpt {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: 1rem;
}
.style-panel-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
}
@media (max-width: 900px) { .style-panel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .style-panel-grid { grid-template-columns: repeat(2, 1fr); } }
.style-panel-grid .gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius);
	filter: grayscale(100%);
	cursor: zoom-in;
	transition: filter 0.4s var(--ease), transform 0.5s var(--ease);
}
.style-panel-grid .gallery-item:hover img { filter: grayscale(0%); transform: scale(1.03); }

/* =========================================================
   FAQ (sae/faq)
   Native <details>/<summary> — no JS needed to open/close.
   ========================================================= */
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item {
	border-bottom: 1px solid var(--color-border);
	padding: 1.1rem 0;
}
.faq-item summary {
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 1rem;
	letter-spacing: 0.01em;
	color: var(--color-text);
	list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	float: right;
	color: var(--color-accent);
	font-family: var(--font-body);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
	margin-top: 0.8rem;
	font-size: 0.88rem;
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* =========================================================
   READ MORE toggle
   Wrap the extra paragraphs in a Group with className "read-more-body"
   and put a button.read-more-toggle right before it — see main.js.
   ========================================================= */
.read-more-body[hidden] { display: none; }
.read-more-toggle {
	margin-top: 0.6rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.read-more-toggle:hover { opacity: 0.8; }

/* =========================================================
   OWNER SPOTLIGHT (About page)
   The template has no "large stylised quote" outside blog posts
   (.post-content blockquote is scoped to single.php) — same accent-bar
   treatment, available anywhere.
   ========================================================= */
.owner-quote {
	border-left: 3px solid var(--color-accent);
	padding: 0.4rem 0 0.4rem 1.6rem;
	margin: 1.4rem 0 0;
	font-family: var(--font-body);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--color-text);
}
.owner-role {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-faint);
	margin-top: 0.3rem;
}

/* =========================================================
   HERO HEADLINE — desktop scale
   Pages render the headline as <h2> (the eyebrow is the <h1>,
   it carries the location keyword), so they were a step smaller
   than the blog, whose headline really is an <h1>. Match the h1
   scale visually on desktop without touching the heading order.
   Mobile keeps the smaller size — the page has to stay compact there.
   ========================================================= */
@media (min-width: 901px) {
	.hero-content .hero-headline { font-size: clamp(2.6rem, 6vw, 5.2rem); }
	/* The bigger type needs more room, otherwise a headline breaks into
	   four or five short lines inside the old 780px box. */
	.hero-content { max-width: 1040px; }
}

/* =========================================================
   STYLE CARD → LIGHTBOX SLIDESHOW
   A style card that carries photos becomes clickable and opens
   the sitewide lightbox in gallery mode.
   ========================================================= */
.style-card.has-photos { cursor: pointer; }
.style-card.has-photos:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.style-card-count {
	position: absolute;
	top: 1rem; right: 1rem;
	z-index: 1;
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 20px;
	background: rgba(10, 10, 10, 0.72);
	backdrop-filter: blur(4px);
	font-family: var(--font-body);
	font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: #fff;
	opacity: 0; transform: translateY(-4px);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.style-card.has-photos:hover .style-card-count,
.style-card.has-photos:focus-visible .style-card-count { opacity: 1; transform: translateY(0); }
/* Touch devices never hover — keep the badge visible so the card reads as tappable. */
@media (hover: none) {
	.style-card-count { opacity: 1; transform: translateY(0); }
}

/* Lightbox gallery mode: arrows + counter, hidden for single images. */
.lightbox-nav,
.lightbox-counter { display: none; }
.lightbox.is-gallery .lightbox-nav { display: flex; }
.lightbox.is-gallery .lightbox-counter { display: block; }
.lightbox-nav {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px;
	align-items: center; justify-content: center;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.5);
	font-size: 2rem; line-height: 1;
	color: var(--color-text);
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.lightbox-nav:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(10, 10, 10, 0.8); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter {
	position: absolute;
	bottom: 1.6rem; left: 50%; transform: translateX(-50%);
	font-family: var(--font-body);
	font-size: 0.8rem; letter-spacing: 0.14em;
	color: var(--color-text-muted);
}
@media (max-width: 560px) {
	.lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
	.lightbox-prev { left: 0.5rem; }
	.lightbox-next { right: 0.5rem; }
}

/* =========================================================
   HERO BACKGROUND VIDEO
   Sits under .hero::before (the dark gradient, z-index -1), so it
   needs -2. It fades in only once it actually plays — until then
   the Featured Image behind it is what the visitor sees, which is
   also what phones keep, since main.js never loads the file there.
   ========================================================= */
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	opacity: 0;
	transition: opacity 0.9s var(--ease);
	pointer-events: none;
}
.hero-video.is-playing { opacity: 1; }

/* =========================================================
   PHOTO SLIDESHOW (sae/slideshow)
   Stacked photos cross-faded by main.js. The frame keeps its
   aspect ratio so the row never jumps as photos swap.
   ========================================================= */
.photo-slideshow { display: block; text-decoration: none; }
.slideshow-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}
.slideshow-frame.is-portrait { aspect-ratio: 4 / 5; }
.slideshow-frame.is-landscape { aspect-ratio: 4 / 3; }
.slideshow-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s var(--ease), transform 0.6s var(--ease);
}
.slideshow-frame img.is-active { opacity: 1; }
a.photo-slideshow:hover .slideshow-frame img.is-active { transform: scale(1.04); }
.slideshow-label {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	transition: color 0.3s var(--ease);
}
a.photo-slideshow:hover .slideshow-label { color: var(--color-accent); }

/* Merch teaser row on the home page: text column sits vertically centred. */
.merch-teaser { align-items: center; }
@media (max-width: 900px) { .merch-teaser { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .merch-teaser { grid-template-columns: 1fr; } }

/* =========================================================
   MERCH GRID
   Same block as the piercing jewelry case, but merch photos are
   full-body shots — they need three big portrait tiles, not six
   small landscape ones.
   ========================================================= */
.merch-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.merch-grid .jewelry-item img { aspect-ratio: 4 / 5; }
.merch-grid figcaption {
	font-size: 0.72rem;
	padding: 0.7rem 0.8rem;
}
@media (max-width: 900px) { .merch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .merch-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }

/* =========================================================
   STYLE GRID — two up on phones
   With eight styles the old single column made this the longest
   stretch of the tattoo page. The cards are tappable tiles now,
   so two per row reads fine and halves the scroll.
   ========================================================= */
@media (max-width: 560px) {
	.style-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.style-card { aspect-ratio: 3 / 4; }
	.style-card-body { padding: 0.9rem 0.8rem 0.8rem; }
	.style-card-body h3 { font-size: 0.92rem; line-height: 1.25; }
	/* The one-line description does not survive a half-width tile. */
	.style-card-body p { display: none; }
	.style-card-count { top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.6rem; }
}

/* CTA band can carry a second (WhatsApp) button. */
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.cta-actions .btn i { margin-right: 0.45rem; }