/* ==========================================================================
   Responsive fixes — loaded after each page's own styles.
   Desktop ≥ 1560px looks exactly as designed; these rules only kick in
   where the layout used to break (laptops, tablets, phones).
   ========================================================================== */

/* ── Navigation: never wrap labels, never squeeze the logo ── */
nav .nav-logo { flex-shrink: 0; }
nav .nav-links > li > a,
nav .nav-cta { white-space: nowrap; }

/* Laptops (1200–1559px): same menu, slightly tighter so everything fits on one line */
@media (min-width: 1200px) and (max-width: 1559px) {
  nav .nav-logo { margin-right: 1.25rem; }
  nav .nav-logo img { height: 42px; }
  nav .nav-links { gap: clamp(1.1rem, calc(12.8vw - 142px), 2.5rem); }
  nav .nav-links > li > a { font-size: .78rem; letter-spacing: .09em; }
  nav .nav-cta { padding: .55rem 1.15rem !important; }
}

/* Small laptops & tablets in landscape (901–1199px): use the mobile menu */
@media (min-width: 901px) and (max-width: 1199px) {
  nav .hamburger { display: flex; }
  nav .nav-links {
    display: none; flex-direction: column;
    gap: 1.5rem; padding: 2rem 5%;
    border-bottom: 1px solid rgba(232,197,71,.15);
    max-height: 80vh; overflow-y: auto;
  }
  nav .nav-dropdown,
  nav .nav-has-dropdown:hover .nav-dropdown { display: none !important; }
}

/* Open mobile menu: attach it right under the bar, fully opaque */
@media (max-width: 1199px) {
  nav .nav-links {
    position: absolute !important;
    top: 100% !important; left: 0; right: 0;
    background: #0a2540 !important;
    box-shadow: 0 18px 40px rgba(10,37,64,.35);
  }
  nav .nav-links > li > a { display: inline-block; padding: .25rem 0; }
  .hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
}

/* ── Decorative squares behind photos: keep them inside the screen ── */
@media (max-width: 600px) {
  .split-image-decoration { right: -10px !important; bottom: -12px !important; width: 110px !important; height: 110px !important; }
  .split-image::before { top: -10px !important; left: -10px !important; width: 70px !important; height: 70px !important; }
}

/* ── Forms: 16px text so iPhone doesn't zoom in when a field is tapped ── */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Blog: author / date / read-time line wraps cleanly instead of squeezing ── */
.post-meta { flex-wrap: wrap; row-gap: .5rem; }
.post-meta > span, .post-meta-author > span { white-space: nowrap; }
.post-meta-avatar { flex-shrink: 0; }
@media (max-width: 480px) {
  .post-meta { column-gap: .75rem; }
  .post-meta:has(.post-meta-author) > .post-meta-divider:nth-last-child(2) { display: none; }
}

/* ── Brand symbol next to the Dan Willms signature (all pages) ── */
nav .nav-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
nav .nav-logo .nav-symbol { width: 48px; height: 48px; flex-shrink: 0; display: block; }
@media (min-width: 1200px) and (max-width: 1559px) {
  nav .nav-logo { gap: .55rem; }
  nav .nav-logo .nav-symbol { width: 40px; height: 40px; }
}
@media (max-width: 900px) {
  nav .nav-logo { gap: .6rem; }
  nav .nav-logo .nav-symbol { width: 40px; height: 40px; }
}