/*
Theme Name: Koi Scaffolding
Theme URI: https://koiscaffolding.co.nz
Author: Koi Scaffolding
Description: Child theme of Astra for Koi Scaffolding Taupo | Rotorua. Clean, light scaffolding services site with brand accent.
Version: 1.0.4
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); }
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; }

/* ===== 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: 38px; width: auto; max-width: 60vw; display: block; background: #fff; padding: 4px 9px; border-radius: 5px; }
@media (max-width: 600px) {
  .koi-header .koi-brand .koi-logo { height: 28px; }
}
.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: 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: var(--koi-navy);
	color:#c6d4ea;
	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:#fff; 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:#c6d4ea; text-decoration:none; }
.koi-footer a:hover { color:#fff; }
.koi-footer .koi-fbrand { font-size:1.3rem; font-weight:800; color:#fff; }
.koi-footer .koi-fbottom { text-align:center; margin-top:36px; padding-top:16px; border-top:1px solid #28405f; font-size:.82rem; color:#8fa6c6; }

/* ===== 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 { height: 44px; margin-bottom: 10px; }
	.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 ===== */
.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; }
.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: 22px; background: #fff; box-shadow: 0 1px 3px rgba(15,31,51,.06); }
.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; }