/* =========================================================
   Clipcottagelistlm.com — Global Stylesheet
   Neo-brutalism aesthetic / Framed-canvas card style
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --charcoal:#1f1d1b;
  --charcoal-soft:#332f2b;
  --orange:#ff5a1f;
  --orange-dark:#c94411;
  --sand:#d8c9a3;
  --sand-light:#ece1c4;
  --cream:#f7f2e7;
  --white:#fffdf8;
  --danger:#b3261e;

  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:40px;
  --space-6:64px;

  --border:3px;
  --shadow-off: 6px;

  --font-head: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-width:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:1.15;
  overflow-wrap:anywhere;
  margin:0 0 var(--space-3);
}

h1{ font-size:clamp(2rem,5vw,3.4rem); }
h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); }
h3{ font-size:1.2rem; }

p{ margin:0 0 var(--space-3); max-width:70ch; }

a{ color:var(--charcoal); overflow-wrap:anywhere; }
a:not(.btn){ text-decoration-thickness:2px; }

ul, ol{ padding-left:1.2em; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:8px; top:-100px; z-index:200;
  background:var(--orange); color:var(--charcoal);
  padding:8px 16px; border:3px solid var(--charcoal); font-weight:800;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }

.container{ max-width:1200px; margin:0 auto; padding:0 var(--space-4); }
.section{ padding:var(--space-6) 0; min-width:0; }
@media (max-width:767px){ .section{ padding:var(--space-5) 0; } }

.section-head{ max-width:70ch; margin-bottom:var(--space-5); }
.eyebrow{
  display:inline-block; font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:0.08em; font-size:0.8rem; color:var(--orange-dark);
  background:var(--sand-light); border:2px solid var(--charcoal);
  padding:4px 10px; margin-bottom:var(--space-3);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-head); font-weight:800;
  text-transform:uppercase; letter-spacing:0.03em; text-decoration:none;
  border:var(--border) solid var(--charcoal); background:var(--cream);
  color:var(--charcoal); padding:12px 24px; cursor:pointer;
  box-shadow:var(--shadow-off) var(--shadow-off) 0 var(--charcoal);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--charcoal); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--charcoal); }
.btn-cta{ background:var(--orange); color:var(--charcoal); }
.btn-outline{ background:var(--cream); color:var(--charcoal); box-shadow:var(--shadow-off) var(--shadow-off) 0 var(--orange); }
.btn-outline:hover{ box-shadow:9px 9px 0 var(--orange); }
.btn-ghost{ background:transparent; box-shadow:none; }
.btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--charcoal); }
.btn-small{ padding:8px 16px; font-size:0.78rem; box-shadow:4px 4px 0 var(--charcoal); }
.btn-small:hover{ box-shadow:6px 6px 0 var(--charcoal); }
.btn-block{ width:100%; text-align:center; }

/* ---------- Header ---------- */
.site-header{
  height:60px; background:var(--cream);
  border-bottom:var(--border) solid var(--charcoal);
}
@media (max-width:767px){ .site-header{ height:50px; } }

.header-inner{
  max-width:1200px; margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); padding:0 var(--space-4); min-width:0;
}

.logo{
  display:flex; align-items:center; gap:var(--space-2);
  text-decoration:none; color:var(--charcoal); font-weight:800;
  min-width:0; flex-shrink:1;
}
.logo-mark{ width:30px; height:30px; flex-shrink:0; border:2px solid var(--charcoal); }
.logo-text{ overflow-wrap:anywhere; font-size:1rem; }
@media (max-width:399px){ .logo-text{ font-size:0.82rem; } }

.site-nav{ min-width:0; }
.site-nav ul{
  display:flex; gap:var(--space-4); list-style:none; margin:0; padding:0;
}
.site-nav a{
  text-decoration:none; font-weight:700; font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap;
}
.site-nav a:hover, .site-nav a:focus-visible{ color:var(--orange-dark); }

.header-actions{ display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:38px; height:38px; background:var(--charcoal);
  border:var(--border) solid var(--charcoal); cursor:pointer; flex-shrink:0;
}
.nav-toggle-bar{ width:18px; height:3px; background:var(--cream); display:block; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:767px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:fixed; top:50px; left:0; right:0; bottom:0;
    background:var(--charcoal); display:none; overflow-y:auto;
    padding:var(--space-5) var(--space-4); z-index:150;
  }
  .site-nav.is-open{ display:block; }
  .site-nav ul{ flex-direction:column; gap:var(--space-4); }
  .site-nav a{ color:var(--cream); font-size:1.3rem; }
  .site-nav a:hover, .site-nav a:focus-visible{ color:var(--orange); }
  .header-actions .btn-cta{ padding:8px 14px; font-size:0.72rem; }
}

