/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Description: A child theme for the Kadence WordPress theme.
Author: Alienity Technologies
Author URI: https://alienity.com/
Template: kadence
Version: 1.0.3
Text Domain: kadence-child
License: GNU General Public License v3.0 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   Garnet Royal Vibrating — Brand System
   Colours derived from the company logo (indigo / sage green / garnet red /
   gold) then brightened for a clean, modern, high-contrast web presentation.
   All styling lives in the child theme so parent (Kadence) and WordPress core
   updates never overwrite it.
   ========================================================================== */

:root {
	/* --- Brand tokens (derived from logo, brightened) --- */
	--grv-indigo:        #3b4694;
	--grv-indigo-dark:   #2c3570;
	--grv-indigo-light:  #6470c4;
	--grv-green:         #2e8b5d;
	--grv-green-dark:    #246e49;
	--grv-brick:         #b23a3a;
	--grv-brick-dark:    #8e2c2c;
	--grv-gold:          #e9b53a;
	--grv-ink:           #1c2030;
	--grv-slate:         #4b5563;
	--grv-muted:         #6b7280;
	--grv-line:          #e3e7f0;
	--grv-bg-soft:       #f4f6fb;
	--grv-bg-softer:     #eef1f9;
	--grv-white:         #ffffff;

	/* --- Map brand onto Kadence's global palette so the whole theme
	       (buttons, links, headings, blocks) adopts it automatically --- */
	--global-palette1: #3b4694; /* primary accent  */
	--global-palette2: #2c3570; /* accent hover    */
	--global-palette3: #1c2030; /* darkest / strong text */
	--global-palette4: #2c3570; /* headings (deep indigo) */
	--global-palette5: #4b5563; /* body text       */
	--global-palette6: #cdd4e4; /* light text / borders */
	--global-palette7: #eef1f9; /* subtle bg       */
	--global-palette8: #f4f6fb; /* lighter bg      */
	--global-palette9: #ffffff; /* base / white    */

	--global-palette-highlight:       #3b4694;
	--global-palette-highlight-alt:   #2c3570;
	--global-palette-highlight-alt2:  #eef1f9;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
	color: var(--grv-slate);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.kt-adv-heading-wrap h1,
.kt-adv-heading-wrap h2 {
	color: var(--grv-indigo-dark);
	font-weight: 800;
	letter-spacing: -0.01em;
}

h1, .entry-title { letter-spacing: -0.02em; line-height: 1.12; }

a { color: var(--grv-indigo); }
a:hover, a:focus { color: var(--grv-green-dark); }

/* Eyebrow / kicker label — small uppercase lead-in used above headings */
.grv-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grv-green);
	margin-bottom: 0.6rem;
}
.grv-eyebrow--gold { color: #b8860b; }

/* Signature gold hairline — echoes the gold outline of the logo ring */
.grv-rule-gold {
	height: 3px;
	width: 64px;
	background: linear-gradient(90deg, var(--grv-gold), var(--grv-brick));
	border: 0;
	border-radius: 3px;
	margin: 0 0 1.25rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.grv-btn,
a.grv-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	border-radius: 6px;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
	border: 2px solid transparent;
}
.grv-btn:hover { transform: translateY(-2px); }

/* Primary call to action — the inquiry action, garnet red so it stands out */
.grv-btn--inquiry,
a.grv-btn--inquiry {
	background: var(--grv-brick);
	color: #fff;
	box-shadow: 0 6px 18px rgba(178, 58, 58, 0.28);
}
.grv-btn--inquiry:hover,
a.grv-btn--inquiry:hover { background: var(--grv-brick-dark); color: #fff; }

/* Secondary — indigo */
.grv-btn--primary,
a.grv-btn--primary {
	background: var(--grv-indigo);
	color: #fff;
}
.grv-btn--primary:hover,
a.grv-btn--primary:hover { background: var(--grv-indigo-dark); color: #fff; }

/* Ghost — outline on light or dark */
.grv-btn--ghost,
a.grv-btn--ghost {
	background: transparent;
	color: var(--grv-indigo);
	border-color: var(--grv-indigo);
}
.grv-btn--ghost:hover,
a.grv-btn--ghost:hover { background: var(--grv-indigo); color: #fff; }
.grv-btn--on-dark { color: #fff; border-color: rgba(255,255,255,.6); }
.grv-btn--on-dark:hover { background: #fff; color: var(--grv-indigo-dark); border-color:#fff; }

/* ==========================================================================
   Section helpers
   ========================================================================== */

.grv-section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.grv-section--soft  { background: var(--grv-bg-soft); }
.grv-section--softer{ background: var(--grv-bg-softer); }
.grv-section--ink   { background: var(--grv-ink); color: #c7ccda; }
.grv-section--ink h1, .grv-section--ink h2, .grv-section--ink h3 { color: #fff; }

/* ==========================================================================
   Trust / certification badges
   ========================================================================== */

.grv-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.grv-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: #fff;
	border: 1px solid var(--grv-line);
	border-left: 3px solid var(--grv-gold);
	border-radius: 6px;
	padding: 0.55rem 0.9rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--grv-ink);
	box-shadow: 0 2px 6px rgba(28, 32, 48, 0.05);
}
.grv-badge--green { border-left-color: var(--grv-green); }
.grv-badge--indigo{ border-left-color: var(--grv-indigo); }

/* Key stats row */
.grv-stat__num {
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 800;
	color: var(--grv-indigo);
	line-height: 1;
}
.grv-stat__label {
	font-size: 0.9rem;
	color: var(--grv-muted);
	margin-top: 0.35rem;
}

/* ==========================================================================
   Product cards (catalogue grid + archive)
   ========================================================================== */

.grv-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--grv-line);
	border-radius: 10px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grv-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(28, 32, 48, 0.12);
	border-color: #cfd6e8;
}
.grv-product-card__media {
	aspect-ratio: 4 / 3;
	background: var(--grv-bg-softer);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.grv-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.grv-product-card__body { padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.grv-product-card__tag {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grv-green-dark);
	background: rgba(46, 139, 93, 0.10);
	padding: 0.2rem 0.55rem;
	border-radius: 4px;
}
.grv-product-card__title { font-size: 1.12rem; font-weight: 800; color: var(--grv-indigo-dark); margin: 0; }
.grv-product-card__title a { color: inherit; text-decoration: none; }
.grv-product-card__title a:hover { color: var(--grv-indigo); }
.grv-product-card__meta { font-size: 0.88rem; color: var(--grv-muted); margin-top: auto; }

/* Category tiles */
.grv-cat-tile {
	display:flex; flex-direction:column; gap:.4rem;
	padding: 1.4rem;
	background:#fff;
	border:1px solid var(--grv-line);
	border-top: 3px solid var(--grv-indigo);
	border-radius: 8px;
	text-decoration:none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.grv-cat-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28,32,48,.10); }
.grv-cat-tile__name { font-weight:800; color:var(--grv-indigo-dark); font-size:1.05rem; }
.grv-cat-tile__desc { font-size:.88rem; color:var(--grv-muted); }

/* ==========================================================================
   Single product — specification table & feature list
   ========================================================================== */

.grv-specs table { width: 100%; border-collapse: collapse; margin: 0; }
.grv-specs table th,
.grv-specs table td {
	text-align: left;
	padding: 0.7rem 1rem;
	border: 1px solid var(--grv-line);
	font-size: 0.95rem;
}
.grv-specs table tr td:first-child {
	width: 38%;
	font-weight: 700;
	color: var(--grv-ink);
	background: var(--grv-bg-soft);
}
.grv-specs table tr:nth-child(even) td:last-child { background: #fbfcfe; }

.grv-features { list-style: none; padding: 0; margin: 0; }
.grv-features li {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.6rem;
	color: var(--grv-slate);
}
.grv-features li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.15rem;
	width: 1.1rem; height: 1.1rem;
	border-radius: 50%;
	background: var(--grv-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/0.8rem no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/0.8rem no-repeat;
}

/* Inquiry strip used on product + landing pages */
.grv-inquiry-strip {
	background: linear-gradient(120deg, var(--grv-indigo-dark), var(--grv-indigo));
	color: #fff;
	border-radius: 12px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.grv-inquiry-strip h2, .grv-inquiry-strip h3 { color: #fff; margin-top: 0; }

/* ==========================================================================
   Header / footer accents
   ========================================================================== */

/* Thin gold signature line under the header */
.site-header { border-bottom: 3px solid var(--grv-gold); }

.site-footer,
.site-footer-wrap .site-footer-row-container-inner {
	background: var(--grv-ink);
	color: #aab2c5;
}
.site-footer a { color: #d6dbe8; }
.site-footer a:hover { color: #fff; }

/* ==========================================================================
   Accessibility & motion
   ========================================================================== */

a:focus-visible,
.grv-btn:focus-visible,
button:focus-visible {
	outline: 3px solid var(--grv-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.grv-btn:hover, .grv-product-card:hover, .grv-cat-tile:hover { transform: none; }
}


/* ==========================================================================
   HOMEPAGE COVER SLIDER — image only
   The Kadence slider at the top of the Home page is a pure photographic
   cover: no headline, no overlay, nothing stacked on top of it. The page
   hero (H1, intro copy, buttons, badges) sits in NORMAL FLOW directly
   below it — see the "HOMEPAGE HERO BAND" block further down.

   Height is set once, on the carousel (--grv-cover-h). Every wrapper Kadence
   puts between the carousel and the <img> is then stretched to fill it and
   the photo is object-fit: cover. Kadence's own markup wraps the photo in a
   fixed 16:9 "intrinsic" ratio box, which is shorter than the cover on
   portrait / phone viewports and used to leave the indigo placeholder
   gradient showing below the photo — this is what removes that band.
   NOTE: every wrapper in the chain must be listed, including the otherwise
   unstyled .kb-gal-image-radius div; a single missing link collapses the
   height:100% chain to zero and the photo disappears entirely.
   ========================================================================== */

body.home .wp-block-kadence-advancedgallery {
	--grv-cover-h: 85vh;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	overflow: hidden;
}

body.home .wp-block-kadence-advancedgallery .kt-blocks-carousel {
	height: var(--grv-cover-h) !important;
	margin-bottom: 0 !important;
	overflow: hidden !important;
}

/* Every layer between the carousel and the photo fills the cover height. */
body.home .wp-block-kadence-advancedgallery .splide__track,
body.home .wp-block-kadence-advancedgallery .splide__list,
body.home .wp-block-kadence-advancedgallery .splide__slide,
body.home .wp-block-kadence-advancedgallery .kadence-blocks-gallery-item,
body.home .wp-block-kadence-advancedgallery .kadence-blocks-gallery-item-inner,
body.home .wp-block-kadence-advancedgallery .kb-gallery-figure,
body.home .wp-block-kadence-advancedgallery .kb-gal-image-radius,
body.home .wp-block-kadence-advancedgallery .kb-gallery-image-contain {
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* The photo itself fills the cover and crops from the centre. */
body.home .wp-block-kadence-advancedgallery .kb-gallery-image-contain img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 0 !important;
}

/* Splide reserves a 30px gutter under the carousel for its dots, which would
   read as a white sliver between the photo and the hero band. Close it and
   float the dots over the bottom of the photo instead. */
body.home .wp-block-kadence-advancedgallery .splide__pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	margin: 0;
	z-index: 2;
}
body.home .wp-block-kadence-advancedgallery .splide__pagination button {
	background: rgba(255, 255, 255, 0.55) !important;
	border-color: transparent !important;
	opacity: 1 !important;
}
body.home .wp-block-kadence-advancedgallery .splide__pagination .is-active button {
	background: #ffffff !important;
}

/* ==========================================================================
   HOMEPAGE HERO BAND — below the cover image
   The hero was previously absolutely positioned ON TOP of the cover slider
   with a dark translucent scrim. The client asked for the cover to be image
   only, so the hero is returned to normal document flow and restyled as a
   light brand-tinted band that matches the other full-width sections.

   These rules deliberately use `body.page.home` (one class more specific
   than the `body.page .grv-hero` dark-cover rules printed from
   functions.php) so they win the cascade without needing to edit the
   parent rule set. Front page only — no other page uses .grv-hero.
   ========================================================================== */

body.page.home .grv-hero {
	position: static;
	display: block;
	min-height: 0;
	overflow: visible;
	background-color: #e9eef8 !important;
	background-image: none;
	border-top: 1px solid #dce2f0 !important;
	border-bottom: 1px solid #dce2f0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	color: var(--grv-slate);
}

/* Kill the dark gradient scrim + dot texture that overlaid the photo. */
body.page.home .grv-hero::before {
	content: none;
	display: none;
}

/* Typography and controls return to their light-background treatment. */
body.page.home .grv-hero h1 { color: var(--grv-indigo-dark); margin-top: 0; }
body.page.home .grv-hero p  { color: var(--grv-slate); }
body.page.home .grv-hero .grv-eyebrow { color: #1c6f44; }
body.page.home .grv-hero .grv-eyebrow::before { background: currentColor; opacity: .6; }

body.page.home .grv-hero .grv-btn--ghost {
	color: var(--grv-indigo);
	border-color: var(--grv-indigo);
}
body.page.home .grv-hero .grv-btn--ghost:hover {
	background: var(--grv-indigo);
	color: #fff;
	border-color: var(--grv-indigo);
}

body.page.home .grv-hero .grv-badge {
	background: #fff;
	color: var(--grv-ink);
	box-shadow: 0 2px 6px rgba(28, 32, 48, 0.05);
	border-top-color: var(--grv-line);
	border-right-color: var(--grv-line);
	border-bottom-color: var(--grv-line);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media screen and (max-width: 800px) {
	/* A landscape machinery photo cropped to 85vh on a portrait phone shows
	   very little of the machine, so the cover is shorter here. Adjust the
	   65vh value if the client wants a taller or shorter phone cover. */
	body.home .wp-block-kadence-advancedgallery { --grv-cover-h: 65vh; }

	.grv-btn, a.grv-btn {
		padding: 8px 12px !important;
		font-size: 14px !important;
	}

	.grv-badge {
		padding: 4px 8px !important;
		font-size: 12px !important;
	}
}