/*
Theme Name: HOL Group
Theme URI: https://holgroup.co.uk
Author: ARD / HOL Group
Author URI: https://holgroup.co.uk
Description: A luxury block theme (Full Site Editing) for HOL Group — a near-black palette with a gold (#c9ac67) accent and the Athelas serif. Built entirely with native Gutenberg blocks. No page builder required.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.24.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: holgroup
Tags: full-site-editing, block-patterns, black, gold, luxury, one-column, custom-colors, custom-logo, custom-menu, editor-style
*/

/*
 * Most styling lives in theme.json (colours, type, spacing, blocks).
 * This file carries only the extras that theme.json can't express:
 * web-font loading and a few small interaction details.
 */

/* -------------------------------------------------------------
   Athelas
   Athelas is served from Adobe Fonts (Typekit). The web project is
   loaded via wp_enqueue_style in functions.php (and add_editor_style
   for the block editor), so no @font-face is needed here. The family
   is referenced in theme.json as "Athelas" with a serif fallback
   stack, and Adobe's CSS registers the matching face.

   If the Adobe web project (kit) ID ever changes, update the single
   URL in functions.php — search for "use.typekit.net".
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   Small interaction details
   ------------------------------------------------------------- */

/* Gold underline reveal on the header navigation */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
	transition: color 0.25s ease;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--primary);
	transition: width 0.3s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
}
.wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* Buttons: subtle lift + gold-to-cream flip */
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Brand + project cards: image zoom on hover */
.holg-card figure img,
.holg-project figure img {
	transition: transform 0.6s ease, opacity 0.4s ease;
	will-change: transform;
}
.holg-card:hover figure img,
.holg-project:hover figure img {
	transform: scale(1.04);
}
.holg-card figure,
.holg-project figure {
	overflow: hidden;
}

/* Gold hairline used as a section divider */
.holg-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--primary);
	opacity: 0.5;
	max-width: 64px;
	margin-inline: 0;
}
.holg-rule.is-centered {
	margin-inline: auto;
}

/* Eyebrow / kicker */
.holg-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.72rem;
	font-weight: 500;
	font-family: var(--wp--preset--font-family--system);
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}
.holg-eyebrow:not(.has-text-align-center)::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 1px;
	margin-right: 0.5em;
	vertical-align: middle;
	background: currentColor;
	opacity: 0.6;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.holg-card figure img,
	.holg-project figure img,
	.wp-block-button__link,
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* -------------------------------------------------------------
   Project gallery (single project — Pods project_gallery field)
   The Pods field outputs a standard WordPress [gallery]; these
   rules make it match the theme: square corners, even gutters,
   gold-tinted captions, and a soft zoom on hover.
   ------------------------------------------------------------- */
.holg-gallery-wrap .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 2rem);
	margin: 0;
}
@media (max-width: 781px) {
	.holg-gallery-wrap .gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.holg-gallery-wrap .gallery {
		grid-template-columns: 1fr;
	}
}
.holg-gallery-wrap .gallery-item {
	margin: 0 !important;
	width: 100% !important;
	overflow: hidden;
}
.holg-gallery-wrap .gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border: 0 !important;
	border-radius: 0;
	transition: transform 0.6s ease;
}
.holg-gallery-wrap .gallery-item:hover img {
	transform: scale(1.04);
}
.holg-gallery-wrap .gallery-caption,
.holg-gallery-wrap .wp-caption-text {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	padding-top: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
	.holg-gallery-wrap .gallery-item img {
		transition: none;
	}
}

/* -------------------------------------------------------------
   Contact enquiry form (.holg-form)
   Also styles common form-plugin fields if you add .holg-form
   to the plugin wrapper.
   ------------------------------------------------------------- */
.holg-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}
.holg-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
@media (max-width: 600px) {
	.holg-form__row {
		grid-template-columns: 1fr;
	}
}
.holg-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.holg-form__field > span,
.holg-form__consent legend {
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.holg-form input,
.holg-form select,
.holg-form textarea {
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid #2a2a2a;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--athelas);
	font-size: 1.0625rem;
	padding: 0.85rem 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.holg-form textarea {
	resize: vertical;
	min-height: 140px;
}
.holg-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--primary) 50%), linear-gradient(135deg, var(--wp--preset--color--primary) 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}
.holg-form input:focus,
.holg-form select:focus,
.holg-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}
.holg-form input::placeholder,
.holg-form textarea::placeholder {
	color: var(--wp--preset--color--muted);
}
.holg-form__consent {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.holg-form__consent legend {
	margin-bottom: 0.75rem;
	padding: 0;
}
.holg-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.holg-check input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2rem;
	accent-color: var(--wp--preset--color--primary);
	flex: none;
}
.holg-form__submit {
	align-self: flex-start;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 1rem 2.5rem;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.holg-form__submit:hover,
.holg-form__submit:focus {
	background: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.holg-form input,
	.holg-form select,
	.holg-form textarea,
	.holg-form__submit {
		transition: none;
	}
}

/* =============================================================
   REFINEMENTS — editorial polish (professional / modern / clean)
   ============================================================= */

/* Global rhythm + niceties */
html { scroll-behavior: smooth; }
::selection { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }

/* Buttons: quiet, letter-spaced, with an elegant outline variant */
.wp-block-button__link {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	padding-block: 1rem;
	padding-inline: 2.4rem;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}
/* On paper sections an outline button reads in ink */
.holg-light .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--paper-ink);
	color: var(--wp--preset--color--paper-ink);
}
.holg-light .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper-ink);
	color: var(--wp--preset--color--paper);
}

