/* ==========================================================================
   Encinitas Coworking Co. — shared stylesheet
   Design system locked from the live Squarespace site (computed styles).
   ========================================================================== */

/* ---- Design tokens ---- */
:root{
  --ink:#000000;          /* body + headings */
  --bg:#ffffff;           /* page background */
  --cyan:#b2fdfc;         /* accent: amenities bg + secondary button */
  --cyan-hover:#9bf3f1;
  --navy:#1a3b4f;         /* dark contact strip + footer */
  --muted:#5a6b73;        /* muted text on light bg */
  --line:#e6e6e6;         /* hairlines */
  --link:#aaffff;         /* footer link color (Squarespace accent) */

  --font-head:'Abel', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Helvetica Neue', Arial, sans-serif;

  --maxw:1200px;
  --pad:24px;
  --radius:6px;
  --radius-lg:18px;
}

/* ---- Reset-ish ---- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:19.2px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* Low-specificity heading defaults so component classes always win */
:where(h1,h2,h3,h4){
  font-family:var(--font-head);
  font-weight:400;
  line-height:1.23;
  letter-spacing:.01em;
  margin:0;
}
:where(h1){font-size:clamp(2.5rem,1.5rem + 3.8vw,4rem);}      /* 64px desktop */
:where(h2){font-size:clamp(2.5rem,1.5rem + 3.8vw,4rem);}      /* 64px — section headings */
:where(h3){font-size:clamp(1.7rem,1.3rem + 1.7vw,2.4rem);}   /* 38.4px desktop */
:where(p){margin:0 0 1rem;}

/* ---- Layout helpers ---- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.section{padding:104px 0;}
.section--tight{padding:24px 0 116px;}
.center{text-align:center;}

/* ---- Buttons ---- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
  padding:22px 32px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.btn--dark{background:var(--ink);color:#fff;}
.btn--dark:hover{background:#222;}
.btn--cyan{background:var(--cyan);color:var(--ink);}
.btn--cyan:hover{background:var(--cyan-hover);}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;
}
.site-header .container{
  max-width:none;padding:0 clamp(20px,4vw,64px);
  display:flex;align-items:center;gap:44px;min-height:170px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:161px;height:161px;border-radius:50%;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-family:var(--font-body);font-size:19px;color:var(--ink);
  transition:opacity .15s ease;
}
.nav-links a:hover{opacity:.6;}
.header-cta{margin-left:auto;white-space:nowrap;}

/* Mobile menu toggle */
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:8px;
}
.nav-toggle span{display:block;height:2px;background:var(--ink);margin:6px 0;transition:.25s;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;width:100%;}
.hero img{
  width:100%;height:clamp(300px,28.7vw,450px);object-fit:cover;object-position:center;
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro{padding:104px 0 56px;text-align:center;}
.intro h1{margin-bottom:26px;}
.intro p{max-width:none;margin:0 auto;}

/* ==========================================================================
   Three feature cards
   ========================================================================== */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:156px;
}
.card figure{margin:0;}
.card img{
  width:100%;aspect-ratio:296/272;object-fit:cover;border-radius:var(--radius-lg);
}
.card h3{margin-top:22px;}
a.card h3{display:inline-block;border-bottom:2px solid var(--ink);padding-bottom:2px;}

/* ==========================================================================
   Content page hero (image right, H1 overlap) — Private Office Space
   ========================================================================== */
.page-hero{position:relative;padding:210px 0 96px;overflow:hidden;}
.page-hero__img{position:absolute;top:184px;right:0;width:min(50vw,900px);}
.page-hero__img img{width:100%;height:auto;display:block;}
.page-hero__inner{position:relative;z-index:2;}
.page-hero h1{margin-bottom:44px;white-space:nowrap;}
.page-hero__text{max-width:544px;text-align:center;}
.page-hero__text .btn{display:block;width:fit-content;margin:44px auto 0;}
@media (max-width:900px){
  .page-hero{padding:150px 0 64px;}
  .page-hero h1{white-space:normal;}
  .page-hero__img{position:static;width:100%;margin:36px 0 0;}
  .page-hero__text{max-width:none;}
}

/* ==========================================================================
   Blog index
   ========================================================================== */
.blog-index{padding:190px 0 104px;}
.blog-index__head{text-align:center;margin-bottom:64px;}
.blog-index__head p{max-width:1000px;margin:24px auto 0;}
.blog-cards{display:grid;grid-template-columns:1fr 1fr;gap:64px 54px;}
.blog-card img{width:100%;aspect-ratio:506/338;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:24px;}
.blog-card h2{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.4rem);margin-bottom:16px;line-height:1.15;}
.blog-card h2 a:hover{opacity:.7;}
.blog-card p{margin-bottom:18px;}
.blog-card .read-more{text-decoration:underline;font-weight:500;}
.blog-card .read-more:hover{opacity:.7;}
@media (max-width:900px){
  .blog-index{padding:150px 0 64px;}
  .blog-cards{grid-template-columns:1fr;gap:44px;}
}

/* ==========================================================================
   Blog post
   ========================================================================== */
