/*
Theme Name:   CakeDouce
Theme URI:    https://cakedouce.ca
Description:  Child theme for Blocksy - CakeDouce, Montreal-Est
Author:       Junaid-dev
Template:     blocksy
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  cakedouce
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  --cd-ivoire:       #F7F3EE;
  --cd-sable:        #EDE6DC;
  --cd-noir:         #14110F;
  --cd-encre:        #4A443E;
  --cd-gris:         #8C8478;
  --cd-or:           #C1922E;
  --cd-or-clair:     #E3C173;
  --cd-prune:        #6B2D8F;
  --cd-ligne:        #DED5C8;
  --cd-blanc:        #FFFFFF;

  --cd-font-display: 'Cormorant Garamond', Georgia, serif;
  --cd-font-body:    'Jost', system-ui, -apple-system, sans-serif;

  --cd-shell:        1240px;
  --cd-section-y:    130px;
  --cd-gap:          30px;
}

@media (max-width: 1024px) { :root { --cd-section-y: 90px; } }
@media (max-width: 680px)  { :root { --cd-section-y: 80px; --cd-gap: 22px; } }

/* ============================================================
   2. BASE
   ============================================================ */

body {
  background-color: var(--cd-ivoire);
  color: var(--cd-encre);
  font-family: var(--cd-font-body);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cd-font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: 0.012em;
  color: var(--cd-noir);
}

h3, h4, h5, h6 { font-weight: 400; line-height: 1.25; }

h1 { font-size: clamp(46px, 6.4vw, 88px); }
h2 { font-size: clamp(33px, 4.2vw, 54px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); }
h4 { font-size: 22px; }

p { margin: 0 0 20px; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--cd-or); outline-offset: 4px; }
::selection { background: var(--cd-or-clair); color: var(--cd-noir); }

/* ============================================================
   3. TYPE UTILITIES
   ============================================================ */

.cd-eyebrow {
  font-family: var(--cd-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cd-or);
  line-height: 1.6;
}

.cd-lead   { font-size: 19px; line-height: 1.8; max-width: 46ch; }
.cd-italic { font-family: var(--cd-font-display); font-style: italic; font-size: 22px; color: var(--cd-or); }
.cd-muted  { color: var(--cd-gris); }
.cd-small  { font-size: 13.5px; }

h1 em, h2 em, h3 em,
.cd-accent { font-style: italic; font-weight: 400; color: var(--cd-or); }

/* ============================================================
   4. BUTTONS
   ============================================================ */

.cd-btn,
.cd-btn:visited {
  display: inline-block;
  font-family: var(--cd-font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 34px;
  border: 1px solid var(--cd-noir);
  color: var(--cd-noir);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.cd-btn:hover, .cd-btn:focus { background-color: var(--cd-noir); color: var(--cd-ivoire); }

.cd-btn--solid { background-color: var(--cd-noir); color: var(--cd-ivoire); }
.cd-btn--solid:hover, .cd-btn--solid:focus {
  background-color: var(--cd-or); border-color: var(--cd-or); color: var(--cd-noir);
}

.cd-btn--gold { border-color: var(--cd-or); color: var(--cd-or); background: transparent; }
.cd-btn--gold:hover, .cd-btn--gold:focus {
  background-color: var(--cd-or); border-color: var(--cd-or); color: var(--cd-noir);
}

.cd-btn--light { border-color: rgba(252,248,242,.5); color: #FCF8F2; }
.cd-btn--light:hover, .cd-btn--light:focus {
  background-color: #FCF8F2; border-color: #FCF8F2; color: var(--cd-noir);
}

.cd-link {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cd-or);
  border-bottom: 1px solid rgba(193,146,46,.7);
  padding-bottom: 5px;
  transition: border-color .3s ease, color .3s ease;
}
.cd-link:hover { border-bottom-color: var(--cd-or); color: var(--cd-or-clair); }

/* ============================================================
   5. SURFACES
   ============================================================ */

.cd-bg-sable { background-color: var(--cd-sable); }
.cd-bg-noir  { background-color: var(--cd-noir); color: #C4B9AB; }
.cd-bg-noir h1, .cd-bg-noir h2, .cd-bg-noir h3, .cd-bg-noir h4 { color: #FCF8F2; }
.cd-bg-noir .cd-muted { color: #9E9488; }

.cd-frame { position: relative; }
.cd-frame::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(193,146,46,.28);
  pointer-events: none;
}
@media (max-width: 680px) { .cd-frame::after { inset: 10px; } }

.cd-rule-top { border-top: 1px solid var(--cd-or); }
.cd-hairline { border-bottom: 1px solid var(--cd-ligne); }

.cd-zoom { overflow: hidden; }
.cd-zoom img { transition: transform 1.2s cubic-bezier(.16,.8,.24,1); }
.cd-zoom:hover img { transform: scale(1.05); }

/* ============================================================
   6. SCROLL REVEAL
   ============================================================ */

.cd-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.16,.8,.24,1);
  will-change: opacity, transform;
}
.cd-rv.is-in { opacity: 1; transform: none; }

/* ============================================================
   7. ELEMENTOR RESETS
   ============================================================ */

.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--cd-shell); }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-heading-title { letter-spacing: inherit; }

/* ============================================================
   8. ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cd-rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   9. HEADER — position and states
   ============================================================ */

.ct-header { z-index: 100; }

/* Blocksy paints each row separately - clear those so the
   header element itself controls the colour */
.ct-header [data-row] { background-color: transparent; }

/* Inner pages: solid from the top, sticks while scrolling */
body:not(.home) .ct-header {
  position: sticky;
  top: 0;
  background-color: var(--cd-noir);
}

/* Front page: floats over the hero, transparent until you scroll */
body.home .ct-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  transition: background-color .45s ease, box-shadow .45s ease;
}

body.home.cd-stuck .ct-header {
  background-color: var(--cd-noir);
  box-shadow: 0 1px 0 rgba(193, 146, 46, .32);
}

/* Menu and logo read light in both states, because the header is
   always either dark or sitting on the dark hero */
.ct-header .ct-menu-link,
.ct-header .menu-item > a { color: #EFE4D2; }
.ct-header .menu-item > a:hover { color: var(--cd-or-clair); }