/* -------------------------------------------------------------
   Hero — refined gold ring (double hairline) + measured column
   ------------------------------------------------------------- */
.holg-hero { position: relative; overflow: hidden; }
.holg-hero__inner { position: relative; z-index: 2; max-width: 58%; }
.holg-hero__inner .holg-eyebrow { margin-bottom: 1.75rem; display: block; }
.holg-hero__inner h1 { max-width: 15ch; }
.holg-hero__inner p { max-width: 46ch; }
.holg-hero::before {
	content: "";
	position: absolute;
	width: min(44vw, 600px);
	height: min(44vw, 600px);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	top: 12%;
	right: -6%;
	opacity: 0.7;
	pointer-events: none;
}
.holg-hero::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	top: 40%;
	right: 15.5%;
	box-shadow: 0 0 0 6px rgba(201,172,103,0.12);
	pointer-events: none;
}

/* -------------------------------------------------------------
   Our Brands (paper) — quiet grid with hairline separation
   ------------------------------------------------------------- */
.holg-light { --wp--preset--color--muted: #6f685c; }
.holg-light .wp-block-post-title a { color: var(--wp--preset--color--paper-ink); text-decoration: none; }
.holg-light .wp-block-post-title a:hover { color: var(--wp--preset--color--primary-dark); }
.holg-light h2 { letter-spacing: -0.01em; }

.holg-light .wp-block-columns .wp-block-image { margin: 0; }
.holg-brands-logos .wp-block-image img { transition: opacity 0.3s ease; }
.holg-brands-logos .wp-block-image a:hover img { opacity: 0.65; }

/* -------------------------------------------------------------
   What We Do — hairline dividers between capabilities + ring
   ------------------------------------------------------------- */
.holg-whatwedo { position: relative; overflow: hidden; }
.holg-whatwedo > * { position: relative; z-index: 2; }
.holg-whatwedo::before {
	content: "";
	position: absolute;
	width: min(50vw, 680px);
	height: min(50vw, 680px);
	border: 1px solid rgba(244, 239, 228, 0.35);
	border-radius: 50%;
	top: 12%;
	left: -15%;
	pointer-events: none;
}
.holg-whatwedo::after {
	content: "";
	position: absolute;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	bottom: 20%; left: 9%;
	pointer-events: none;
}
.holg-services { max-width: 720px; margin-left: auto; }
.holg-services .holg-service { padding-block: 1.9rem; }
.holg-services .holg-service + .holg-service {
	border-top: 1px solid rgba(201, 172, 103, 0.22);
}
.holg-services .holg-service h3 { transition: color 0.25s ease; }
.holg-services .holg-service:hover h3 { color: var(--wp--preset--color--primary); }

/* -------------------------------------------------------------
   Blog cards (paper)
   ------------------------------------------------------------- */

/* Equal-height cards: the post-template <li> are the grid items, so stretch
   them and let the card fill, with Read More pinned to a common baseline. */
.holg-blog-grid { align-items: stretch; }
.holg-blog-grid > li { display: flex; margin: 0 !important; }
.holg-blog-card { flex: 1 1 auto; display: flex; flex-direction: column; }

/* Three-up that doesn't depend on the WordPress version.
   On 6.5+ core adds is-layout-grid and renders the native grid (the
   column count stays editable in the inspector); this rule then does
   nothing. On older cores / stale cached markup where is-layout-grid is
   absent, this provides the grid so the blog never stacks. */
.wp-block-post-template.holg-blog-grid:not(.is-layout-grid) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
@media (max-width: 1024px) {
	.holg-blog-grid:not(.is-layout-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.holg-blog-grid:not(.is-layout-grid) { grid-template-columns: 1fr; }
}

.holg-blog-card .wp-block-post-author-name,
.holg-blog-card .wp-block-post-date { display: inline; }
.holg-blog-card .wp-block-post-date::before { content: "· "; }
.holg-blog-card .wp-block-read-more {
	display: inline-block;
	align-self: flex-start;
	text-decoration: none;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.72rem;
	font-weight: 600;
	margin-top: auto;
	padding: 0.7rem 1.5rem;
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.holg-blog-card .wp-block-read-more:hover { transform: translateY(-2px); background: var(--wp--preset--color--primary-dark); }

/* -------------------------------------------------------------
   Instagram feed (Smash Balloon) — gold panels to match the theme.
   Loaded from the theme so it always applies (the plugin's own custom-CSS
   box often isn't output on the front end). Scoped to .holg-instagram so it
   only affects the homepage feed. Targets Smash Balloon's stable classes;
   #sbi_images/.sbi_images covers both the ID and class variants across
   plugin versions. If a future SB version renames .sbi_item this needs the
   new class — grab it from View Source.
   ------------------------------------------------------------- */
.holg-instagram #sb_instagram,
.holg-instagram #sb_instagram #sbi_images,
.holg-instagram #sb_instagram .sbi_images { padding: 0 !important; }

/* The feed must fill its container (1280 alignwide), not the 760 content
   width — defeats any constrained-layout cap on the shortcode wrapper. */
.holg-instagram .wp-block-shortcode { max-width: none !important; width: 100% !important; }
.holg-instagram #sb_instagram { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Four equal columns that FILL the wide content area — the plugin sizes items
   small by default, which is what left the feed narrow. The gold border and
   inset padding live on .holg-ig-panel inside each item (sbi/item.php). */
.holg-instagram #sb_instagram #sbi_images,
.holg-instagram #sb_instagram .sbi_images {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--wp--preset--spacing--40) !important;
}
.holg-instagram #sb_instagram .sbi_item {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Photo fills its panel as a square, whether the plugin renders it as an <img>
   or a background image */
.holg-instagram #sb_instagram .sbi_photo_wrap { width: 100% !important; }
.holg-instagram #sb_instagram .sbi_photo {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background-size: cover !important;
	background-position: center !important;
}
/* Pin the photo to fill the square — width alone doesn't work because the
   plugin keeps the <img> at its natural small size; absolute + object-fit does. */
.holg-instagram #sb_instagram .sbi_photo img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	z-index: 0 !important;
}
/* keep the video / carousel play icons above the filled image */
.holg-instagram #sb_instagram .sbi_photo .sbi_playbtn,
.holg-instagram #sb_instagram .sbi_photo .sbi_type_icon,
.holg-instagram #sb_instagram .sbi_photo [class*="icon"] { z-index: 2 !important; }
@media (max-width: 781px) {
	.holg-instagram #sb_instagram #sbi_images,
	.holg-instagram #sb_instagram .sbi_images { grid-template-columns: repeat(2, 1fr) !important; }
}


