/*
Theme Name: Kadence Child — Slate Custom Co.
Description: Child theme for the Slate Custom Co. demo. Brand layer only (Archivo font + 4-color tokens) painted on top of Kadence's native header/footer/menus and core Gutenberg blocks, so the client can edit every part from the WordPress admin. Parent theme is never edited. v0.2.2: same brand layer is now loaded into the block editor canvas (add_editor_style) so editing is WYSIWYG.
Template: kadence
Version: 0.2.2
Text Domain: kadence-child
*/

/* ============================================================
   Design tokens (spec 5.2): white / deep-navy ink / yellow CTA / light gray
   ============================================================ */
:root {
  --white: #ffffff;
  --ink: #101820;
  --ink-2: #4a545d;
  --yellow: #ffd200;
  --yellow-hover: #f0c400;
  --line: #e4e4df;
  --bg-soft: #f6f6f2;
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --container: 1180px;
}

/* Kadence loads Archivo via Typography settings; reinforce weights/tracking. */
body { font-family: var(--font); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); letter-spacing: -0.02em; }

/* ============================================================
   Header (Kadence native markup, branded)
   ============================================================ */
.site-branding .site-title,
.site-branding .site-title a { color: var(--ink) !important; font-weight: 800 !important; }

.header-navigation .primary-menu-container > ul > li.menu-item > a {
  color: var(--ink);
  font-weight: 700;
}
.header-navigation .primary-menu-container > ul > li.menu-item > a:hover { color: var(--ink); }

/* Contact link styled as the signature yellow pill (menu class: menu-cta).
   Client keeps editing it as a normal menu item in Appearance > Menus. */
.menu-item.menu-cta > a {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border-radius: 999px;
  padding-left: 22px !important;
  padding-right: 22px !important;
  font-weight: 700;
}
.menu-item.menu-cta > a:hover { background: var(--yellow-hover) !important; }

/* ============================================================
   Footer (Kadence native markup, branded dark)
   ============================================================ */
#colophon,
#colophon .site-footer-row-container,
#colophon .site-footer-row-container-inner { background-color: var(--ink) !important; }

#colophon,
#colophon p,
#colophon .footer-widget-area { color: rgba(255, 255, 255, 0.75); }

#colophon a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
#colophon a:hover { color: var(--white); text-decoration: underline; }

#colophon .widget-title,
#colophon .footer-widget-area .widget-title {
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
#colophon .site-info { color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   Core-block section helpers (used in page content)
   ============================================================ */
.slate-container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.slate-section { padding-block: 72px; }
.slate-soft { background: var(--bg-soft); }

.slate-ink { background: var(--ink); }
.slate-ink, .slate-ink :where(h1, h2, h3, p) { color: var(--white); }

.slate-lead { font-size: 1.15rem; color: var(--ink-2); }

/* Photos: thin border to match the mockup's flat, square-container look */
.slate-section img,
.slate-ink img { border: 1px solid var(--line); }

/* Uniform crop box: mixed-ratio photos (portrait + landscape) get cropped into
   one 4/3 frame so cards and image+text rows line up. This is only a DEFAULT —
   selecting any image and setting its "Aspect ratio" in the block sidebar emits
   an inline style (specificity 1000) that overrides this, so each image stays
   individually adjustable. Applies to column images; the map iframe is untouched. */
.slate-section .wp-block-column .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Buttons — two vocabularies applied via block class name */
.wp-block-button.btn-cta .wp-block-button__link {
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--yellow);
  border-radius: 999px;
  font-weight: 700;
  padding: 14px 30px;
}
.wp-block-button.btn-cta .wp-block-button__link:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }

.wp-block-button.btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  padding: 14px 30px;
}
.wp-block-button.btn-ghost .wp-block-button__link:hover { background: var(--ink); color: var(--white); }
.slate-ink .wp-block-button.btn-ghost .wp-block-button__link { color: var(--white); border-color: var(--white); }
.slate-ink .wp-block-button.btn-ghost .wp-block-button__link:hover { background: var(--white); color: var(--ink); }

/* FAQ accordion (core Details block) */
.wp-block-details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.wp-block-details summary { font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.wp-block-details p { color: var(--ink-2); margin-top: 12px; max-width: 64ch; }

/* Spec tables */
.wp-block-table.slate-specs td:first-child { font-weight: 700; width: 40%; background: var(--bg-soft); }
.wp-block-table.slate-specs td { border: 1px solid var(--line); padding: 12px 16px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}