/* Site fixes, November 2, 2026 — loaded last on every page */

/* Laptop screens: keep "Request a Tour" fully visible */
@media (max-width: 1600px) {
  .hp-label { display: none; }
  .desktop-nav, .seo-page .desktop-nav, .immersive .desktop-nav { gap: 16px; }
}
@media (min-width: 1341px) and (max-width: 1440px) {
  .desktop-nav a { font-size: .74rem; letter-spacing: .04em; }
  .site-header { column-gap: 20px; }
  .header-actions { gap: 14px; }
}

/* Below 1341 px the full menu doesn't fit next to the buttons: use the menu button */
@media (max-width: 1340px) {
  .desktop-nav, .seo-page .desktop-nav, .immersive .desktop-nav { display: none; }
}
@media (min-width: 1001px) and (max-width: 1340px) {
  .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-height: 44px; padding: 0;
    background: var(--accent); color: var(--inverse);
  }
  .mobile-nav {
    position: absolute; right: var(--gutter); top: 100%; left: auto;
    width: 320px; background: var(--bg); padding: var(--space-4) var(--space-6);
    box-shadow: 0 12px 24px #0002;
  }
  .mobile-nav a { display: block; padding-block: var(--space-3); font-size: var(--text-sm); color: var(--ink); }
  .mobile-nav .button { color: var(--inverse); }
}

/* Tap-to-call icon in the header (phones and tablets only) */
.header-call { display: none; }
@media (max-width: 1000px) {
  .header-call {
    display: flex; align-items: center; justify-content: center;
    grid-column: 3; grid-row: 1; justify-self: end;
    width: 44px; height: 44px; border-radius: 50%;
    color: inherit; text-decoration: none;
    border: 1px solid currentColor;
  }
}

/* Call link inside the open mobile menu */
.mobile-nav .mobile-call { font-weight: 600; }

/* Hero line wraps instead of being cut off on phones */
.hero-overlay .hero-heading { min-width: 0; max-width: 100%; }
.hero .hero-heading h1 .hero-eyebrow { white-space: normal !important; overflow-wrap: break-word; max-width: 100%; }
@media (max-width: 700px) { .hero .hero-heading h1 { white-space: normal; } }
/* Home page: the sticky bar waits until the hero's own button has scrolled away */
@media (max-width: 700px) { body.hero-cta-visible .mobile-cta-bar { transform: translateY(110%); } .mobile-cta-bar { transition: transform .25s ease; } }

/* Sticky "Request a tour / Call" bar on phones */
.mobile-cta-bar { display: none; }
@media (max-width: 700px) {
  .mobile-cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg, #fff);
    box-shadow: 0 -6px 18px rgba(0,0,0,.10);
  }
  .mobile-cta-bar .button {
    justify-content: center; min-height: 48px; margin: 0;
    padding: 0 10px; font-size: var(--text-xs, .8rem); white-space: nowrap;
  }
  .mobile-cta-bar .button.secondary {
    background: transparent; color: var(--accent); border: 1px solid var(--accent);
  }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body:has(dialog[open]) .mobile-cta-bar { display: none; }
}

/* Contact page map */
.map-section { padding-block: var(--space-16, 64px) var(--space-8, 32px); }
.map-section h2 { margin-bottom: var(--space-6, 24px); }
.map-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--line, #eee); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .map-frame { aspect-ratio: 4 / 5; } }

/* Reviews block on inner pages */
.page-reviews { padding-block: var(--space-16, 64px); }

/* Planning guides (blog), November 2026 */
.guide-article { max-width: 760px; margin-inline: auto; padding-block: var(--space-16, 64px) var(--space-8, 32px); }
.guide-head { text-align: center; margin-bottom: var(--space-10, 40px); }
.guide-head h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; margin: var(--space-4, 16px) 0; }
.guide-head .eyebrow a { color: inherit; text-decoration: none; }
.guide-byline { font-size: var(--text-sm, .9rem); opacity: .75; }
.guide-figure { margin: 0 0 var(--space-10, 40px); }
.guide-figure img { width: 100%; height: auto; max-height: 560px; object-fit: cover; display: block; }
.guide-figure figcaption { font-size: var(--text-xs, .8rem); opacity: .7; margin-top: var(--space-2, 8px); }
.guide-article h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin: var(--space-12, 48px) 0 var(--space-4, 16px); }
.guide-article h3 { font-size: var(--text-lg, 1.2rem); margin: var(--space-6, 24px) 0 var(--space-2, 8px); }
.guide-article p, .guide-article li { font-size: var(--text-base, 1rem); line-height: 1.7; }
.guide-article p { margin: 0 0 var(--space-4, 16px); }
.guide-article ul { padding-left: 1.2em; margin: 0 0 var(--space-4, 16px); }
.guide-article a { text-decoration: underline; text-underline-offset: 3px; }
.guide-table-wrap { overflow-x: auto; margin: var(--space-4, 16px) 0 var(--space-4, 16px); }
.guide-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, .92rem); }
.guide-table th, .guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line, #ddd); vertical-align: top; }
.guide-table th { font-weight: 600; }
.guide-table.worksheet td:last-child { min-width: 110px; border-bottom-style: dashed; }
.guide-table tr.total td { font-weight: 700; border-bottom: 2px solid currentColor; }
.guide-lead { max-width: 60ch; margin: var(--space-4, 16px) auto 0; text-align: center; }
.guide-index-hero { text-align: center; }
.guide-list { max-width: 980px; margin-inline: auto; padding-block: var(--space-8, 32px) var(--space-16, 64px); }
.guide-card { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-8, 32px); align-items: center; text-decoration: none; color: inherit; border-top: 1px solid var(--line, #ddd); border-bottom: 1px solid var(--line, #ddd); padding-block: var(--space-6, 24px); }
.guide-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.guide-card h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: var(--space-2, 8px) 0; }
.guide-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .guide-card { grid-template-columns: 1fr; gap: var(--space-4, 16px); }
  .guide-card img { height: 200px; }
  .guide-article { padding-top: var(--space-10, 40px); }
  .guide-figure img { max-height: 420px; }
}