/* -------------------------------------------------------------
   Mobile: retire the rings, relax measures
   ------------------------------------------------------------- */
@media (max-width: 781px) {
	.holg-hero__inner { max-width: 100%; }
	.holg-hero__inner h1, .holg-hero__inner p { max-width: none; }
	.holg-hero::before, .holg-hero::after,
	.holg-whatwedo::before, .holg-whatwedo::after { display: none; }
	.holg-services { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.holg-instagram .wp-block-column .wp-block-image img,
	.holg-services .holg-service h3,
	.holg-gallery-wrap .gallery-item img { transition: none; }
}


/* -------------------------------------------------------------
   Uniform project tiles (native Query Loop)
   The aspect ratio is enforced here in CSS, so every tile is the
   same height regardless of the image orientation, the WordPress
   version, or the Post Featured Image block's own setting.
   To change the shape, edit the one value below (e.g. 1 / 1 square,
   3 / 2, 16 / 9).
   ------------------------------------------------------------- */
.holg-projects .holg-project .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.holg-projects .holg-project .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}
.holg-projects .holg-project .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.holg-projects .holg-project:hover .wp-block-post-featured-image img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.holg-projects .holg-project .wp-block-post-featured-image img { transition: none; }
}

/* -------------------------------------------------------------
   Interior page headers — subtle ring signature (echoes the hero)
   Applied to the title band of Our Brands / Projects / About /
   Contact so the whole site shares one signature device.
   ------------------------------------------------------------- */
.holg-pagehead { position: relative; overflow: hidden; }
.holg-pagehead > * { position: relative; z-index: 2; }
.holg-pagehead::before {
	content: "";
	position: absolute;
	width: min(34vw, 440px);
	height: min(34vw, 440px);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	top: -42%;
	right: -5%;
	opacity: 0.45;
	pointer-events: none;
}
@media (max-width: 781px) { .holg-pagehead::before { display: none; } }