@import url("https://fonts.googleapis.com/css2?family=Iceland&display=swap");

.mobile-tabbar,
.mobile-more-backdrop,
.mobile-more-sheet {
   display: none;
}

.mobile-tabbar,
.mobile-tabbar *,
.mobile-more-backdrop,
.mobile-more-sheet,
.mobile-more-sheet * {
   box-sizing: border-box;
}

/* Keep the original desktop composition, while making every working page
   fit naturally on tablets and phones. */
@media (max-width: 900px) {
   html,
   body {
      max-width: 100%;
      overflow-x: hidden;
   }

   body {
      margin: 0;
      padding: 0 12px 40px;
      flex-flow: column nowrap !important;
   }

   .title,
   #pajaro {
      width: auto !important;
      margin: 8px 0 12px !important;
      padding: 0 !important;
      color: orangered;
      font-family: "Amatic SC", cursive;
      font-size: clamp(3.75rem, 12vw, 5.5rem) !important;
      font-weight: normal;
      line-height: 1;
      text-align: center !important;
   }

   #nav_container {
      position: sticky !important;
      top: 0;
      z-index: 999;
      width: 100%;
      padding: 8px 0 !important;
      background: rgba(0, 0, 0, 0.96);
   }

   #navbar {
      display: grid !important;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 5px;
      width: 100%;
      padding: 5px;
   }

   #navbar a.tabs {
      display: flex;
      min-width: 0;
      min-height: 44px;
      padding: 7px 5px;
      align-items: center;
      justify-content: center;
      color: rgb(253, 239, 213);
      background: #000;
      border: 1px solid rgb(253, 239, 213);
      text-align: center;
      text-decoration: none;
      overflow-wrap: anywhere;
   }

   #navbar a:not(.tabs) {
      display: none;
   }

   #main_container,
   #plans_container,
   #model_container,
   #pdf_letter_container,
   #tables_container,
   #est_container,
   .detailCoords {
      width: 100% !important;
      max-width: 100% !important;
   }

   #plans_container,
   #model_container,
   #pdf_letter_container {
      margin-inline: 0 !important;
   }

   .pdf,
   .pdf_letter,
   .model {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      height: min(72vh, 720px) !important;
      margin: 0 0 20px !important;
   }

   #tables_container {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
   }

   #tables_container table,
   #totaltotal {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: clamp(5px, 1.5vw, 14px) !important;
      table-layout: fixed;
      font-size: clamp(0.78rem, 2.1vw, 1rem) !important;
   }

   #tables_container th,
   #tables_container td {
      padding: clamp(5px, 1.3vw, 12px) !important;
      overflow-wrap: anywhere;
   }

   #glance {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      width: 100%;
      padding: 12px !important;
   }

   .quick_look {
      width: 100% !important;
      height: auto !important;
      min-height: 100px;
   }

   #est_container {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
   }

   .material_sections {
      width: 100% !important;
      min-width: 0;
      margin: 0 !important;
      padding: 0 12px 12px !important;
   }

   .est_title,
   .estimates {
      width: 100% !important;
      max-width: 100%;
   }

   .content {
      inset: 12px !important;
      width: auto !important;
      height: auto !important;
      max-height: calc(100dvh - 24px);
      padding: 14px !important;
      overflow: auto;
   }

   .framing_img,
   .foundation_img {
      display: block;
      width: 100% !important;
      max-width: 100%;
      height: auto;
   }

   .modal {
      padding: 60px 16px 20px !important;
   }

   .modal-content,
   .details {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin-inline: 0 !important;
   }
}

