/*
Theme Name: Custom Crafted Child
Theme URI: https://www.customcraftedcc.com/
Description: Custom child theme for Custom Crafted Homes — Cape Cod custom home builder. Built on the Kadence parent theme.
Author: Revenue RX
Author URI: https://www.customcraftedcc.com/
Template: kadence
Version: 0.1.0
Text Domain: customcrafted-child
*/

/* =========================================================================
   Custom Crafted Homes — child theme overrides
   Most styling is controlled by theme.json (global colors, fonts, spacing).
   Use this file for things theme.json can't express: hover states,
   transitions, complex selectors, third-party plugin overrides.
   ========================================================================= */

/* CSS custom properties — mirror what's in theme.json so legacy/non-FSE
   contexts still get the brand tokens. Keep these in sync with tokens.json. */
:root {
  --cc-primary:        #1a2e22;
  --cc-primary-light:  #3d5a47;
  --cc-primary-dark:   #0e1d15;
  --cc-accent:         #bd946f;
  --cc-accent-light:   #d4af89;
  --cc-bg-primary:     #faf9f7;
  --cc-bg-secondary:   #f0ede7;
  --cc-bg-tertiary:    #e3ddd3;
  --cc-text-primary:   #1a1a1a;
  --cc-text-secondary: #4a4a4a;
}

/* Bridge theme.json color slugs that get dropped during Kadence's palette
   merge. Block utility classes (.has-bg-tertiary-color, etc.) reference
   these variables directly — without these definitions, those classes
   resolve to no color. Re-asserting at :root so they always exist. */
:root {
  --wp--preset--color--primary:        #1a2e22;
  --wp--preset--color--primary-light:  #3d5a47;
  --wp--preset--color--primary-dark:   #0e1d15;
  --wp--preset--color--accent:         #bd946f;
  --wp--preset--color--accent-light:   #d4af89;
  --wp--preset--color--bg-primary:     #faf9f7;
  --wp--preset--color--bg-secondary:   #f0ede7;
  --wp--preset--color--bg-tertiary:    #e3ddd3;
  --wp--preset--color--text-primary:   #1a1a1a;
  --wp--preset--color--text-secondary: #4a4a4a;
}

/* Kadence resets body bg to its palette8 and re-asserts h1-h4 with its own
   typography. Re-apply our brand intent with explicit selectors that match
   or exceed Kadence's specificity, scoped to single-page content. */
body {
  background: var(--wp--preset--color--bg-primary);
  color: var(--wp--preset--color--text-primary);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.wp-block-cover h1,
.wp-block-cover h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 400;
  color: inherit;
}

.entry-content h1, .wp-block-cover h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1.05; }
.entry-content h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; }
.entry-content h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; }

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Selection color tied to brand */
::selection { background: var(--cc-primary); color: var(--cc-bg-primary); }

/* ---------- Type refinements (luxury feel) ---------- */
.wp-block-heading,
h1, h2, h3, h4 {
  letter-spacing: -0.01em;
  font-feature-settings: "liga", "kern";
}

h1, h2 { letter-spacing: -0.02em; }

/* ---------- Buttons (Kadence + core) ---------- */
.wp-block-button__link,
.kadence-button {
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.95rem 1.8rem;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.wp-block-button__link:hover,
.kadence-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(26, 46, 34, 0.18);
}

/* ---------- Project (portfolio) cards ---------- */
.cc-project-card {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.cc-project-card img {
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-project-card:hover img { transform: scale(1.04); }

.cc-project-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  color: #fff;
}

.cc-project-card__caption h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.cc-project-card__caption .meta {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Process step (numbered) ---------- */
.cc-process-step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--cc-bg-tertiary);
}

.cc-process-step__num {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--cc-accent);
  font-weight: 400;
}

@media (max-width: 640px) {
  .cc-process-step { grid-template-columns: 1fr; gap: 0.5rem; }
  .cc-process-step__num { font-size: 2.5rem; }
}

/* ---------- Subtle reveal animation for sections ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cc-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms ease, transform 700ms ease;
  }
  .cc-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}