/*
Theme Name: Keller Dickson
Theme URI: https://kellerdickson.com/
Author: Keller Dickson Associates
Author URI: https://kellerdickson.com/
Description: Block theme for Keller Dickson Associates, a general building and electrical contractor in Palo Cedro, CA. Brand navy and silver palette, editable sections built from core blocks, and a "Keller Dickson" pattern category for re-inserting sections.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keller-dickson
Tags: full-site-editing, block-patterns, one-column, custom-logo, editor-style, wide-blocks
*/

/* ---------- Global ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
.wp-site-blocks > * { margin-block-start: 0; }
.kd-main > * { margin-block-start: 0 !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.kd-eyebrow { font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .4em !important; }
.kd-eyebrow:not(.has-text-color) { color: var(--wp--preset--color--silver-dark); }
.kd-section-intro { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }

/* Placeholders: dashed amber boxes so they get noticed and replaced */
.kd-ph-block { background: #fff4e0; color: #8a5300; border: 1px dashed #d98b0b; border-radius: 6px; padding: .7em .9em; font-weight: 500; }

/* ---------- Header ---------- */
.kd-site-header { position: sticky; top: 0; z-index: 50; }
body.admin-bar .kd-site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kd-site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .kd-site-header { top: 0; } }
.kd-header { border-bottom: 1px solid var(--wp--preset--color--line); box-shadow: 0 2px 12px rgba(18, 23, 56, .06); }
.kd-header-right { gap: 1.6rem !important; }
.kd-header-phone { margin: 0; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.kd-header-phone a { color: var(--wp--preset--color--navy); text-decoration: none; padding-left: 24px; background: url(assets/icons/inline-phone.svg) left center / 18px no-repeat; }
.kd-header-cta .wp-block-button__link { padding: .6em 1.1em; font-size: .92rem; box-shadow: 0 4px 14px rgba(30, 39, 94, .3); }
.kd-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--wp--preset--color--silver); text-decoration-thickness: 2px; }
.kd-logo img { height: auto; }
@media (max-width: 1080px) { .kd-header-phone { display: none; } }
@media (max-width: 600px) {
  .kd-header .kd-logo { max-width: 170px; }
  .kd-header-cta { display: none; }
}

