/* =========================
   Design Computer — styles.css (v3, cleaned)
   ========================= */

/* Theme tokens */
:root{
  --teal:#2f6f6d;
  --teal-ink:#e6f0ef;
  --ink:#1a1a1a;
  --muted:#666;
  --ring:#ddd;
  --bg:#fff;
  --max:900px;          /* text column width */
}

/* Reset-ish */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Layout helpers */
.wrap{ max-width:1200px; margin:0 auto; padding:0 16px }
.narrow{ max-width:var(--max) }

/* =========================
   Header + Nav
   ========================= */
.site-header{
  border-bottom:2px solid #000;
  background:#fff;
  position:sticky; top:0; z-index:20;
}
.site-header .wrap{
  display:flex; align-items:center; gap:20px;
  padding:10px 16px;
}
.brand img{ width:393px; height:auto; display:block }   /* fixed visual width */
@media (max-width:420px){ .brand img{ width:260px } }   /* scale down on tiny screens */

.nav-toggle{
  display:none; background:none;
  border:1px solid var(--ring);
  padding:.4rem .6rem; border-radius:6px;
}
.site-nav{ margin-left:auto; display:flex; gap:24px }
.site-nav a{
  text-decoration:none; color:#111;
  padding:8px 4px; border-bottom:2px solid transparent;
}
.site-nav a.active{ border-color:#111 }

/* Mobile nav */
@media (max-width:760px){
  .nav-toggle{ display:inline-block; margin-left:auto }
  .site-nav{
    display:none; flex-direction:column; gap:10px;
    position:absolute; right:16px; top:64px;
    background:#fff; border:1px solid var(--ring);
    padding:10px 12px; border-radius:8px;
  }
  .site-nav.open{ display:flex }
}

/* =========================
   Teal hero band (home & contact)
   ========================= */
.hero{
  background:var(--teal);
  color:var(--teal-ink);
  border-top:0;
  border-bottom:2px solid #000;
  padding:32px 0 40px;
}
.hero h1{
  text-align:center; line-height:1.25; margin:0 0 20px;
  font-weight: 400; line-height: 1.4; font-size:clamp(24px,3.2vw,34px);
font-family: "ABeeZee", sans-serif;
}
.hero p{ margin:0 0 18px }

/* =========================
   Home — optional featured figure (kept for flexibility)
   ========================= */
.featured-figure{
  margin:22px auto; background:#1d1d1d; padding:10px;
  border:1px solid #333; max-width:var(--max);
}
.featured-figure img{
  display:block; width:100%; height:auto; margin:0 auto;
  object-fit:contain; background:#333;
}
.featured-figure figcaption{
  text-align:center; color:#ddd; font-size:.9rem; margin-top:8px;
}

/* =========================
   Home — slideshow (no dots)
   ========================= */
.slideshow{
  position:relative;
  max-width:var(--max);
  margin:22px auto;
  padding:0;                 /* room for nav buttons outside the frame */
}
.slides{ position:relative; overflow:hidden }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; margin:0 }
.slide.is-active{ position:relative; opacity:1 }
.slide img{ display:block; width:100%; height:auto; object-fit:cover; background:transparent }

.ss-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); color:#fff; border:0;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
}
.ss-btn:hover{ background:rgba(0,0,0,.65) }
.ss-btn.prev{ left:0; transform: translate(calc(-100% - 8px), -50%) } .ss-btn.next{ right:0; transform: translate(calc(100% + 8px), -50%) }

/* =========================
   Generic content pages (e.g., Privacy)
   ========================= */
.content{ padding:32px 0 }
.content h1{ margin:0 0 12px }

/* =========================
   Contact page overrides
   ========================= */
.contact-hero h1{
  text-align:center; font-weight: 400; line-height: 1.4; letter-spacing:.2px;
  font-size:clamp(32px,3.6vw,40px); margin:12px 0 18px;
}
.contact-hero .contact-block{
  font-style:normal;              /* kill <address> italics */
  text-align:center; color:var(--teal-ink);
  font-size:1.0625rem; line-height:1.6; letter-spacing:.1px;
  max-width:540px; margin:0 auto 10px;
}
.contact-hero .contact-block p{ margin:4px 0 }
.contact-hero .contact-block p strong{ font-weight:700 }
.contact-hero .contact-block a{
  color:var(--teal-ink); text-decoration:none;        /* matches original */
}
.contact-hero .contact-block a:hover,
.contact-hero .contact-block a:focus{
  text-decoration:underline; text-underline-offset:2px;
}
.contact-hero .office,
.contact-hero .byappt{
  text-align:center; font-weight:700;
  font-size:clamp(28px,3.6vw,38px);
  color:#f1f7f6; margin:6px 0 14px;
}
.map{ max-width:640px; margin:0 auto 8px }
.map iframe{ display:block; width:100%; height:360px; border:0 }

/* Contact page: tighter grouping + office-hours highlight */
.contact-hero .contact-block{ line-height:1.45; }
.contact-hero .contact-block .group{ margin:6px 0 10px; }
.contact-hero .contact-block .group p{ margin:2px 0; }

.contact-hero .office-hours{
  display:block;
  width:fit-content;
  margin:12px auto 18px;
  background:#ffcece;             /* requested highlight */
  color:var(--ink);                /* ensure good contrast on highlight */
  padding:8px 14px;
  border-radius:8px;
  text-align:center;
}
.contact-hero .office-hours .office,
.contact-hero .office-hours .byappt{
  margin:2px 0;                    /* pull them closer together */
  line-height:1.2;
  color:inherit;                    /* override earlier teal text color */
}
/* =========================
   Footer (single row grid)
   ========================= */
