/*
Theme Name: Dahlonega Golf
Theme URI: https://dahlonegagolf.com
Description: Sand-and-fairway editorial block theme for dahlonegagolf.com -- golf courses, golf communities and course-adjacent real estate in Dahlonega and North Georgia.
Version: 1.0.0
Template: twentytwentyfour
Author: Gold Peach Realty (WDF Factory)
Tags: block-theme, full-site-editing, editorial, golf, real-estate
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --gf-sand:        #F2EBDC;
  --gf-sand-deep:   #E4D9C3;
  --gf-ink:         #12241C;
  --gf-fairway:     #2F5D3F;
  --gf-fairway-dk:  #1D3D29;
  --gf-brass:       #A67C1A;
  --gf-brass-lt:    #C9A143;
  --gf-clay:        #B4552D;
  --gf-muted:       #6B6355;
}

/* ---- Atmosphere: a faint paper grain over the sand base (texture quality) ---- */
body {
  background-color: var(--gf-sand);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.wp-site-blocks { position: relative; z-index: 1; }

/* ---- Typographic character ---- */
h1, h2, h3, .gf-display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}
h1 { font-variation-settings: "SOFT" 0, "WONK" 1; }
body, p, li { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ---- Scale contrast: the H1 dominates, it is not merely bigger ---- */
.entry-content > h1:first-child,
.gf-page-title {
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  line-height: 1.02;
  font-weight: 700;
  color: var(--gf-ink);
  max-width: 18ch;
}

/* ---- Rhythm: sections breathe unevenly, not on a uniform grid ---- */
.entry-content > h2 { margin-top: 3.5rem; margin-bottom: .85rem; font-size: clamp(1.6rem,2.6vw,2.35rem); color: var(--gf-fairway-dk); }
.entry-content > h3 { margin-top: 2.25rem; margin-bottom: .6rem; font-size: clamp(1.2rem,1.8vw,1.5rem); color: var(--gf-ink); }
.entry-content > p  { margin-bottom: 1.15rem; max-width: 68ch; color: #2B2A24; }
.entry-content > ul, .entry-content > ol { max-width: 66ch; margin-bottom: 1.4rem; }
.entry-content li { margin-bottom: .45rem; }

/* ---- Header: layered, sticky, translucent over the grain ---- */
.gf-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,235,220,.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(18,36,28,.10);
}
.gf-header .wp-block-site-title a {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 1.35rem; color: var(--gf-ink); text-decoration: none;
  letter-spacing: -0.02em;
}
.gf-header .wp-block-site-title a:hover { color: var(--gf-fairway); }
.gf-header .wp-block-navigation a {
  font-size: .95rem; color: #2B2A24; text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.gf-header .wp-block-navigation a:hover { color: var(--gf-fairway); border-bottom-color: var(--gf-brass); }
.gf-header .wp-block-navigation a:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gf-brass); outline-offset: 3px; border-radius: 2px;
}

/* ---- Hero: full-bleed photograph, asymmetric card overlapping the fold ---- */
.gf-hero {
  position: relative;
  min-height: clamp(340px, 52vh, 560px);
  display: flex; align-items: flex-end;
  background-image:
    linear-gradient(to top, rgba(18,36,28,.78) 0%, rgba(18,36,28,.28) 45%, rgba(18,36,28,.10) 100%),
    url('/wp-content/uploads/2024/10/Dahlonega-Golf-1536x878.webp');
  background-size: cover;
  background-position: center 58%;
}
.gf-hero__inner {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1rem,4vw,2.5rem) clamp(1.5rem,4vw,3rem);
}
.gf-hero__eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gf-brass-lt);
  border-left: 3px solid var(--gf-brass); padding-left: .7rem; margin-bottom: .6rem;
}
.gf-hero__h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -0.02em;
  color: #FBF7EE; margin: 0 0 .5rem; max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.gf-hero__tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  line-height: 1.25; color: #FBF7EE; margin: 0; max-width: 26ch;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}