/* ---------- Hero ---------- */
.hero{
  background:var(--charcoal); color:var(--cream);
  border-bottom:var(--border) solid var(--charcoal);
  padding:var(--space-6) 0;
}
.hero h1{ color:var(--cream); }
.hero p{ color:var(--sand-light); font-size:1.1rem; max-width:60ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4); }
.hero-actions .btn-outline{ background:transparent; color:var(--cream); border-color:var(--cream); box-shadow:var(--shadow-off) var(--shadow-off) 0 var(--orange); }

.page-hero{
  background:var(--sand); border-bottom:var(--border) solid var(--charcoal);
  padding:var(--space-5) 0;
}

/* ---------- Framed canvas cards ---------- */
.entry-grid, .brand-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-5);
}

.entry, .brand{
  position:relative; min-width:0; padding-top:12px; padding-left:12px;
}
.entry::before, .brand::before{
  content:""; position:absolute; top:12px; left:12px; right:0; bottom:0;
  background:var(--orange); border:var(--border) solid var(--charcoal); z-index:0;
  transition:background .2s ease;
}
@media (max-width:767px){
  .entry::before, .brand::before{ top:8px; left:8px; right:0; bottom:0; }
}

.entry-card, .brand-card{
  position:relative; z-index:1; background:var(--cream);
  border:var(--border) solid var(--charcoal); min-width:0;
  display:flex; flex-direction:column;
  transform:translate(0,0);
  transition:transform .2s ease;
}
.entry:hover .entry-card, .brand:hover .brand-card{ transform:translate(-6px,-6px); }
.entry:hover::before, .brand:hover::before{ background:var(--sand); }

.entry-media, .brand-media{
  border-bottom:var(--border) solid var(--charcoal); overflow:hidden; min-width:0;
}
.entry-media img, .brand-media img{ width:100%; height:190px; object-fit:cover; }

.entry-body, .brand-body{ padding:var(--space-4); min-width:0; }
.entry-body h3, .brand-body h3{ margin-bottom:var(--space-2); }
.entry-body p, .brand-body p{ margin-bottom:var(--space-4); }

.tag-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-4); }
.tag{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.04em; border:2px solid var(--charcoal); padding:3px 8px;
  background:var(--sand-light);
}

.entry-link, .brand-link{
  font-weight:800; text-decoration:none; text-transform:uppercase;
  font-size:0.85rem; letter-spacing:0.03em; border-bottom:3px solid var(--orange);
  padding-bottom:2px; align-self:flex-start;
}
.entry-link:hover, .brand-link:hover{ color:var(--orange-dark); }

.brand-meta{ font-family:var(--font-mono); font-size:0.8rem; color:var(--charcoal-soft); margin-bottom:var(--space-3); }

/* ---------- Stats ---------- */
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-4); margin-top:var(--space-5);
}
.stat{
  min-width:0; background:var(--charcoal); color:var(--cream);
  border:var(--border) solid var(--charcoal);
  box-shadow:var(--shadow-off) var(--shadow-off) 0 var(--orange);
  padding:var(--space-4);
}
.stat-value{
  display:block; font-family:var(--font-head); font-weight:800;
  font-size:2.4rem; color:var(--orange); line-height:1;
}
.stat-label{
  margin:12px 0 0; font-size:0.85rem; color:var(--sand-light);
  text-transform:uppercase; letter-spacing:0.03em;
}

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:var(--border) solid var(--charcoal); margin-bottom:var(--space-4); }
table{ border-collapse:collapse; width:100%; min-width:520px; background:var(--cream); }
th, td{ text-align:left; padding:12px 16px; border-bottom:2px solid var(--charcoal); font-size:0.92rem; }
th{ background:var(--charcoal); color:var(--cream); text-transform:uppercase; letter-spacing:0.03em; font-size:0.8rem; }
tr:last-child td{ border-bottom:none; }

/* ---------- Pros/cons ---------- */
.pros-cons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); margin-bottom:var(--space-4); }
.pros-cons > div{ border:var(--border) solid var(--charcoal); padding:var(--space-4); background:var(--white); min-width:0; }
.pros-cons h3{ margin-bottom:var(--space-3); }
.pros-cons ul{ margin:0; padding-left:1.2em; }
.pros-cons li{ margin-bottom:var(--space-2); }

