/* haglundlaw.com mobile layer (2026-10-20). Everything layout-related is inside
   @media (max-width: 900px); the desktop layout above 900px is untouched. */

/* Global, invisible on desktop: tel links look exactly like the text they wrap */
a.pd-tel, a.pd-tel:hover { color: inherit; text-decoration: none; font: inherit; }
.pd-menu-btn, .pd-sub-btn { display: none; }

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 62.5%; background: #442e14; }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, iframe, embed, object, table { max-width: 100%; }
  img { height: auto; }

  /* ---------- Frame: drop the fixed 935px shadow box ---------- */
  .shadow-one { width: auto; margin: 0; background: none; }
  .shadow-two { padding: 0; background: none; }
  .shadow-three, .shadow-four { background: none; }
  .shadow-four, .shadow-five { position: static; left: 0; top: 0; }
  #global-inner { width: auto; border: 0; }

  /* ---------- Header: logo, address block ---------- */
  #top-wrap { height: auto; padding: 12px 14px 14px; background-size: cover; background-position: center right; }
  #head-logo { position: relative; top: 0; left: 0; width: 160px; height: 62px; background-size: contain; }
  #head-logo a { width: 160px; height: 62px; }
  #phone-loc { position: static; width: auto; height: auto; margin-top: 8px; text-align: left; font-size: 14px; line-height: 1.45; }
  #phone-loc dt { margin: 0; }
  #phone-loc a { display: inline-block; min-height: 44px; line-height: 44px; text-decoration: underline; }
  #phone-loc a.pd-tel { font-weight: bold; text-decoration: underline; }

  /* ---------- Menu bar + hamburger ---------- */
  #header-wrap { height: auto; min-height: 52px; padding: 4px 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; position: relative; z-index: 60; }
  .pd-js .pd-menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px;
    border: 1px solid rgba(255,255,255,.5); border-radius: 6px; background: #93501b; color: #fff;
    font: bold 16px/1 'lucida grande', tahoma, sans-serif; cursor: pointer; }
  .pd-menu-btn:focus-visible, .pd-sub-btn:focus-visible { outline: 3px solid #d8b84f; outline-offset: 2px; }
  .pd-menu-btn .pd-bars, .pd-menu-btn .pd-bars::before, .pd-menu-btn .pd-bars::after {
    display: block; width: 20px; height: 2px; background: #fff; border-radius: 1px; position: relative; content: ""; transition: transform .2s; }
  .pd-menu-btn .pd-bars::before { position: absolute; top: -6px; left: 0; }
  .pd-menu-btn .pd-bars::after { position: absolute; top: 6px; left: 0; }
  .pd-nav-open .pd-menu-btn .pd-bars { background: transparent; }
  .pd-nav-open .pd-menu-btn .pd-bars::before { transform: translateY(6px) rotate(45deg); }
  .pd-nav-open .pd-menu-btn .pd-bars::after { transform: translateY(-6px) rotate(-45deg); }

  /* Without JS the menu is simply shown as a list; with JS it opens from the button */
  ul#nav { float: none; width: 100%; margin: 4px 0 0; }
  .pd-js ul#nav { display: none; }
  .pd-js.pd-nav-open ul#nav { display: block; }
  ul#nav li { float: none; display: block; position: relative; padding: 0; border-width: 1px 0 0; border-color: #333; font-size: 16px; line-height: 1.3; }
  ul#nav li:hover { background-color: #000; }
  ul#nav li a, ul#nav li a.dir { display: flex; align-items: center; min-height: 48px; padding: 10px 56px 10px 14px; background-image: none; font-size: 16px; width: auto; }
  ul#nav li a:hover, ul#nav li a:focus { background: #93501b; }
  ul#nav ul { visibility: visible; position: static; width: auto; margin: 0; display: block; }
  .pd-js ul#nav ul { display: none; }
  .pd-js ul#nav li.pd-open > ul { display: block; }
  ul#nav ul li { background: #1d1206; }
  ul#nav ul li a { padding-left: 30px; font-weight: normal; }
  .pd-js .pd-sub-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 2px; right: 4px; width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,.35); border-radius: 6px; background: transparent; cursor: pointer; padding: 0; }
  .pd-sub-btn span { display: block; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
  .pd-open > .pd-sub-btn span { transform: rotate(-135deg); margin-top: 4px; }

  /* ---------- Body: content first, the sidebar below it ---------- */
  #page-body { display: flex; flex-direction: column; background: #dbcebc; min-height: 0; }
  #page-body::after { display: none; }
  #right { order: 1; float: none; width: auto; padding: 18px 16px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
  #right h1 { font-size: 26px; line-height: 1.25; }
  #right h1 a { overflow-wrap: anywhere; }
  #right .float-r, #right .blog_photo_wrap { float: none !important; width: auto !important; margin: 0 0 12px; text-align: center; }
  #right .float-r img { margin: 0 0 10px; }
  #right .group > div { float: none !important; display: inline-block; vertical-align: top; margin-bottom: 10px; }
  #right iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  #right table { width: auto !important; }
  #right h3.date, #right .posted p { font-size: 13px; }
  #right .dropcap { font-size: 58px; line-height: 40px; padding-top: 6px; padding-right: 4px; }
  #left-nav { order: 2; float: none; width: auto; padding: 14px 16px 20px; background: #2f1e09; }
  #left-nav:empty { display: none; }
  #left-nav h3, #left-nav .sidetitle { font-size: 16px; }
  #left-nav ul li a { width: auto; min-height: 44px; display: flex; align-items: center; font-size: 16px; padding: 10px 8px; }
  #left-nav > br { display: none; }
  #left-nav > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #d8b84f; }

  /* ---------- Footer ---------- */
  #footer-feature { height: auto; padding: 12px 14px 16px; font-size: 14px; line-height: 1.5; }
  #footer-feature dt { padding: 0; }
  #footer-feature dl { margin: 0 0 6px; }
  #footer-feature a.pd-tel { text-decoration: underline; }
  .disclaimer { font-size: 100%; }
  .disclaimer a { display: inline-block; min-height: 44px; line-height: 44px; }
  #foot-right { float: none; margin: 0; }
}