@media (max-width: 560px) {
   :root {
      --pajaro-tabbar-height: 68px;
      --pajaro-safe-bottom: env(safe-area-inset-bottom, 0px);
   }

   body {
      padding: 0 8px calc(var(--pajaro-tabbar-height) + var(--pajaro-safe-bottom) + 18px) !important;
   }

   #nav_container {
      display: none !important;
   }

   .mobile-tabbar {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1002;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      height: calc(var(--pajaro-tabbar-height) + var(--pajaro-safe-bottom));
      padding: 5px 5px var(--pajaro-safe-bottom);
      border-top: 1px solid rgba(0, 255, 255, 0.65);
      border-radius: 0;
      background: rgba(5, 7, 8, 0.97);
      box-shadow: 0 -5px 22px rgba(0, 0, 0, 0.72);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
   }

   .mobile-tabbar > a,
   .mobile-tabbar button {
      appearance: none;
      display: flex !important;
      min-width: 0;
      min-height: 58px;
      margin: 0;
      padding: 4px 2px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border: 0;
      border-radius: 8px;
      color: rgba(253, 239, 213, 0.72);
      background: transparent;
      font: 600 0.67rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.01em;
      text-decoration: none;
      transform: none;
      scale: 1;
   }

   .mobile-tabbar > a:active,
   .mobile-tabbar button:active {
      background: rgba(255, 69, 0, 0.14);
   }

   .mobile-tabbar > a[aria-current="page"],
   .mobile-tabbar button[aria-expanded="true"],
   .mobile-tabbar button.is-current {
      color: #ff6a2a;
      background: rgba(255, 69, 0, 0.1);
   }

   .mobile-tabbar svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
   }

   .mobile-more-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: block;
      border-radius: 0;
      background: rgba(0, 0, 0, 0.62);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
   }

   .mobile-more-sheet {
      position: fixed;
      right: 8px;
      bottom: calc(var(--pajaro-tabbar-height) + var(--pajaro-safe-bottom) + 8px);
      left: 8px;
      z-index: 1001;
      display: block;
      padding: 10px;
      border: 1px solid rgba(0, 255, 255, 0.7);
      border-radius: 16px;
      background: rgba(8, 10, 11, 0.98);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.72), 0 0 16px rgba(255, 255, 255, 0.14);
      opacity: 0;
      transform: translateY(18px) scale(0.98);
      transform-origin: bottom center;
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease;
   }

   .mobile-more-sheet h2 {
      margin: 2px 6px 8px;
      color: #ff6a2a;
      font: 700 0.78rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
   }

   .mobile-more-sheet a {
      display: flex;
      min-height: 48px;
      padding: 0 12px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(253, 239, 213, 0.13);
      color: rgb(253, 239, 213);
      font: 600 0.95rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      text-decoration: none;
      scale: 1;
      width: 100%;
   }

   .mobile-more-sheet a:last-child {
      border-bottom: 0;
   }

   .mobile-more-sheet a::after {
      content: "›";
      color: rgba(253, 239, 213, 0.5);
      font-size: 1.5rem;
      font-weight: 400;
   }

   .mobile-more-sheet a[aria-current="page"] {
      color: #ff6a2a;
   }

   body.mobile-more-open {
      overflow: hidden;
   }

   body.mobile-more-open .mobile-more-backdrop {
      opacity: 1;
      pointer-events: auto;
   }

   body.mobile-more-open .mobile-more-sheet {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
   }

   #glance,
   #est_container {
      grid-template-columns: minmax(0, 1fr);
   }

   .pdf,
   .pdf_letter,
   .model {
      height: min(58vh, 520px) !important;
   }

   #tables_container table,
   #totaltotal {
      font-size: 0.78rem !important;
   }

   @media (prefers-reduced-motion: reduce) {
      .mobile-more-backdrop,
      .mobile-more-sheet {
         transition: none;
      }
   }
}

/* Pajaro: hide the site title and use the existing aqua accent. */
body #pajaro.title { display: none !important; }
body nav { border-color: aqua !important; }
body nav a:hover, body nav .active,
body .giorno_titolo, body .calc:hover,
body .close:hover, body .close:focus,
body .contact h2, body .contact h3, body a.link_title,
body .mobile-more-sheet h2, body .mobile-more-sheet a[aria-current="page"],
body .documents-heading h2, body .documents-cad-panel h3,
body .materials-workspace h2, body .calendar-toolbar h2,
body .contacts-heading h2, body .contacts-dialog h2 {
  color: aqua !important;
}
body .stats { border-left-color: aqua !important; }
body .tips { border-color: aqua !important; }
body .container_title { border-bottom-color: aqua !important; }
body .mobile-tabbar > a:active, body .mobile-tabbar button:active {
  background: rgba(0,255,255,.14) !important;
}
body .mobile-tabbar > a[aria-current="page"],
body .mobile-tabbar button[aria-expanded="true"],
body .mobile-tabbar button.is-current {
  color: aqua !important;
  background: rgba(0,255,255,.1) !important;
}
body .documents-import-button, body .documents-shell button,
body .materials-actions button,
body .calendar-shell button:not(.calendar-danger):not(.calendar-secondary):not(.calendar-event-pill),
body .contacts-shell button, body .contacts-dialog button {
  border-color: aqua !important;
  background: rgba(0,255,255,.13) !important;
}
body .documents-import-button:hover, body .documents-import-button:focus-within,
body .documents-shell button:hover, body .documents-shell button:focus-visible,
body .documents-shell button.is-active,
body .materials-actions button:hover, body .materials-actions button:focus-visible,
body .calendar-shell button:hover:not(.calendar-danger):not(.calendar-secondary):not(.calendar-event-pill),
body .calendar-shell button:focus-visible:not(.calendar-danger):not(.calendar-secondary):not(.calendar-event-pill),
body .contacts-shell button:hover, body .contacts-dialog button:hover,
body .contacts-shell button:focus-visible, body .contacts-dialog button:focus-visible {
  background: rgba(0,255,255,.28) !important;
}
body .contact-actions a, body .contact-actions button {
  border-color: rgba(0,255,255,.62) !important;
  background: rgba(0,255,255,.08) !important;
}
body .calendar-day.is-selected {
  outline-color: aqua !important;
  background: rgba(0,255,255,.08) !important;
}
body #tables_container td[contenteditable="true"]:focus {
  outline-color: aqua !important;
  background: rgba(0,255,255,.1) !important;
}
body .material-row-delete { border-color: rgba(0,255,255,.42) !important; }
body .material-row-delete:hover, body .material-row-delete:focus-visible {
  border-color: aqua !important;
  background: rgba(0,255,255,.26) !important;
}
body .materials-section[open] summary { background: rgba(0,255,255,.06) !important; }