/* ---------- Callout / checklist ---------- */
.callout{
  border:var(--border) solid var(--charcoal); background:var(--sand);
  padding:var(--space-4); margin-bottom:var(--space-4);
}
.callout h3{ margin-bottom:var(--space-3); }

/* ---------- Related links ---------- */
.related-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-3); list-style:none; margin:0; padding:0;
}
.related-grid a{
  display:block; background:var(--white); border:var(--border) solid var(--charcoal);
  padding:var(--space-3); text-decoration:none; font-weight:700; min-width:0;
}
.related-grid a:hover{ background:var(--sand-light); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; gap:var(--space-4); max-width:640px; min-width:0; }
.form-field{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.form-field label{ font-weight:800; text-transform:uppercase; font-size:0.82rem; letter-spacing:0.03em; }
.form-input{
  font-family:var(--font-body); font-size:1rem; padding:12px;
  border:var(--border) solid var(--charcoal); background:var(--white); color:var(--charcoal);
  min-width:0; width:100%;
}
textarea.form-input{ resize:vertical; min-height:140px; }
.form-input.is-invalid{ border-color:var(--danger); background:#fdeceb; }
.form-error{ color:var(--danger); font-size:0.85rem; min-height:1.2em; }
.form-success{
  border:var(--border) solid var(--charcoal); background:var(--sand);
  padding:var(--space-4); font-weight:700;
}
.form-success[hidden]{ display:none; }
.consent-row{ display:flex; gap:var(--space-2); align-items:flex-start; }
.consent-row input{ margin-top:4px; }

/* ---------- Map block ---------- */
.map-block{
  border:var(--border) solid var(--charcoal); background:
    repeating-linear-gradient(0deg, var(--sand-light) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(90deg, var(--sand-light) 0 2px, transparent 2px 32px),
    var(--sand);
  min-height:260px; position:relative; display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-4);
}
.map-pin{ width:40px; height:52px; }
.map-caption{
  position:absolute; left:var(--space-3); bottom:var(--space-3); right:var(--space-3);
  background:var(--cream); border:2px solid var(--charcoal); padding:8px 12px; font-size:0.85rem;
}

/* ---------- Contact info blocks ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-5); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info{ border:var(--border) solid var(--charcoal); background:var(--white); padding:var(--space-4); min-width:0; }
.contact-info h3{ margin-bottom:var(--space-3); }
.contact-info p{ margin-bottom:var(--space-2); }

/* ---------- Legal pages ---------- */
.legal-section{ margin-bottom:var(--space-5); border-top:2px solid var(--sand); padding-top:var(--space-4); }
.legal-section:first-of-type{ border-top:none; padding-top:0; }
.legal-section h2{ margin-bottom:var(--space-3); }
.legal-section ul{ margin-bottom:var(--space-3); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--charcoal); color:var(--sand-light); border-top:var(--border) solid var(--charcoal); }
.footer-inner{
  max-width:1200px; margin:0 auto; padding:var(--space-6) var(--space-4);
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--space-5); min-width:0;
}
@media (max-width:700px){ .footer-inner{ grid-template-columns:1fr; } }
.footer-col{ min-width:0; }
.footer-brand{ font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--cream); overflow-wrap:anywhere; margin-bottom:var(--space-3); }
.footer-heading{ font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--orange); margin-bottom:var(--space-3); }
.footer-col p{ font-size:0.88rem; margin-bottom:8px; color:var(--sand-light); }
.footer-col a{ color:var(--sand-light); }
.footer-col a:hover, .footer-col a:focus-visible{ color:var(--orange); }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:8px; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--charcoal); color:var(--cream);
  border-top:var(--border) solid var(--orange);
  padding:var(--space-4);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; justify-content:space-between; min-width:0; }
.cookie-text{ flex:1 1 280px; min-width:0; }
.cookie-text p{ margin:0; font-size:0.9rem; color:var(--sand-light); }
.cookie-text a{ color:var(--orange); }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.cookie-preferences{ flex-basis:100%; border-top:2px solid var(--sand); margin-top:var(--space-3); padding-top:var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.cookie-preferences[hidden]{ display:none; }
.cookie-preferences label{ display:flex; align-items:center; gap:8px; font-size:0.88rem; }

/* ---------- Utility ---------- */
.min-w-0{ min-width:0; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }

@media (max-width:399px){
  h1{ font-size:1.8rem; }
  .container{ padding:0 var(--space-3); }
  .stat-value{ font-size:2rem; }
}

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