/* Officea site-wide UI: the mobile/tablet menu and the quote form.
   Loaded on every public page; behaviour is in js/officea-ui.js. */

/* Menu button: shown whenever the header hides some of its links (1180px and below) */
.navtoggle { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: transparent; color: #EDEBE4; font: 600 .95rem var(--body, sans-serif); cursor: pointer; }
.navtoggle:hover { border-color: rgba(255,255,255,.6); }
.navtoggle .bars { position: relative; width: 16px; height: 2px; background: currentColor; transition: background-color .2s; }
.navtoggle .bars::before, .navtoggle .bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform .2s; }
.navtoggle .bars::before { top: -5px; }
.navtoggle .bars::after { top: 5px; }
.navtoggle[aria-expanded="true"] .bars { background: transparent; }
.navtoggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1180px) { .navtoggle { display: inline-flex; } }
/* whenever the Menu button shows, it lists every link: hide the text links so Get a quote always fits */
@media (max-width: 1180px) { header.top nav a.link { display: none !important; } }
@media (max-width: 420px) { .navtoggle .lbl { display: none; } .navtoggle { padding: 0 11px; } }

.sitemenu { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 61px); z-index: 19; max-height: calc(100vh - 61px); overflow-y: auto; background: #16181A; border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.3); opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
.sitemenu[hidden] { display: none; }
.sitemenu.open { opacity: 1; transform: none; }
.sitemenu ul { list-style: none; margin: 0 auto; padding: 8px 20px 4px; max-width: 1200px; display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sitemenu ul { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.sitemenu li a { display: flex; align-items: center; min-height: 52px; color: #EDEBE4; text-decoration: none; font: 500 1.05rem var(--body, sans-serif); border-bottom: 1px solid rgba(255,255,255,.08); }
.sitemenu li a:hover, .sitemenu li a[aria-current="page"] { color: #D9B97A; }
.sitemenu .sm-contact { margin: 0 auto; padding: 14px 20px 20px; max-width: 1200px; display: flex; flex-wrap: wrap; gap: 10px; }
.sitemenu .sm-contact a { flex: 1 1 160px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; color: #EDEBE4; text-decoration: none; font: 600 .95rem var(--body, sans-serif); }
.sitemenu .sm-contact a.primary { background: var(--brass, #B08A4E); border-color: var(--brass, #B08A4E); color: #fff; }

/* Quote form */
.qform-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.qform-wrap[hidden] { display: none; }
.qform-backdrop { position: absolute; inset: 0; background: rgba(16,17,18,.6); opacity: 0; transition: opacity .2s ease; }
.qform-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--paper, #fff); color: var(--ink, #1a1a1a); border-radius: 10px; padding: 28px 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.3); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .2s ease, transform .2s ease; }
.qform-wrap.open .qform-backdrop, .qform-wrap.open .qform-box { opacity: 1; }
.qform-wrap.open .qform-box { transform: none; }
.qform-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted, #666); cursor: pointer; border-radius: 4px; }
.qform-x:hover { color: var(--ink, #111); }
.qform-box h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 6px; padding-right: 36px; }
.qform-sub { color: var(--muted, #666); font-size: .95rem; margin: 0 0 18px; }
.qform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.qform-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .qform-grid { grid-template-columns: 1fr; } .qform-box { padding: 24px 18px 20px; } }
.qform-grid label { display: block; font: 700 .82rem var(--body, sans-serif); margin-bottom: 4px; color: var(--ink, #111); }
.qform-grid label .opt { font-weight: 400; color: var(--muted, #666); }
.qform-grid input, .qform-grid select, .qform-grid textarea { width: 100%; font: 400 1rem var(--body, sans-serif); color: var(--ink, #111); background: var(--bg, #fff); border: 1.5px solid var(--line, #ccc); border-radius: 4px; padding: 10px 12px; min-height: 46px; }
.qform-grid textarea { min-height: 84px; resize: vertical; }
.qform-grid input:focus, .qform-grid select:focus, .qform-grid textarea:focus { border-color: var(--brass, #B08A4E); outline: none; box-shadow: 0 0 0 3px rgba(176,138,78,.25); }
.qform-grid [aria-invalid="true"] { border-color: #B3261E; }
.qform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qform-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.qform-actions .btn { min-width: 200px; }
.qform-alt { font-size: .9rem; color: var(--muted, #666); }
.qform-alt a { color: var(--accent, #7E602D); }
.qform-err { margin: 12px 0 0; color: #B3261E; font-size: .92rem; }
.qform-err:empty { display: none; }
.qform-note { margin: 12px 0 0; font-size: .8rem; color: var(--muted, #666); }
.qform-done { text-align: left; }
.qform-done h2 { margin-bottom: 8px; }
.qform-done p { color: var(--muted, #666); margin: 0 0 16px; }
body.qform-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sitemenu, .qform-backdrop, .qform-box, .navtoggle .bars, .navtoggle .bars::before, .navtoggle .bars::after { transition: none; }
}

/* Privacy notice bar */
.pnotice { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--ink, #16181A); color: #EDEBE4; border: 1px solid rgba(255,255,255,.14); border-radius: 2px; font: 13px/1.5 Manrope, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 8px 28px rgba(0,0,0,.25); opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms ease; }
.pnotice.open { opacity: 1; transform: none; }
.pnotice p { margin: 0; flex: 1; }
.pnotice a { color: #fff; text-decoration: underline; }
.pnotice .btn { flex: none; min-height: 36px; padding: 0 16px; cursor: pointer; font: 700 14px/1 Manrope, "Segoe UI", Arial, sans-serif; color: #fff; background: var(--brass, #B08A4E); border: 2px solid var(--brass, #B08A4E); border-radius: 2px; }
.pnotice .btn:hover { background: #96733D; border-color: #96733D; }
@media (prefers-reduced-motion: reduce) { .pnotice { transition: none; } }

/* Mobile contact bar (js/officea-ui.js, section 4): phones and tablets only */
.mbar { display: none; }
/* narrow screens, plus phones and tablets up to 1100px whose browsers report a wider layout */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 1px; background: rgba(255,255,255,.12); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 18px rgba(0,0,0,.18); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; background: #16181A; color: #EDEBE4; text-decoration: none; font: 700 15px/1 Manrope, "Segoe UI", Arial, sans-serif; }
  .mbar a svg { width: 18px; height: 18px; fill: currentColor; }
  .mbar a.primary { background: var(--brass, #B08A4E); color: #fff; }
  .mbar a:active { filter: brightness(.92); }
  body.has-mbar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body.has-mbar .wafloat { display: none; }
  body.has-mbar .pnotice { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  /* keep the chat button and window (officea-chat.js) above the bar */
  body.has-mbar .oc-b { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-mbar .oc-w { bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100vh - 160px) !important; }
}

/* Top menu fit: with For Landlords and GCC in the menu, Locations and Contact (both homepage
   anchors, also in the footer) only show on very wide screens */
@media (min-width: 721px) and (max-width: 1560px) {
  header nav a.link[href$="#cities"], header nav a.link[href$="#contact"] { display: none; }
}

/* Phones: keep the hero clear. The chat button waits until the visitor scrolls past the
   first screen or closes the privacy notice (js/officea-ui.js, sections 3 and 6). */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  .pnotice { gap: 10px; padding: 8px 10px 8px 12px; font-size: 12px; line-height: 1.4; }
  .pnotice .btn { min-height: 32px; padding: 0 14px; font-size: 13px; }
  body.has-mbar.hero-zone .oc-b, body.has-mbar.pnotice-on .oc-b { opacity: 0 !important; pointer-events: none !important; }
}