/*
Theme Name: KC Coastal OnePage
Theme URI: https://example.com/kc-coastal-onepage
Author: OpenAI
Description: Commercial-ready Gutenberg one-page WordPress theme for Kevin Cocklereece Landscape Design & Property Maintenance. Includes fullscreen Vimeo hero support, live Customizer controls, logo-size slider, selectable brand palette, dark/light viewing mode, mobile hamburger navigation, plugin-ready content viewports, and reorderable front-page sections.
Version: 2.0.0
Requires PHP: 7.4
Tested up to: 6.6
Requires at least: 5.9
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kc-coastal-onepage
Tags: one-page, custom-colors, custom-logo, block-patterns, full-site-editing, responsive-layout, editor-style, featured-images
*/

:root {
  --kc-navy: #112B44;
  --kc-olive: #6D7250;
  --kc-sand: #C7B08A;
  --kc-cream: #F3F1EA;
  --kc-ink: #1E2328;
  --kc-muted: #5f6870;
  --kc-row: #ffffff;
  --kc-row-alt: #ebe6dc;
  --kc-header: rgba(243,241,234,.96);
  --kc-footer: #112B44;
  --kc-radius: 22px;
  --kc-shadow: 0 18px 50px rgba(17,43,68,.13);
  --kc-logo-size: 132px;
  --kc-hero-overlay: .55;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--kc-ink);
  background: var(--kc-cream);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
body.kc-dark {
  --kc-cream: #071018;
  --kc-row: #101c26;
  --kc-row-alt: #0b1720;
  --kc-header: rgba(7,16,24,.94);
  --kc-ink: #f4f1ea;
  --kc-muted: #c3cbd0;
  --kc-footer: #050b10;
}
a { color: var(--kc-navy); text-decoration: none; }
body.kc-dark a { color: #d7e8f5; }
img { max-width: 100%; height: auto; display:block; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.kc-site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--kc-header);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17,43,68,.12);
}
.kc-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 22px;
}
.kc-brand img { width: var(--kc-logo-size); max-width: 45vw; }
.kc-main-nav ul { margin:0; padding:0; display:flex; align-items:center; gap:20px; list-style:none; }
.kc-main-nav a { font-weight: 800; letter-spacing:.045em; font-size: 13px; text-transform: uppercase; color: var(--kc-navy); }
body.kc-dark .kc-main-nav a, body.kc-dark .kc-menu-toggle { color: var(--kc-cream); }
.kc-actions { display:flex; align-items:center; gap:10px; }
.kc-menu-toggle { display:none; border:0; background:transparent; font-size:30px; color: var(--kc-navy); cursor:pointer; line-height:1; }
.kc-dark-toggle { width:48px; height:26px; border:0; border-radius:999px; background:var(--kc-navy); padding:3px; cursor:pointer; position:relative; box-shadow: inset 0 0 0 1px rgba(199,176,138,.35); }
.kc-dark-toggle span { display:block; width:20px; height:20px; border-radius:50%; background:#fff4c8; transition: transform .25s ease, background .25s ease; }
body.kc-dark .kc-dark-toggle span { transform: translateX(22px); background:#d9e8ff; }

.kc-hero { min-height: calc(100vh - 72px); position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; background: var(--kc-navy); }
.kc-vimeo-wrap, .kc-hero-image { position:absolute; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.kc-hero-image img { width:100%; height:100%; object-fit:cover; }
.kc-vimeo-wrap iframe { position:absolute; top:50%; left:50%; width:177.78vh; min-width:100vw; height:56.25vw; min-height:100vh; transform:translate(-50%,-50%); border:0; }
.kc-hero::before { content:""; position:absolute; inset:0; background:rgba(17,43,68,var(--kc-hero-overlay,.55)); z-index:-1; }
.kc-hero::after { content:""; position:absolute; inset:auto 0 0; height:160px; background:linear-gradient(transparent, var(--kc-cream)); z-index:-1; opacity:.9; }
.kc-hero-content { max-width: 900px; margin:0 auto; padding:90px 24px; text-align:center; color:#fff; }
.kc-kicker { letter-spacing:.22em; text-transform:uppercase; font-weight:900; color:var(--kc-sand); }
.kc-hero h1 { font-size: clamp(42px, 7vw, 86px); line-height:1; margin:14px 0; letter-spacing:.02em; text-wrap: balance; }
.kc-hero p { font-size: clamp(18px, 2.2vw, 24px); max-width:760px; margin:0 auto 30px; }
.kc-button { display:inline-flex; align-items:center; justify-content:center; background:var(--kc-olive); color:#fff !important; padding:14px 24px; border-radius:999px; font-weight:900; box-shadow:var(--kc-shadow); transition:transform .2s ease, filter .2s ease; }
.kc-button:hover { transform: translateY(-1px); filter: brightness(1.06); }

.kc-section { background:var(--kc-row); padding:88px 20px; }
.kc-section:nth-of-type(even) { background: var(--kc-row-alt); }
.kc-container { max-width: 1180px; margin:0 auto; }
.kc-grid { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap:48px; align-items:center; }
.kc-grid.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.kc-section h2 { color:var(--kc-navy); font-size: clamp(30px, 4vw, 50px); line-height:1.1; margin:0 0 18px; text-wrap: balance; }
body.kc-dark .kc-section h2 { color:#f7f2ec; }
.kc-placeholder, .kc-card { border-radius:var(--kc-radius); background:#fff; box-shadow:var(--kc-shadow); overflow:hidden; }
body.kc-dark .kc-placeholder, body.kc-dark .kc-card { background:#132333; }
.kc-placeholder { min-height:360px; display:grid; place-items:center; color:var(--kc-muted); border:2px dashed rgba(17,43,68,.18); padding:20px; text-align:center; }
.kc-placeholder img { width:100%; height:100%; object-fit:cover; }
.kc-content p { color:var(--kc-muted); }
.kc-video-embed iframe, .kc-plugin-viewport iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:var(--kc-radius); box-shadow:var(--kc-shadow); }
.kc-plugin-viewport { min-height:260px; border-radius:var(--kc-radius); border:2px dashed rgba(17,43,68,.18); padding:28px; background:rgba(255,255,255,.62); }
body.kc-dark .kc-plugin-viewport { background:rgba(19,35,51,.8); }
.kc-contact-box { padding:30px; border-left:6px solid var(--kc-sand); }
.kc-footer { background:var(--kc-footer); color:#f7f2ec; padding:44px 20px; text-align:center; }
.kc-footer a { color:#f7f2ec; }

.wp-block-gallery, .gallery { margin-top: 24px; }
.wp-block-button__link { background: var(--kc-olive); border-radius:999px; }

@media (max-width: 900px) {
  .kc-menu-toggle { display:block; }
  .kc-main-nav { position:absolute; top:100%; left:0; right:0; background:var(--kc-header); border-bottom:1px solid rgba(17,43,68,.12); display:none; }
  .kc-main-nav.is-open { display:block; }
  .kc-main-nav ul { flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 20px; }
  .kc-main-nav li a { display:block; padding:12px 0; }
  .kc-grid, .kc-grid.reverse { grid-template-columns:1fr; }
  .kc-grid.reverse .kc-media { order:-1; }
  .kc-section { padding:70px 20px; }
}