/*
 * The ONLY hand-written stylesheet in this project.
 *
 * Everything else under /styles is Duda's own CSS, ported byte-for-byte. Duda
 * does not need these rules because it serves a different HTML document per
 * device — the phone document simply has no desktop header in it, and vice
 * versa. A static build ships both, so the swap has to be stated. Values are
 * measured from the live site, not invented; see DESIGN-SPEC.md.
 */

/* ── which chrome is visible ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .dmHeaderContainer { display: none !important; }
}
@media (min-width: 768px) {
  #hamburger-header-container,
  #mobile-hamburger-drawer,
  #layout-drawer-hamburger,
  .layout-drawer-overlay { display: none !important; }
}

/* ── phone: fixed header, and the offset Duda's runtime writes inline ──────
   Measured on the live site: the header is exactly 121px at every width from
   320 to 767, and div.site_content carries margin-top:121.078px. Duda's phone
   document also omits .header-over-content, whose margin-top:0 would otherwise
   win here.                                                                 */
@media (max-width: 767px) {
  /* The offset itself is NOT a constant and is not set here: Duda's runtime
     writes the header's measured height, which depends on which logo rendition
     the page serves — 121.078px on the home page, 121.391px on the other 41.
     Each page's own sheet carries its measured value; see build.mjs. */

  /* Hamburger button. Duda keys these to [dmtemplateid=mobileHamburgerLayout];
     top is the runtime-centred position inside the 121px header. */
  #layout-drawer-hamburger.layout-drawer-hamburger { top: 40.6934px !important; }

  /* Drawer slide-in. Duda's runtime toggles .layout-drawer_open on the wrapper. */
  #mobile-hamburger-drawer.layout-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 13;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    visibility: visible;
  }
  #dm-outer-wrapper.layout-drawer_open #mobile-hamburger-drawer.layout-drawer {
    transform: translateX(0);
  }
  .layout-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 12;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
  }
  #dm-outer-wrapper.layout-drawer_open ~ .p_hfcontainer .layout-drawer-overlay,
  #dm-outer-wrapper.layout-drawer_open .layout-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  body.layout-drawer_open-body { overflow: hidden; }

  /* Drawer sub-menus are collapsed until their parent is tapped. */
  #mobile-hamburger-drawer .unifiednav__container_sub-nav {
    display: none;
    position: static;
    box-shadow: none;
  }
  #mobile-hamburger-drawer .unifiednav__item-wrap_open > .unifiednav__container_sub-nav {
    display: block;
  }
}

/* ── honeypot ──────────────────────────────────────────────────────────────
   The forms carry no reCAPTCHA — see CONTENT.md. This hidden field is the only
   spam protection, so it has to be invisible to people and visible to bots:
   position:absolute takes it out of flow entirely (no layout cost, which
   matters because the pixel gate would see it), and off-screen rather than
   display:none, which bots know to skip. */
.dmform-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── photo gallery, one copy per device ────────────────────────────────────
   Duda's gallery script lays the grid out itself — 3 columns on desktop and
   tablet, 2 on a phone, with cell geometry written inline and each photo
   swapped for a height-cropped rendition. All three rendered copies ship in
   the markup; this picks the one Duda would have served. Desktop is the
   default so the page is correct before the device script runs. block is the
   gallery's own computed display on the live site. */
.dmPhotoGallery.dm-gallery-mobile,
.dmPhotoGallery.dm-gallery-tablet { display: none; }
[data-dm-device="mobile"] .dmPhotoGallery.dm-gallery-mobile,
[data-dm-device="tablet"] .dmPhotoGallery.dm-gallery-tablet { display: block; }
[data-dm-device="mobile"] .dmPhotoGallery.dm-gallery-desktop,
[data-dm-device="tablet"] .dmPhotoGallery.dm-gallery-desktop { display: none; }

/* ── Facebook Comments footprint ───────────────────────────────────────────
   Every blog post ends with Duda's Facebook Comments widget. On the live site
   its SDK loads when the row scrolls into view and renders NOTHING visible —
   the plugin iframe sits inside a span with height:0;overflow:hidden — but the
   container still settles at 30px, so the row is 60px rather than 30px and
   everything below it sits 30px lower. Our markup keeps the widget but not
   Facebook's script, so the height is reserved here instead. Measured at 375,
   768 and 1440 on the live site: 30px at all three. */
.dmFacebookComments { height: 30px; }

/* ── blog list "Show More" ─────────────────────────────────────────────────
   The live list ships 10 of the 12 posts and fetches the rest over ajax. There
   is no endpoint here, so all twelve render and the tail stays hidden until the
   button is pressed — the same before and after states. */
.postArticle[data-more] { display: none; }
.mainBlog.more-shown .postArticle[data-more] { display: block; }
/* !important because Duda's own sheet sets the button's display with one. */
.mainBlog.more-shown .more-posts-text-container { display: none !important; }