/* ---------- Hero ---------- */
.kd-hero { position: relative; overflow: hidden; border-bottom: 6px solid var(--wp--preset--color--silver); }
.kd-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.kd-hero > * { position: relative; }
.kd-hero h1 mark { background: none; -webkit-text-fill-color: transparent; background-image: linear-gradient(180deg, #ffffff, #b4bac4); -webkit-background-clip: text; background-clip: text; }
.kd-lead { color: #c9d0e4; }
.kd-hero .wp-block-button__link { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.kd-hero .is-style-outline .wp-block-button__link { border: 2px solid rgba(255,255,255,.5); box-shadow: none; background: transparent; }
.kd-hero .is-style-outline .wp-block-button__link:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.kd-hero-art img, .kd-holiday-art img { width: 100%; height: auto; }
.kd-hero-art img { filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.kd-badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .95rem; color: #dfe5f2; }
.kd-badges li { padding-left: 28px; background: url(assets/icons/inline-shield.svg) left 2px / 20px no-repeat; }
.kd-badges li + li { background-image: url(assets/icons/inline-pin.svg); }
@media (max-width: 781px) {
  .kd-hero .wp-block-columns { flex-direction: column-reverse; }
  .kd-hero-art { max-width: 300px; margin: 0 auto; }
  .kd-hero-buttons .wp-block-button { width: 100%; }
  .kd-hero-buttons .wp-block-button__link { width: 100%; }
}

/* ---------- Cards (services + why) ---------- */
.kd-cards { gap: 22px !important; }
.kd-cards > * { flex: 0 1 calc((100% - 44px) / 3); margin: 0 !important; }
@media (max-width: 900px) { .kd-cards > * { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 600px) { .kd-cards > * { flex-basis: 100%; } }
.kd-card {
  background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 12px;
  padding: 26px 24px; box-shadow: 0 6px 24px rgba(18, 23, 56, .08);
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.kd-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--wp--preset--color--navy), var(--wp--preset--color--silver)); transition: width .3s; }
.kd-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18, 23, 56, .14); }
.kd-card:hover::before { width: 100%; }
.kd-card > * { margin-top: 0; }
.kd-card h4 { margin: 14px 0 6px; }
.kd-card .kd-card-text { margin: 0; }
.kd-icon, .kd-icon-sm, .kd-why-icon { margin: 0 !important; }
.kd-icon img { width: 52px; height: 52px; }
.kd-icon-sm img { width: 40px; height: 40px; }
.kd-group-title { border-bottom: 2px solid var(--wp--preset--color--line); padding-bottom: .6em; margin-top: var(--wp--preset--spacing--60) !important; margin-bottom: 1.2em !important; gap: .7em !important; align-items: center; }
.kd-group-title-text { margin: 0 !important; }
.kd-why-item { text-align: center; padding: 8px 6px; }
.kd-why-icon img { width: 76px; height: 76px; margin: 0 auto; display: block; }
.kd-why-item h3 { margin: 12px 0 6px; }
.kd-why-item p { margin: 0; }
.kd-why-grid { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; row-gap: 40px !important; }

/* ---------- Holiday lighting ---------- */
.kd-holiday h2 { color: #fff; }
.kd-checklist { list-style: none; padding: 0; display: grid; gap: 12px; color: #d6dbea; }
.kd-checklist li { padding-left: 34px; position: relative; }
.kd-checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(201,206,214,.15) url(assets/icons/inline-check.svg) center / 15px no-repeat; }
.kd-checklist strong { color: #fff; }
.kd-holiday-art img { border-radius: 18px; box-shadow: 0 24px 50px rgba(0,0,0,.4); border: 1px solid rgba(201,206,214,.18); }
.kd-brand { gap: 14px !important; align-items: center; padding: 12px 14px; border: 1.5px dashed rgba(201,206,214,.6); border-radius: 10px; background: rgba(201,206,214,.08); }
.kd-brand p { margin: 0; }
.kd-brand-logo-slot { flex-shrink: 0; width: 96px; height: 40px; display: grid; place-items: center; border: 1.5px dashed rgba(201,206,214,.6); border-radius: 6px; font-size: .75rem; color: var(--wp--preset--color--silver); }
.kd-brand-text strong { color: #ffd28a; }
.kd-brand .wp-block-image img { max-height: 40px; width: auto; }
@media (max-width: 781px) { .kd-holiday .wp-block-columns { flex-direction: column-reverse; } }

/* ---------- About ---------- */
.kd-about-card { border-radius: 12px; border-top: 5px solid var(--wp--preset--color--silver); box-shadow: 0 18px 40px rgba(18, 23, 56, .14); }
.kd-about-card h3 { margin-top: 0; }
.kd-glance-row { border-bottom: 1px solid rgba(255,255,255,.1); padding: 10px 0; margin: 0 !important; gap: 16px !important; }
.kd-glance-row p { margin: 0; }
.kd-glance-key { color: var(--wp--preset--color--navy-300); font-size: .92rem; }
.kd-glance-val { font-weight: 600; text-align: right; }
.kd-full-buttons { margin-top: 24px !important; }
.kd-full-buttons .wp-block-button, .kd-full-buttons .wp-block-button__link { width: 100%; }

/* ---------- CTA band ---------- */
.kd-cta { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.kd-cta-inner { align-items: center; gap: 24px !important; }
.kd-cta h2, .kd-cta p { margin: 0 0 .2em; }
.kd-cta .wp-block-button__link { box-shadow: 0 6px 18px rgba(18,23,56,.3); }
@media (max-width: 600px) { .kd-cta-inner { text-align: center; justify-content: center !important; } }

/* ---------- Contact ---------- */
.kd-info-row { gap: 14px !important; margin-top: 18px !important; }
.kd-info-text { gap: 0 !important; }
.kd-info-text p { margin: 0; }
.kd-info-label { color: var(--wp--preset--color--navy); }
.kd-info-value a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
.kd-info-value a:hover { color: var(--wp--preset--color--navy-600); text-decoration: underline; }
.kd-form-card { border: 1px solid var(--wp--preset--color--line); border-top: 5px solid var(--wp--preset--color--navy); border-radius: 12px; box-shadow: 0 18px 40px rgba(18, 23, 56, .14); }
.kd-form-card h3 { margin-top: 0; }
/* Form plugin styling (WPForms / Contact Form 7) inside the card */
.kd-form-card input[type="text"], .kd-form-card input[type="email"], .kd-form-card input[type="tel"], .kd-form-card select, .kd-form-card textarea {
  width: 100%; max-width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid #cfd6e3; border-radius: 8px;
}
.kd-form-card input[type="submit"], .kd-form-card button[type="submit"] {
  background: var(--wp--preset--color--navy); color: #fff; border: 0; border-radius: 8px; padding: .85em 1.6em; font-weight: 700; cursor: pointer;
}

/* ---------- Footer ---------- */
.kd-footer a { color: #b9bfd6; text-decoration: none; }
.kd-footer a:hover { color: #fff; text-decoration: underline; }
.kd-footer-logo-card { display: inline-block; border-radius: 12px; padding: 12px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.kd-footer-list { list-style: none; padding: 0; }
.kd-footer-list li { margin-bottom: 8px; }
.kd-footer h4 { margin-top: 0; }
.kd-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; margin-top: 30px !important; }
.kd-footer-bottom p { margin: 0; }

/* ---------- Fixes / responsive details ---------- */
.kd-cards { align-items: stretch !important; }
.kd-glance-key { flex: 0 0 auto; white-space: nowrap; }
.kd-glance-val { flex: 1 1 auto; }
@media (max-width: 600px) {
  .kd-header .kd-header-cta { display: none !important; }
}
/* Mobile navigation overlay */
.kd-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }
.kd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.kd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; justify-content: flex-start !important; }
.kd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.15rem; border-bottom: 1px solid var(--wp--preset--color--line); width: 100%; padding: 10px 0; }
.kd-nav .wp-block-navigation__responsive-container.is-menu-open { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; --navigation-layout-align: flex-start; }
.kd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; }
.kd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { justify-content: flex-start !important; align-items: flex-start !important; text-align: left; }