/* Tall, pen-drawn toolbar icons and Amatic SC labels. */
@media (max-width: 560px) {
  body .mobile-tabbar svg { width: 22px; height: 28px; stroke-width: 1.3; overflow: visible; }
  body .mobile-tabbar > a, body .mobile-tabbar button { font-family: "Amatic SC", cursive; font-size: 1rem; font-weight: 700; letter-spacing: .025em; gap: 1px; }
  body .mobile-more-sheet h2, body .mobile-more-sheet a { font-family: "Amatic SC", cursive; font-size: 1.25rem; letter-spacing: .025em; }
}

/* Iceland Regular throughout Pajaro. */
body, body * {
  font-family: "Iceland", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

@media (max-width: 560px) {
  body .mobile-tabbar span { font-size: .75rem; letter-spacing: 0; white-space: nowrap; }
}

body .material-row-delete { font-family: "Iceland", sans-serif !important; font-weight: 400 !important; }

/* Materials controls live beside each category title. */
body.materials-page .materials-workspace { display: none !important; }
body.materials-page .materials-section-heading { display: flex; align-items: center; gap: 4px; min-width: 0; }
body.materials-page .materials-section > summary .materials-section-title { color: #fff !important; min-width: 0; }
body.materials-page .materials-section-add { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
body.materials-page .materials-section-add:focus-visible { outline: 1px solid aqua; outline-offset: -4px; border-radius: 4px; }

body.materials-page > h1.title { display: none !important; }

/* Shared navigation theme across every Pajaro page. */
:root { --pajaro-nav-accent: #00ffff; --pajaro-nav-text: #d5efef; --pajaro-nav-border: rgba(0,255,255,.4); --pajaro-nav-surface: rgba(5,12,14,.97); --pajaro-nav-selected: rgba(0,255,255,.1); --pajaro-nav-radius: 12px; }
body #navbar a.tabs, body .mobile-tabbar > a, body .mobile-tabbar > button, body .mobile-more-sheet a {
  box-sizing: border-box !important; color: var(--pajaro-nav-text) !important; border: 1px solid transparent !important; border-radius: var(--pajaro-nav-radius) !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; scale: 1 !important;
}
body #navbar a.tabs { min-height: 44px; padding: 8px 10px !important; border-color: var(--pajaro-nav-border) !important; }
body #navbar a.tabs:hover, body #navbar a.tabs.active, body #navbar a.tabs[aria-current="page"], body .mobile-tabbar > a[aria-current="page"], body .mobile-tabbar > button[aria-expanded="true"], body .mobile-tabbar > button.is-current, body .mobile-more-sheet a[aria-current="page"] {
  color: var(--pajaro-nav-accent) !important; background: var(--pajaro-nav-selected) !important; border-color: var(--pajaro-nav-border) !important;
}
body #navbar a.tabs:focus-visible, body .mobile-tabbar > a:focus-visible, body .mobile-tabbar > button:focus-visible, body .mobile-more-sheet a:focus-visible { outline: 2px solid var(--pajaro-nav-accent) !important; outline-offset: -3px; }
@media (max-width: 560px) {
  body .mobile-tabbar { border: 1px solid var(--pajaro-nav-border) !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important; background: var(--pajaro-nav-surface) !important; gap: 2px; padding-inline: 5px; }
  body .mobile-tabbar > a, body .mobile-tabbar > button { min-height: 58px !important; margin: 0 !important; padding: 4px 2px !important; gap: 1px !important; }
  body .mobile-tabbar > a:active, body .mobile-tabbar > button:active, body .mobile-more-sheet a:active { color: var(--pajaro-nav-accent) !important; background: rgba(0,255,255,.14) !important; }
  body .mobile-more-sheet { border: 1px solid var(--pajaro-nav-border) !important; border-radius: 16px !important; background: var(--pajaro-nav-surface) !important; }
  body .mobile-more-sheet a { min-height: 48px; padding: 8px 12px !important; margin-block: 2px; }
  body .mobile-more-sheet h2, body .mobile-more-sheet a::after { color: var(--pajaro-nav-accent) !important; }
}