.post{padding:190px 0 104px;}
.post__head{text-align:center;max-width:1100px;margin:0 auto 48px;padding:0 var(--pad);}
.post__date{font-size:15px;color:var(--muted);margin-bottom:16px;letter-spacing:.02em;}
.post__body{max-width:1000px;margin:0 auto;padding:0 var(--pad);}
.post__body > p{margin:0 0 1.3rem;}
.post__body h2{
  font-family:var(--font-body);font-size:1.05rem;font-weight:700;
  line-height:1.4;letter-spacing:0;margin:1.7rem 0 .25rem;
}
@media (max-width:900px){ .post{padding:150px 0 64px;} }

/* ==========================================================================
   Contact page
   ========================================================================== */
.hero--tall img{height:clamp(360px,32vw,560px);}
.contact-intro{padding:80px 0 8px;text-align:center;}
.contact-intro h1{margin-bottom:28px;}
.contact-intro p{max-width:900px;margin:0 auto;}
.contact-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:start;
  padding:56px 0 104px;
}
.contact-cols__img{width:100%;aspect-ratio:544/725;object-fit:cover;border-radius:var(--radius-lg);}
/* GHL form swap-point (placeholder styling until the embed is dropped in) */
.form-embed .field{margin-bottom:18px;}
.form-embed .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-embed label{display:block;font-size:15px;margin-bottom:6px;color:var(--muted);}
.form-embed input,.form-embed textarea{
  width:100%;padding:13px 14px;border:1px solid #cfd6da;border-radius:var(--radius);
  font-family:var(--font-body);font-size:16px;background:#fff;
}
.form-embed textarea{min-height:130px;resize:vertical;}
.form-embed .btn{margin-top:6px;}
@media (max-width:900px){
  .contact-cols{grid-template-columns:1fr;gap:36px;}
}

/* ==========================================================================
   Gallery page
   ========================================================================== */
.gallery-section{padding:200px 0 104px;}
.gallery-section h1{margin-bottom:56px;}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;}
.gallery-grid img{width:100%;aspect-ratio:578/435;object-fit:cover;border-radius:var(--radius-lg);}
@media (max-width:900px){
  .gallery-section{padding:150px 0 64px;}
  .gallery-grid{grid-template-columns:1fr;gap:28px;}
}

/* ==========================================================================
   Amenities
   ========================================================================== */
.amenities{background:var(--cyan);}
.amenities h2{text-align:center;margin-bottom:64px;}
.amenity-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:52px 24px;
}
.amenity{text-align:center;}
.amenity img{
  width:136px;height:136px;border-radius:50%;background:#fff;margin:0 auto 16px;
  object-fit:cover;
}
.amenity span{font-family:var(--font-body);font-size:17px;}
.amenities .btn-wrap{text-align:center;margin-top:60px;}

/* ==========================================================================
   About (image + text)
   ========================================================================== */
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:start;
}
.about-grid img{width:100%;aspect-ratio:544/608;border-radius:var(--radius-lg);object-fit:cover;}
.about-text h3{margin-bottom:20px;}
.about-text .btn{display:block;width:fit-content;margin:18px auto 0;}

/* ==========================================================================
   Contact strip (dark)
   ========================================================================== */
.contact-strip{background:var(--navy);color:#fff;}
.contact-strip .container{
  display:grid;grid-template-columns:auto auto;justify-content:center;gap:96px;
  padding-top:64px;padding-bottom:64px;
}
.contact-strip .addr{font-family:var(--font-head);font-size:clamp(1.9rem,1.3rem + 1.7vw,2.4rem);line-height:1.3;}
.contact-strip .hours h4{font-size:1.15rem;margin-bottom:6px;}
.contact-strip .hours p{margin:0;color:#dfe6ea;}

/* ---- Map ---- */
.map-embed{line-height:0;min-height:420px;background:#dfe6ea;}
.map-embed iframe{width:100%;height:420px;border:0;display:block;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy);color:#fff;}
.site-footer .container{
  max-width:1080px;
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;
  padding-top:56px;padding-bottom:32px;
}
.site-footer .f-logo img{width:172px;height:172px;border-radius:50%;}
.site-footer .f-addr{text-align:center;line-height:1.7;}
.site-footer .f-nav{display:flex;flex-direction:column;gap:14px;text-align:right;}
.site-footer .f-nav a{color:var(--link);text-decoration:underline;}
.site-footer .f-nav a:hover{opacity:.7;}
.credit{
  text-align:center;font-size:14px;color:#c4ced3;
  padding:0 0 30px;
}
.credit a{color:var(--link);text-decoration:underline;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:32px;}
  .amenity-grid{grid-template-columns:repeat(2,1fr);gap:38px 20px;}
  .contact-strip .container{grid-template-columns:1fr;text-align:center;}
  .cards{grid-template-columns:1fr;max-width:440px;margin:0 auto;gap:32px;}
  .site-footer .container{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;}
  .site-footer .f-nav{text-align:center;align-items:center;}
}
@media (max-width:720px){
  .nav-links, .header-cta{
    display:none;position:absolute;top:110px;left:0;right:0;
    background:#fff;flex-direction:column;padding:18px var(--pad);
    box-shadow:0 12px 24px rgba(0,0,0,.08);gap:18px;
  }
  .site-header.open .nav-links{display:flex;}
  .site-header.open .header-cta{display:block;text-align:center;top:auto;position:static;box-shadow:none;padding:0;margin-left:0;}
  .site-header.open .nav-links{padding-bottom:8px;}
  .nav-toggle{display:block;margin-left:auto;}
  .site-header .container{min-height:104px;}
  .brand img{width:88px;height:88px;}
}