/*
Theme Name: FrameFix Renovations
Theme URI: https://framefix.ca
Author: FrameFix build
Description: Custom classic theme for FrameFix Renovations - window, door and glass contractor in Cochrane, Alberta. Built from the signed-off design handoff. Desktop-accurate at 1440px with a full responsive layer.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: framefix
Tags: custom-theme, contractor, local-business
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Locked to the handoff. Accent text on light is ALWAYS --ff-brass-dark.
   ========================================================================== */
:root {
  /* Ink scale */
  --ff-ink:          #14110E;
  --ff-ink-80:       #2C2823;
  --ff-ink-70:       #3D372E;
  --ff-body:         #4C463D;
  --ff-muted:        #6E6659;
  --ff-muted-light:  #8B8478;

  /* Brass */
  --ff-brass:        #C98F30;  /* fills, rules, stars ONLY */
  --ff-brass-dark:   #8A5F1F;  /* all accent text/links on light - AA 5.1:1 */
  --ff-brass-light:  #E0A945;  /* accent text on dark only */
  /* Large decorative numerals. The design's #E3D6B8 is 1.44:1 on white, which
     fails even the 3:1 large-text bar; this is the same warm tan at 3.04:1. */
  --ff-numeral:      #AD9059;

  /* Surfaces */
  --ff-paper:        #FAF7F1;
  --ff-paper-warm:   #FDFAF4;
  --ff-cream:        #FDF6E8;
  --ff-line:         #EFE9DD;
  --ff-line-strong:  #E7E0D4;
  --ff-white:        #FFFFFF;
  --ff-wash:         #F7F2E8;
  --ff-wash-warm:    #FDF9F0;
  --ff-wash-brass:   #F3E4C6;
  --ff-line-soft:    #F1ECE1;

  /* On dark */
  --ff-on-dark:      #F3EEE4;
  --ff-on-dark-2:    #D6CEC0;
  --ff-on-dark-3:    #B5AC9C;
  --ff-on-dark-4:    #8F877A;
  --ff-on-dark-bar:  #E8E1D4;

  /* WhatsApp */
  --ff-wa:           #25D366;
  --ff-wa-deep:      #0F7A40;
  --ff-wa-ink:       #0A2E1A;

  /* Layout */
  --ff-container:    1240px;
  --ff-gutter:       32px;

  /* Radii */
  --ff-r-pill:       999px;
  --ff-r-panel:      28px;
  --ff-r-card:       24px;
  --ff-r-card-sm:    18px;
  --ff-r-frame:      16px;
  --ff-r-input:      14px;
  --ff-r-chip:       13px;

  /* Shadow */
  --ff-sh-card:      0 2px 4px rgba(20,17,14,.04), 0 28px 56px -28px rgba(20,17,14,.4);
  --ff-sh-hero:      0 2px 6px rgba(20,17,14,.05), 0 40px 80px -40px rgba(20,17,14,.45);
  --ff-sh-float:     0 30px 64px -26px rgba(0,0,0,.62);
  --ff-sh-panel:     0 4px 10px rgba(20,17,14,.06), 0 30px 60px -24px rgba(20,17,14,.4);
  --ff-sh-btn:       0 10px 24px -12px rgba(20,17,14,.5);

  /* Easing */
  --ff-ease:         cubic-bezier(.16,1,.3,1);

  /* Fonts */
  --ff-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ff-white);
  color: var(--ff-ink);
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ff-brass-dark); text-decoration: none; }
a:hover { color: var(--ff-ink); }

img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; font-weight: 800; color: var(--ff-ink); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button { font-family: inherit; }

::selection { background: #F0DCAE; color: var(--ff-ink); }

:focus-visible { outline: 2px solid var(--ff-brass); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   3. TYPE SCALE  (handoff table)
   ========================================================================== */
.ff-h1-hero   { font-size: 66px; font-weight: 800; line-height: 1.03; letter-spacing: -.035em; }
.ff-h1        { font-size: 56px; font-weight: 800; line-height: 1.04; letter-spacing: -.035em; }
.ff-h2        { font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.ff-h2-sub    { font-size: 40px; font-weight: 800; line-height: 1.10; letter-spacing: -.03em; }
.ff-h3        { font-size: 24px; font-weight: 700; line-height: 1.2;  letter-spacing: -.025em; }
.ff-h4        { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }

.ff-lead      { font-size: 19px; font-weight: 400; line-height: 1.6; color: var(--ff-body); }
.ff-body      { font-size: 17px; line-height: 1.65; color: var(--ff-body); }
.ff-body-sm   { font-size: 16.5px; line-height: 1.6; color: var(--ff-body); }
.ff-card-body { font-size: 14.5px; line-height: 1.6; color: var(--ff-muted); }

.ff-meta {
  font-size: 12.5px; font-weight: 700; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase;
}
.ff-meta-sm { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Section overline - brass-dark on light per accessibility fix #1 */
.ff-overline {
  font-size: 11px; font-weight: 700; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ff-brass-dark);
}
.ff-overline--dark { color: var(--ff-brass); }

.ff-quote { font-family: var(--ff-serif); font-style: italic; font-weight: 400; line-height: 1.5; }

/* ==========================================================================
   4. MOTION
   ========================================================================== */
@keyframes ffRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ffAperture { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.ff-rise { animation: ffRise .7s var(--ff-ease) both; }
.ff-rise-1 { animation-delay: .06s; }
.ff-rise-2 { animation-delay: .12s; }
.ff-rise-3 { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .ff-rise { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   5. UTILITIES
   ========================================================================== */
.ff-container { max-width: var(--ff-container); margin-inline: auto; padding-inline: var(--ff-gutter); }
.ff-wrap      { max-width: var(--ff-container); margin-inline: auto; }

.ff-section        { padding: 84px var(--ff-gutter) 100px; }
.ff-section--flush { padding: 0 var(--ff-gutter) 100px; }
.ff-section--head  { padding: 84px var(--ff-gutter) 48px; background: linear-gradient(180deg, var(--ff-paper-warm) 0%, var(--ff-white) 100%); }

.ff-screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.ff-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ff-ink); color: var(--ff-white);
  font-size: 14px; font-weight: 700; padding: 12px 20px;
  border-radius: 0 0 12px 0;
}
.ff-skip:focus { left: 0; color: var(--ff-white); }

/* Fixed-ratio image frames - cover, never stretch */
.ff-frame { position: relative; overflow: hidden; border-radius: var(--ff-r-frame); background: var(--ff-paper); }
.ff-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-frame--service { aspect-ratio: 1.375 / 1; }
.ff-frame--project { aspect-ratio: 1.4615 / 1; }
.ff-frame--journal { aspect-ratio: 1.885 / 1; }
.ff-frame--ba      { aspect-ratio: 16 / 10; }
.ff-frame--hero43  { aspect-ratio: 4 / 3; }

/* Grid helpers */
.ff-grid { display: grid; }
.ff-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ff-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ff-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ff-gap-10 { gap: 10px; } .ff-gap-12 { gap: 12px; } .ff-gap-14 { gap: 14px; }
.ff-gap-18 { gap: 18px; } .ff-gap-20 { gap: 20px; } .ff-gap-26 { gap: 26px; }
.ff-gap-40 { gap: 40px; } .ff-gap-56 { gap: 56px; }