/* Content card lifts over the hero -- depth through overlap, not a flat stack */
.gf-canvas {
  position: relative; z-index: 2;
  margin-top: clamp(-4.5rem, -5vw, -2rem);
  background: #FBF7EE;
  border: 1px solid rgba(18,36,28,.08);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 0 0 var(--gf-brass), 0 18px 50px -28px rgba(18,36,28,.45);
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.1rem, 4vw, 3.5rem) clamp(2rem,4vw,3rem);
}

/* ---- GPR call-to-action (the theme's own above-the-fold anchor) ---- */
.gf-cta {
  margin: 2.5rem 0 0;
  background: linear-gradient(135deg, var(--gf-fairway-dk) 0%, #16301F 100%);
  border-left: 5px solid var(--gf-brass);
  padding: clamp(1.25rem,3vw,1.9rem) clamp(1.1rem,3vw,2rem);
  border-radius: 2px;
  box-shadow: 0 14px 34px -24px rgba(18,36,28,.7);
}
.gf-cta p { color: #EDE6D6; margin: 0 0 .85rem; max-width: 62ch; }
.gf-cta a.gf-btn {
  display: inline-block; background: var(--gf-brass); color: #16210F;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  padding: .72rem 1.35rem; border-radius: 2px;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.gf-cta a.gf-btn:hover { background: var(--gf-brass-lt); transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(0,0,0,.6); }
.gf-cta a.gf-tel { color: var(--gf-brass-lt); font-weight: 600; text-decoration: none; margin-left: 1rem; }
.gf-cta a.gf-tel:hover { text-decoration: underline; }

/* ---- FAQ markup carried over from the previous build (div.dg-faq-item) ---- */
.dg-faq-item {
  background: #fff;
  border: 1px solid rgba(18,36,28,.10);
  border-left: 3px solid var(--gf-fairway);
  padding: 1.05rem 1.2rem; margin-bottom: .85rem; border-radius: 2px;
  box-shadow: 0 2px 10px -8px rgba(18,36,28,.5);
}
.dg-faq-item strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.06rem; color: var(--gf-fairway-dk); margin-bottom: .4rem; }
.entry-content a { color: var(--gf-fairway); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--gf-clay); }

/* ---- Blog listing ---- */
.gf-card { background:#fff; border:1px solid rgba(18,36,28,.09); border-radius:2px; padding:1.4rem 1.5rem; box-shadow:0 4px 18px -14px rgba(18,36,28,.5); transition: transform .18s ease, box-shadow .18s ease; }
.gf-card:hover { transform: translateY(-3px); box-shadow:0 16px 34px -22px rgba(18,36,28,.55); }
.gf-card .wp-block-post-title a { font-family:'Fraunces',Georgia,serif; color:var(--gf-ink); text-decoration:none; }
.gf-card .wp-block-post-title a:hover { color: var(--gf-fairway); }

/* ---- Footer (gpr-anchor mu-plugin splices the GPR blurb before </footer>) ---- */
.gf-footer { background: var(--gf-fairway-dk); color: #D9D3C4; margin-top: 3.5rem; }
.gf-footer a { color: var(--gf-brass-lt); }
.gf-footer .wp-block-site-title a { font-family:'Fraunces',Georgia,serif; color:#FBF7EE; text-decoration:none; }
.gf-footer .gpr-anchor { color:#D9D3C4; border-top:1px solid rgba(255,255,255,.14) !important; }
.gf-footer .gpr-anchor a { color: var(--gf-brass-lt); }

/* ---- Accessibility ---- */
.gf-skip {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gf-fairway-dk); color:#fff; padding:.7rem 1.1rem; text-decoration:none;
}
.gf-skip:focus { left:.5rem; top:.5rem; }

@media (max-width: 781px) {
  .gf-canvas { margin-top: -1.5rem; }
  .gf-hero { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}