/*
Theme Name: Koi Fencing
Theme URI: https://koifencing.nz
Author: Koi Fencing
Description: Child theme of Astra for Koi Fencing Taupo | Rotorua. Clean, light fencing services site with brand accent.
Version: 1.0.34
Template: astra
Text Domain: koi-scaffolding
*/

/* ===== Koi brand palette ===== */
:root {
	--ast-global-color-0: #2f5aae; /* brand blue - primary */
	--ast-global-color-1: #17406f; /* brand navy - hover */
	--ast-global-color-2: #0f1f33; /* near-black text */
	--ast-global-color-3: #5a6b80; /* muted text */
	--ast-global-color-4: #f4f7fb; /* light bg */
	--ast-global-color-5: #ffffff; /* white */
	--ast-global-color-6: #dfe7f2; /* borders */
	--ast-global-color-7: #e8a41a; /* safety amber accent */
	--ast-global-color-8: #101116; /* footer bg */
	--koi-blue: #2f5aae;
	--koi-blue-dark: #17406f;
	--koi-navy: #0f1f33;
	--koi-amber: #e8a41a;
}

body {
	color: var(--ast-global-color-2);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
a { color: var(--koi-blue); }
a:hover { color: var(--koi-blue-dark); }

/* ===== Buttons / links inherit Astra + brand ===== */
.ast-button, .button, button, input[type=button], input[type=submit],
.wp-block-button__link, .koi-btn {
	background: var(--koi-blue);
	color: #fff;
	transition: background .2s ease;
}
.ast-button:hover, .button:hover, button:hover,
.wp-block-button__link:hover, .koi-btn:hover { background: var(--koi-blue-dark); color:#fff; }
.koi-page a.koi-btn { color: #fff; }
.koi-page a.koi-btn:hover { color: #fff; }

/* ===== Header (custom, brand) ===== */
.koi-header {
	background: #ffffff;
	color: var(--koi-navy);
	box-shadow: 0 2px 10px rgba(15,31,51,.08);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	animation: koiSlideDown .55s cubic-bezier(.22,.95,.36,1) both;
	transition: box-shadow .25s ease;
	position: sticky;
	top: 0;
	z-index: 90;
}
@keyframes koiSlideDown {
	from { opacity: 0; transform: translateY(-18px); }
	to   { opacity: 1; transform: translateY(0); }
}
.koi-header.koi-scrolled { box-shadow: 0 4px 18px rgba(15,31,51,.16); }
.koi-header .koi-brand { display: flex; flex-direction: column; line-height: 1.15; }
.koi-header .koi-brand a { color: var(--koi-navy); text-decoration: none; }
.koi-header .koi-brand .koi-name { font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; }
.koi-header .koi-brand .koi-tag  { font-size: .8rem; color: var(--koi-blue); text-transform: uppercase; letter-spacing: .14em; }
.koi-header .koi-brand .koi-logo { height: 58px; width: auto; max-width: 60vw; display: block; background: #fff; padding: 6px 12px; border-radius: 5px; }
@media (max-width: 600px) {
  .koi-header .koi-brand .koi-logo { height: 42px; }
}
.koi-header .koi-nav ul { display:flex; flex-wrap:wrap; align-items:center; list-style:none; margin:0; padding:0; gap: 22px; }
.koi-header .koi-nav a { position: relative; color: var(--koi-navy); text-decoration:none; font-weight:600; font-size:.95rem; padding: 2px 0; transition: color .2s ease; }
.koi-header .koi-nav a::after {
	content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
	background: var(--koi-blue); border-radius: 2px;
	transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.koi-header .koi-nav a:hover { color: var(--koi-blue); text-decoration: none; }
.koi-header .koi-nav a:hover::after { transform: scaleX(1); }
.koi-header .koi-nav .current-menu-item > a::after { transform: scaleX(1); }
.koi-header .koi-cta { display: flex; align-items:center; gap: 16px; }
@media (max-width: 1199px) {
	.koi-header { position: static; }
}
@media (max-width: 920px) {
	.koi-header .koi-cta { display: none; }
}
.koi-header .koi-phone { color: var(--koi-blue); font-weight:700; text-decoration:none; font-size:1rem; }
.koi-header .koi-phone:hover { color: var(--koi-blue-dark); }
.koi-btn {
	display:inline-block; padding: 10px 20px; border-radius: 4px;
	font-weight:700; text-decoration:none; font-size:.95rem;
	transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.koi-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(47,90,174,.30); }
.koi-header .koi-logo { transition: transform .25s ease; }
.koi-header .koi-brand:hover .koi-logo { transform: scale(1.04); }

/* ===== Footer (custom, brand) ===== */
.koi-footer {
	background: #fff;
	color:#3e4a5c;
	padding: 48px 24px 20px;
	margin-top: 64px;
}
.koi-footer .koi-fgrid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:32px; max-width:1200px; margin:0 auto; }
.koi-footer h4 { color: var(--koi-navy); font-size:1rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; }
.koi-footer ul { list-style:none; margin:0; padding:0; }
.koi-footer ul li { margin-bottom:8px; }
.koi-footer a { color: var(--koi-blue); text-decoration:none; }
.koi-footer a:hover { color: var(--koi-blue-dark); }
.koi-footer .koi-fbrand { font-size:1.3rem; font-weight:800; color: var(--koi-navy); }
.koi-footer .koi-fbottom { text-align:center; margin-top:36px; padding-top:16px; border-top:1px solid #e4e9f2; font-size:.82rem; color:#6b7890; }
.koi-footer-mini { padding: 18px 24px; margin-top: 48px; }
.koi-footer-mini .koi-fbottom { margin-top: 0; padding-top: 0; border-top: 0; }

/* ===== Hero carousel ===== */
.koi-carousel { position: relative; overflow: hidden; min-height: clamp(320px, 42vw, 540px); background: var(--koi-navy); }
.koi-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.koi-slide.active { opacity: 1; }
.koi-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.koi-slide::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(15,31,51,.68) 0%, rgba(15,31,51,.25) 55%, rgba(15,31,51,.05) 100%);
}
.koi-slide-caption {
	position: absolute; left: 6%; bottom: 10%; max-width: 620px; color: #fff; z-index: 2;
}
.koi-slide-logo {
	display: block; height: 64px; width: auto; max-width: min(480px, 70vw);
	background: #fff; padding: 8px 14px; border-radius: 8px;
	box-shadow: 0 10px 30px rgba(15,31,51,.35); margin-bottom: 16px;
}
.koi-slide-caption h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0 0 10px; color: #fff; }
.koi-slide-caption p { font-size: 1.05rem; color: #dbe7f7; margin: 0 0 18px; }
.koi-slide-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.koi-btn-ghost { background: transparent; border: 2px solid #fff; color: #fff; }
.koi-btn-ghost:hover { background: #fff; color: var(--koi-navy); box-shadow: none; }
.koi-car-next, .koi-car-prev {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	background: rgba(255,255,255,.18); border: none; color: #fff; cursor: pointer;
	width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease;
}
.koi-car-next { right: 18px; } .koi-car-prev { left: 18px; }
.koi-car-next:hover, .koi-car-prev:hover { background: var(--koi-blue); }
.koi-car-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.koi-car-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.koi-car-dot.active { background: #fff; }
@media (max-width: 720px) {
	.koi-carousel { min-height: 58vw; }
	.koi-slide-caption { left: 5%; right: 5%; bottom: 8%; }
	.koi-slide-caption p { font-size: .95rem; }
	.koi-slide-logo { display: none; }
	.koi-car-next { right: 10px; } .koi-car-prev { left: 10px; }
}

/* ===== Floating contact popup ===== */
.koi-pop { position: fixed; inset: 0; z-index: 200; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s; }
.koi-pop.open { visibility: visible; opacity: 1; }
.koi-pop-overlay { position: absolute; inset: 0; background: rgba(15,31,51,.55); }
.koi-pop-card {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -46%);
	width: min(480px, calc(100vw - 32px));
	background: #fff; border-radius: 12px; padding: 26px 28px;
	box-shadow: 0 24px 60px rgba(15,31,51,.35);
	transition: transform .25s ease;
	max-height: 90vh; overflow-y: auto;
}
.koi-pop.open .koi-pop-card { transform: translate(-50%, -50%); }
.koi-pop-card h4 { margin: 0 0 4px; font-size: 1.35rem; color: var(--koi-navy); }
.koi-pop-sub { margin: 0 0 18px; color: var(--ast-global-color-3); font-size: .92rem; }
.koi-pop-close {
	position: absolute; top: 12px; right: 14px;
	border: none; background: var(--ast-global-color-4); color: var(--koi-navy);
	width: 30px; height: 30px; border-radius: 50%; font-size: 1.2rem; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.koi-pop-close:hover { background: var(--koi-blue); color: #fff; }
.koi-pop-form .wpforms-field { margin-bottom: 14px; }
.koi-pop-form label.wpforms-field-label { font-weight: 600; color: var(--koi-navy); }
.koi-pop-form input[type=text], .koi-pop-form input[type=tel],
.koi-pop-form input[type=number], .koi-pop-form textarea {
	width: 100%; border: 1px solid var(--ast-global-color-6); border-radius: 6px;
	padding: 10px 12px; font-size: .95rem; background: #fff; color: var(--koi-navy);
}
.koi-pop-form .wpforms-submit {
	background: var(--koi-blue); color: #fff; border: none; border-radius: 6px;
	padding: 12px 22px; font-weight: 700; cursor: pointer; width: 100%;
	transition: transform .18s ease, background .2s ease;
}
.koi-pop-form .wpforms-submit:hover { background: var(--koi-blue-dark); transform: translateY(-2px); }
body.koi-noscroll { overflow: hidden; }
@media (max-width: 560px) {
	.koi-pop-card { padding: 22px 18px; }
}

/* ===== Hide legacy Elementor theme-builder header/footer (replaced by brand header/footer) ===== */
.elementor-location-header,
.elementor-location-footer { display: none !important; }

/* ===== Sections used by rebuilt pages ===== */
#services { scroll-margin-top: 96px; }
.koi-services-banner {
	background: #fff;
	text-align: center;
	padding: 44px 24px;
	color: #000;
	border-bottom: 1px solid #e8ecf3;
}
.koi-services-banner h1 { color: #000; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0; letter-spacing: .01em; }

@keyframes koiFadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}
.koi-services-banner.js-fade,
.koi-section > p.js-fade,
.koi-hero-mini.js-fade {
	opacity: 0;
}
.koi-services-banner.js-fade.koi-in,
.koi-section > p.js-fade.koi-in,
.koi-hero-mini.js-fade.koi-in {
	opacity: 1;
	animation: koiFadeUp .6s ease both;
}
.koi-services-grid.koi-in .koi-card:nth-child(1) { transition-delay: .05s; }
.koi-services-grid.koi-in .koi-card:nth-child(2) { transition-delay: .12s; }
.koi-services-grid.koi-in .koi-card:nth-child(3) { transition-delay: .19s; }
.koi-services-grid.koi-in .koi-card:nth-child(4) { transition-delay: .26s; }
.koi-services-grid.koi-in .koi-card:nth-child(5) { transition-delay: .33s; }
.koi-services-grid.koi-in .koi-card:nth-child(6) { transition-delay: .40s; }
.koi-services-grid.koi-in .koi-card:nth-child(7) { transition-delay: .47s; }
.koi-services-grid.koi-in .koi-card:nth-child(8) { transition-delay: .54s; }
.koi-services-grid.koi-in .koi-card:nth-child(n+9) { transition-delay: .58s; }
@media (max-width: 560px) {
	.koi-services-banner { padding: 30px 16px; }
}
.koi-section { padding: 48px 24px; max-width: 1200px; margin: 0 auto; }
.koi-hero { background: linear-gradient(135deg, var(--koi-blue-dark), var(--koi-blue)); color:#fff; }
.koi-hero h1 { font-size: 2.6rem; line-height:1.1; margin: 0 0 12px; }
.koi-hero p  { font-size: 1.15rem; max-width: 640px; color:#dbe7f7; }

/* ===== Rebuilt page content ===== */
.koi-page { max-width: 1200px; margin: 0 auto; padding: 52px 24px; }

body.home .site-content,
body.home .ast-container,
body.home .ast-separate-container #primary,
body.home article.ast-article-single,
body.home #main,
body.home .entry-content {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

body.home .koi-page { padding-top: 0; }

body.home #content .ast-container { display: block !important; max-width: none !important; }
.koi-page > *:first-child { margin-top: 0; }
.koi-page h1, .koi-page h2 { color: var(--koi-navy); }
.koi-page h2 { font-size: 1.7rem; margin: 30px 0 10px; }
.koi-page h3 { color: var(--koi-blue-dark); font-size: 1.15rem; margin: 0 0 8px; }
.koi-page p { color: #3e4a5c; line-height: 1.6; }
.koi-page ul { margin: 0 0 18px; padding-left: 20px; }
.koi-page li { margin-bottom: 6px; color: #3e4a5c; }
.koi-page a { color: var(--koi-blue); text-decoration: underline; }
.koi-page a:hover { color: var(--koi-blue-dark); }
.koi-lead { font-size: 1.15rem; color: var(--koi-navy); font-weight: 500; max-width: 80ch; }
.koi-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 26px 0; }
.koi-card { border: 1px solid var(--ast-global-color-6); border-radius: 10px; padding: 0; background: #fff; box-shadow: 0 1px 3px rgba(15,31,51,.06); overflow: hidden; }
.koi-card .koi-card-img { display: block; aspect-ratio: 16/10; overflow: hidden; background: #edf2f8; }
.koi-card .koi-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.koi-card .koi-card-body { padding: 18px 22px 20px; }
.koi-card h3 { margin-top: 0; }
.koi-card h3 a { text-decoration: none; }
.koi-card h3 a:hover { color: var(--koi-blue-dark); }
.koi-card p { margin: 0; font-size: .98rem; }
.koi-hero-mini { background: linear-gradient(135deg, var(--koi-blue-dark), var(--koi-blue)); color:#fff; border-radius: 12px; padding: 32px 28px; margin: 30px 0 0; }
.koi-hero-mini p { color: #dbe7f7; max-width: 720px; margin: 0 0 14px; font-size: 1.05rem; }
.koi-hero-mini strong { color: #fff; }
.koi-btn-inline { display: inline-block; margin-top: 6px; text-decoration: none; max-width: fit-content; }
.koi-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 26px 0; }
.koi-project-grid figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--ast-global-color-6); }
.koi-project-grid img { display: block; width: 100%; height: auto; }

/* ===== Koi Fencing additions ===== */
.kf-hero {
	background: linear-gradient(120deg, var(--koi-navy) 0%, var(--koi-blue-dark) 45%, var(--koi-blue) 100%);
	color: #fff;
	padding: 64px 24px;
}
.kf-hero .kf-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 18px; justify-items: start; }
.kf-hero-logo {
	height: clamp(120px, 18vw, 190px);
	width: auto;
	max-width: min(520px, 80vw);
	background: #fff;
	padding: 12px 18px;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.kf-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin: 6px 0 10px; color: #fff; }
.kf-hero p { font-size: 1.12rem; color: #dbe7f7; max-width: 70ch; margin: 0 0 20px; }
.kf-hero .kf-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.kf-hero a.koi-btn { background: var(--koi-amber); color: #101116; text-decoration: none; }
.kf-hero a.koi-btn:hover { background: #c98a0c; color: #101116; }
.kf-hero a.koi-btn-ghost { background: transparent; border: 2px solid #fff; color: #fff; }
.kf-hero a.koi-btn-ghost:hover { background: #fff; color: var(--koi-navy); }
.kf-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.kf-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	font-size: .85rem;
}
.koi-page a.koi-btn,
.kf-hero a.koi-btn { text-decoration: none; }
.koi-card.kf-service { border-top: 4px solid var(--koi-amber); }
.koi-card.kf-service .koi-card-body { padding-top: 20px; }
.kf-service-block { scroll-margin-top: 96px; }
.kf-service-block + .kf-service-block { border-top: 1px solid var(--ast-global-color-6); margin-top: 30px; padding-top: 10px; }
.kf-cta-band {
	background: var(--koi-blue-dark);
	color: #fff;
	padding: 40px 28px;
	border-radius: 12px;
	margin-top: 34px;
}
.kf-cta-band h2 { color: #fff; margin: 0 0 8px; }
.kf-cta-band p { color: #dbe7f7; margin: 0 0 18px; max-width: 70ch; }
.kf-cta-band a.koi-btn { background: var(--koi-amber); color: #101116; text-decoration: none; }
.kf-cta-band a.koi-btn:hover { background: #c98a0c; color: #101116; }
.kf-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 22px 0; }
.kf-contact-card {
	background: #fff;
	border: 1px solid var(--ast-global-color-6);
	border-radius: 10px;
	padding: 20px 22px;
	box-shadow: 0 1px 3px rgba(15,31,51,.06);
}
.kf-contact-card h3 { margin-top: 0; }
.kf-contact-card p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
	.kf-hero { padding: 44px 18px; }
	.kf-hero-logo { height: clamp(100px, 30vw, 150px); }
	.kf-hero p { font-size: 1rem; }
	.kf-cta-band { padding: 30px 22px; }
}