.site-footer{ padding:38px 0 28px }
.footer-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;  /* social | copyright | privacy */
  align-items:center; gap:16px;
}
/* social (left) */
.footer-grid .social{
  display:flex; gap:18px; align-items:center; justify-content:flex-start; flex-wrap:nowrap;
}
.footer-grid .icon{
  display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center;
}
.footer-grid .icon svg{ width:100%; height:100%; display:block; fill:#444 }
.footer-grid .icon:hover svg{ fill:#000 }
/* copyright (center) + privacy (right) */
.footer-grid .copyright,
.footer-grid .privacy{
  font-size:.9rem; line-height:1.4; font-weight:400; color:#111;
}
.footer-grid .copyright{ justify-self:center; text-align:center }
.footer-grid .privacy{
  justify-self:end; text-decoration:none;
}
/* legacy neutralizer (in case old markup leaks in) */
.legal{ display:none !important }

/* Privacy policy page inside teal band */
.policy-hero h1{
  text-align:center;
  font-weight: 400; line-height: 1.4;
  letter-spacing:.2px;
  font-size: clamp(32px, 3.6vw, 40px);
  margin: 12px 0 18px;
}
.policy{
  color: var(--teal-ink);
  font-size: 1rem;
  line-height: 1.7;
}
.policy p{ margin: 0 0 14px }
.policy h2{
  margin: 18px 0 8px;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--teal-ink);
}
.policy ol, .policy ul{
  margin: 8px 0 14px 1.25rem;
  padding: 0;
}
.policy li{ margin: 6px 0 }
.policy a{
  color: var(--teal-ink);
  text-decoration: none;          /* original had no underline */
}
.policy a:hover,
.policy a:focus{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Responsive footer stacking */
@media (max-width: 640px){
  .footer-grid{
    grid-template-columns: 1fr;     /* stack: social | copyright | privacy */
    justify-items: center;
    text-align: center;
    row-gap: 12px;
  }
  .footer-grid .social{
    justify-content: center;
    flex-wrap: wrap;                /* allow icons to wrap on very small widths */
    gap: 12px;
  }
  .footer-grid .copyright{
    justify-self: center;
  }
  .footer-grid .privacy{
    justify-self: center;
  }
}

/* Slideshow caption overlay */
.slideshow-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  background:rgba(0,0,0,.7);
  color:#eee;
  padding:10px 12px;
  font-size:.95rem;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.2);
  pointer-events:none;              /* allow clicks to pass through to controls */
}
/* Ensure arrows render above the caption */
.ss-btn{ z-index:3 }

/* Inner frame holds the border; nav buttons sit in outer padding */
.slideshow-frame{
  position:relative;
  border:1px solid #000;
  background:#1d1d1d;
  margin:0; /* no extra space; border hugs image and caption */
}

/* Keep arrows outside the bordered frame on small screens */
@media (max-width: 640px){
  .slideshow{ padding:0 44px; }
  .ss-btn.prev{ left:18px }
  .ss-btn.next{ right:18px }
}

/* === Responsive hotfixes (2025-08) ===
   - Shrink logo responsively so the hamburger menu remains visible on phones
   - Keep slideshow navigation arrows within the viewport on small screens
   - Remove X-translate that pushed arrows off-screen
*/
.brand img{ width: clamp(200px, 52vw, 393px); height:auto; }

/* Desktop/tablet: place arrows just outside the frame but keep only Y-translate */
@media (min-width: 641px){
  .ss-btn.prev{ left:-46px; transform: translateY(-50%); }
  .ss-btn.next{ right:-46px; transform: translateY(-50%); }
}

/* Phones: add side padding and keep arrows inside the frame */
@media (max-width: 640px){
  .slideshow{ padding:0 44px; }
  .ss-btn.prev{ left:18px; transform: translateY(-50%); }
  .ss-btn.next{ right:18px; transform: translateY(-50%); }
}

/* Phones: move slideshow caption below the image (no overlay) */
@media (max-width: 640px){
  .slideshow-caption{
    position: static;          /* leave normal document flow */
    background: transparent;   /* no dark overlay */
    color: var(--teal-ink);    /* readable on teal hero background */
    padding: 8px 0 0;
    margin-top: 6px;
    border-top: 0;
    text-align: center;
  }
}

/* Tablet-and-below: keep slideshow fully within the viewport (≤983px) */
@media (max-width: 983px){
  .slideshow{
    max-width: 100%;       /* ensure container never exceeds view width */
    padding: 0 44px;       /* reserve space so arrows stay inside */
  }
  .ss-btn.prev{ left: 18px; transform: translateY(-50%); }
  .ss-btn.next{ right: 18px; transform: translateY(-50%); }
}

/* Slideshow nav: use SVG assets for icons via CSS masks */
.ss-btn{
  /* hide text arrows visually; aria-label remains for accessibility */
  font-size: 0;
  line-height: 0;
}

.ss-btn::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background: currentColor; /* inherits white from .ss-btn */

  /* center, contain, and avoid tiling */
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 90% 90%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 90% 90%;
}

/* Use provided SVG assets */
.ss-btn.prev::before{
  -webkit-mask-image: url("assets/less-than-sign.svg");
  mask-image: url("assets/less-than-sign.svg");
}
.ss-btn.next::before{
  -webkit-mask-image: url("assets/greater-than-sign.svg");
  mask-image: url("assets/greater-than-sign.svg");
}