/*
 * Wild Roots CR — shared styling for the Phase 3 interior pages (service,
 * location, about, properties, owner-reviews, contact). Reuses the design
 * tokens and components already defined in site.css (colors, type, buttons,
 * nav, footer) — this file only adds the section patterns those pages need
 * that the homepage doesn't have (breadcrumbs, FAQ, process list, etc).
 */

/* ---- Breadcrumbs ---- */
.breadcrumbs{
  max-width:1100px;
  margin:0 auto;
  padding:130px 5vw 0;
}
.breadcrumbs ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--muted);
}
.breadcrumbs a{
  color:var(--muted);
  transition:color .3s ease;
}
.breadcrumbs a:hover{
  color:var(--gold-lt);
}
.breadcrumbs li[aria-current="page"]{
  color:var(--gold-lt);
}
.crumb-sep{
  color:rgba(168,152,128,.4);
}

/* ---- Page hero (interior pages, no video/photo — text led) ---- */
.page-hero{
  max-width:900px;
  margin:0 auto;
  padding:2.5rem 5vw 3.5rem;
  text-align:left;
}
.page-hero .heading{
  font-size:clamp(2.1rem,4.4vw,3.4rem);
}
.page-hero-intro{
  color:var(--muted);
  font-size:1rem;
  line-height:1.85;
  max-width:680px;
}
.page-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

/* ---- Generic content section wrapper ---- */
.page-section{
  max-width:1100px;
  margin:0 auto;
  padding:3.5rem 5vw;
  border-top:1px solid rgba(201,149,42,.1);
}
.page-section h2{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  margin-bottom:1.2rem;
}
.page-section .body-text{
  max-width:760px;
}
.page-section-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2.5rem;
  margin-top:2rem;
}
.page-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin-top:1.5rem;
}
.page-list li{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.7;
}
.page-list li::before{
  content:"\2014";
  color:var(--gold);
  flex-shrink:0;
}
.page-list-heading{
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:400;
  color:var(--gold-lt);
  margin-bottom:.9rem;
}

/* ---- Process ---- */
.process-section{
  max-width:1100px;
  margin:0 auto;
  padding:3.5rem 5vw;
  border-top:1px solid rgba(201,149,42,.1);
  background:var(--bg-deep);
}
.process-section h2{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  margin-bottom:1.5rem;
}
.process-list{
  list-style:none;
  counter-reset:step;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:1.5rem;
}
.process-list li{
  counter-increment:step;
  border-left:2px solid rgba(201,149,42,.3);
  padding-left:1.1rem;
  font-size:.87rem;
  color:var(--muted);
  line-height:1.7;
}
.process-list li strong{
  display:block;
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--gold-lt);
  font-weight:400;
  margin-bottom:.4rem;
}
.process-list li::before{
  content:counter(step);
  display:block;
  font-family:var(--serif);
  font-size:1.6rem;
  color:rgba(201,149,42,.35);
  margin-bottom:.3rem;
}

/* ---- Areas served ---- */
.areas-served{
  max-width:1100px;
  margin:0 auto;
  padding:3.5rem 5vw;
  border-top:1px solid rgba(201,149,42,.1);
}
.areas-served h2{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  margin-bottom:1rem;
}
.areas-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.5rem;
}
.areas-list a{
  display:inline-block;
  padding:.7rem 1.3rem;
  border:1px solid rgba(201,149,42,.25);
  color:var(--gold-lt);
  font-size:.82rem;
  letter-spacing:.06em;
  border-radius:2px;
  transition:background .3s ease,border-color .3s ease;
}
.areas-list a:hover{
  background:rgba(201,149,42,.08);
  border-color:var(--gold);
}

/* ---- FAQ ---- */
.page-faq{
  max-width:820px;
  margin:0 auto;
  padding:3.5rem 5vw;
  border-top:1px solid rgba(201,149,42,.1);
}
.page-faq h2{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  margin-bottom:1.5rem;
}
.faq-item{
  border-bottom:1px solid rgba(201,149,42,.12);
  padding:1.1rem 0;
}
.faq-item summary{
  cursor:pointer;
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--white);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::before{
  content:"+";
  color:var(--gold);
  margin-right:.7rem;
  font-family:var(--sans);
}
.faq-item[open] summary::before{
  content:"\2212";
}
.faq-item p{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.75;
  margin-top:.8rem;
  padding-left:1.3rem;
}

/* ---- Related links ---- */
.related-links{
  max-width:1100px;
  margin:0 auto;
  padding:3rem 5vw;
  border-top:1px solid rgba(201,149,42,.1);
}
.related-links h2{
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:300;
  margin-bottom:1rem;
  color:var(--gold-lt);
}
.related-links ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 1.6rem;
}
.related-links a{
  font-size:.83rem;
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
.related-links a:hover{
  color:var(--gold-lt);
  border-color:var(--gold-lt);
}

/* ---- CTA band ---- */
.cta-band{
  background:var(--bg-deep);
  border-top:1px solid rgba(201,149,42,.15);
  padding:4rem 5vw;
  text-align:center;
}
.cta-band h2{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  font-weight:300;
  margin-bottom:.8rem;
}
.cta-band p{
  color:var(--muted);
  font-size:.92rem;
  max-width:520px;
  margin:0 auto 2rem;
}
.cta-band-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}

/* ---- Social proof placeholder (no fake reviews) ---- */
.social-proof-placeholder{
  max-width:1100px;
  margin:0 auto;
  padding:2rem 5vw;
  text-align:center;
}
.social-proof-note{
  color:var(--muted);
  font-size:.85rem;
  font-style:italic;
  border:1px dashed rgba(201,149,42,.3);
  border-radius:3px;
  padding:1.2rem 1.5rem;
}
.social-proof-note a{
  color:var(--gold-lt);
}

/* ---- Properties gallery + filters ---- */
.filter-bar{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.filter-bar .fb{
  padding:.45rem 1.2rem;
  background:transparent;
  border:1px solid rgba(201,149,42,.18);
  color:var(--muted);
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:all .3s ease;
}
.filter-bar .fb:hover,
.filter-bar .fb.active{
  background:rgba(201,149,42,.1);
  border-color:var(--gold);
  color:var(--gold-lt);
}
.prop-gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5px;
  background:rgba(201,149,42,.08);
}
.prop-gallery-card{
  position:relative;
  overflow:hidden;
  min-height:320px;
}
.prop-gallery-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.85);
  transition:transform 5s ease;
}
.prop-gallery-card:hover img{
  transform:scale(1.06);
}
.prop-gallery-card[hidden]{
  display:none;
}
@media(max-width:700px){
  .prop-gallery-grid{ grid-template-columns:1fr; }
}

/* ---- Footer sitemap (multi-column) ---- */
.footer-sitemap{
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:2rem;
  align-items:start;
  text-align:left;
}
.footer-col-title{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.9rem;
}
.footer-sitemap .footer-links{
  flex-direction:column;
  gap:.6rem;
}
.footer-copy-bottom{
  max-width:1100px;
  margin:2rem auto 0;
  padding:1.5rem 5vw 0;
  border-top:1px solid rgba(201,149,42,.08);
  text-align:center;
}

/* ---- TODO markers (visually hidden helper, keeps markers out of layout) ---- */
.todo-marker{
  display:none;
}

@media(max-width:900px){
  .process-list{ grid-template-columns:repeat(2,1fr); }
  .page-section-grid{ grid-template-columns:1fr; }
  .footer-sitemap{ grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .process-list{ grid-template-columns:1fr; }
  .footer-sitemap{ grid-template-columns:1fr; }
  .breadcrumbs{ padding-top:118px; }
}