/* professional-painters.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, a.pd-tel:visited { color: inherit; text-decoration: none; font: inherit; }
.pd-menu-btn, .pd-sub-btn, .pd-callbar { display: none; }

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 62.5%; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  #global-inner, #global-inner *, #foot, .pd-callbar, .pd-callbar * { box-sizing: border-box; }
  img, video, iframe, embed, object { max-width: 100%; }
  img { height: auto; }
  iframe { width: 100%; }

  #global-inner { width: auto; margin: 0; padding: 0 0 16px; border: 0; }

  /* ---------- Header ---------- */
  #top-wrap { height: auto; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 10px 12px;
    background-size: cover; }
  #head-logo { position: static; flex: 0 0 auto; width: 50px; height: 56px; background-size: contain; }
  #head-logo a { width: 50px; height: 56px; }
  #logo-text { position: static; flex: 1 1 140px; width: auto; height: auto; min-width: 0; }
  #logo-text img { display: block; width: 100%; max-width: 226px; height: auto; }
  #motto { display: none; }
  .pd-js .pd-menu-btn { display: inline-flex; flex: 0 0 auto; margin-left: auto; align-items: center; gap: 8px;
    min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 6px;
    background: #4d4132; color: #fff; font: bold 16px/1 'lucida grande', tahoma, sans-serif; cursor: pointer; }
  .pd-menu-btn:focus-visible { outline: 3px solid #ffe28a; 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); }
  #phone-loc { position: static; order: 5; flex: 0 0 100%; width: auto; height: auto; margin: 8px 0 0; text-align: center;
    font: bold 18px/1.2 Georgia, Times, serif; }
  #phone-loc a.pd-tel { display: block; padding: 11px 8px; border-radius: 6px; background: rgba(255,251,220,.85); color: #4d4132; }

  /* ---------- Navigation (shown as a list without JS; collapsible with JS) ---------- */
  #nav { order: 6; flex: 0 0 100%; width: auto; height: auto; margin: 10px 0 0; }
  .pd-js #nav { display: none; }
  .pd-js.pd-nav-open #nav { display: block; }
  #navigation-primary { position: static; background: #4d4132; border-radius: 6px; overflow: hidden; }
  #navigation-primary ul { width: auto; }
  #navigation-primary > ul > li { float: none; height: auto; display: flex; flex-wrap: wrap; border-top: 1px solid #6a5a44; }
  #navigation-primary > ul > li:first-child { border-top: 0; }
  #navigation-primary > ul > li > a, body#home #nav-home a, body#services #nav-services a, body#portfolio #nav-portfolio a,
  body#about #nav-about a, body#consult #nav-consult a, body#news #nav-news a, body#contact #nav-contact a {
    flex: 1 1 auto; width: auto; height: auto; min-height: 48px; display: flex; align-items: center; padding: 0 16px;
    text-indent: 0; overflow: visible; background: none; color: #fffbdc; text-decoration: none;
    font: bold 16px/1.3 'lucida grande', tahoma, sans-serif; letter-spacing: .02em; }
  body#home #nav-home > a, body#services #nav-services > a, body#portfolio #nav-portfolio > a, body#about #nav-about > a,
  body#consult #nav-consult > a, body#news #nav-news > a, body#contact #nav-contact > a { color: #ffe28a; }
  #navigation-primary > ul > li > a:hover { background: #362f24; }
  .pd-js #navigation-primary .pd-sub-btn { display: flex; flex: 0 0 52px; align-items: center; justify-content: center; min-height: 48px;
    border: 0; border-left: 1px solid #6a5a44; background: transparent; color: #fff; cursor: pointer; }
  .pd-sub-btn span { width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
  .pd-open > .pd-sub-btn span { transform: rotate(-135deg) translate(-2px, -2px); }
  .pd-sub-btn:focus-visible, #navigation-primary a:focus-visible { outline: 3px solid #ffe28a; outline-offset: -3px; }
  #navigation-primary li ul, #navigation-primary li:hover ul, #navigation-primary li.sfhover ul {
    position: static; left: auto; flex: 0 0 100%; width: auto; padding: 0 0 6px; background: #362f24; }
  html.pd-js #navigation-primary li ul, html.pd-js #navigation-primary li:hover ul { display: none; }
  html.pd-js #navigation-primary li.pd-open ul { display: block; }
  #navigation-primary li ul li { float: none; height: auto; }
  #navigation-primary li ul li a, body #navigation-primary li ul li a { display: flex; align-items: center; width: auto; min-height: 44px; height: auto;
    padding: 8px 16px 8px 32px; border: 0; border-top: 1px solid #4d4132; background: none; text-indent: 0;
    font: normal 16px/1.35 'lucida grande', arial, sans-serif; color: #fffbdc; }

  /* ---------- Quick-contact panel (opened from "Contact") ---------- */
  #quickcontact { position: static; width: auto; height: auto !important; margin: 10px 12px 0; padding: 12px 14px; border: 0; border-radius: 6px;
    font-size: 16px; }
  #quickcontact h3 { font: bold 18px/1.3 Georgia, Times, serif; margin: 0 0 6px; }
  #quickcontact fieldset { padding: 0 !important; }
  #quickcontact-in, #quickcontact-in tbody, #quickcontact-in tr, #quickcontact-in td { display: block; width: 100%; }
  #quickcontact-in .field, #quickcontact-in .txtField { float: none; width: 100%; min-height: 44px; margin: 0 0 10px; padding: 10px; font: 16px/1.3 Arial, sans-serif; border-radius: 4px; }
  #quickcontact-in .txtField { height: 120px; }
  #quickcontact #submit input { width: 100%; min-height: 48px; font-size: 16px; margin: 6px 0 0; cursor: pointer; }
  #quickcontact .tiny { text-align: right; }
  #quickcontact .tiny a { display: inline-block; min-height: 44px; min-width: 44px; padding: 12px 4px; font-size: 16px; }

  /* ---------- Home ---------- */
  #top-feature { width: auto; height: auto; margin: 12px; border-width: 4px; }
  #top-photo { margin: 0; }
  .cycle-slideshow { width: 100%; }
  .cycle-slideshow img { width: 100% !important; height: auto !important; display: block; }
  .cycle-slideshow > img:not(:first-child) { position: absolute; top: 0; left: 0; }
  #top-quote { position: static; width: auto; padding: 14px 16px 16px; font-size: 14px; }
  #top-quote .quote-title { font-size: 13px; }
  #top-quote .home-quote { font-size: 17px; line-height: 1.5; }
  #newsblock { float: none; width: auto; height: auto; margin: 0 12px 12px; padding: 16px; font-size: 16px; line-height: 1.4; }
  #newsblock h3 { font-size: 18px; }
  #newsblock li a { line-height: 1.35; padding: 10px 10px 10px 15px; min-height: 44px; }
  #newsblock p a { display: inline-block; padding: 12px 0; }
  #home-feature { width: auto; height: auto; margin: 0 12px 12px; padding: 16px; }
  #home-feature h3 { font-size: 18px; }
  #home-feature p, #home-feature li { font: 16px/1.5 Arial, sans-serif; }
  #home-feature-left, #home-feature-right { float: none; width: auto; padding: 0; background: none; }
  #home-feature-right { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,251,220,.25); }
  #home-feature-left ul, #home-feature-right ul { margin-left: 18px; }
  #home-feature a { display: inline-block; padding: 10px 0; }
  #feature-wrap { margin: 0 12px; padding: 0; }
  #feather { display: none; }
  #footer-feature { height: auto; display: flex; flex-direction: column-reverse; }
  #home-special { float: none; width: 100%; height: auto; aspect-ratio: 567 / 53; background-size: 100% 100%; }
  #home-special a { width: 100%; height: 100%; }
  #home-consult { width: auto; padding: 14px 16px; font-size: 18px; }
  #home-consult a { display: block; min-height: 24px; padding: 6px 0; }

  /* ---------- Inner pages ---------- */
  #pageheading { width: auto; height: auto; margin: 12px; padding: 10px 4px; overflow: hidden; }
  #pageheading h1 { float: none; margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
  #pageheading p { font-size: 12px; padding: 0; }
  #left-wrap { width: auto; min-height: 0; margin: 0 12px; }
  #left { width: auto; padding: 16px; margin-top: 0; font: 17px/1.6 Georgia, Times, serif; overflow-wrap: break-word; }
  #summary { width: auto; padding: 16px; font-size: 16px; }
  #right-wrap { float: none; width: auto; padding: 0; margin: 12px; }
  .right-pad { font-size: 15px; line-height: 1.6; }
  .right-serif { font-size: 16px; }
  .float-r, .float-l, .sprinkles, .blog_photo { max-width: 50%; }
  .float-r img, .sprinkles img, .blog_photo img { max-width: 100%; height: auto; }
  #left table { display: block; max-width: 100%; overflow-x: auto; }
  #controls { width: auto; }
  .galleryimg, .port-wrap { max-width: 100%; }
  .links a { word-break: break-word; }
  #sidebar { font-size: 15px; line-height: 1.4; }
  #sidebar .sidetitle { font-size: 16px; }
  .arrows ul li { padding: 0 0 0 18px; line-height: 1.35; background-position: 0 14px; }
  .arrows ul li a { display: block; padding: 9px 0; }
  #blog .posted { font-size: 14px; line-height: 1.5; }
  #blog .posted a { display: inline-block; padding: 10px 0; }

  /* ---------- Forms (consultation) ---------- */
  .contactForm { margin: 0; padding: 0; }
  .contactForm ul label { float: none; width: auto; display: block; padding: 10px 0 4px; font-size: 16px; }
  .contactForm .txtField, .contactForm select { float: none; width: 100%; min-height: 44px; margin: 0 0 4px; padding: 10px; font: 16px/1.3 Arial, sans-serif; border-radius: 4px; }
  .contactForm .send { display: block; width: 100%; height: auto; min-height: 48px; margin: 16px 0 0; padding: 0; font-size: 16px;
    background: #4b799b; border-radius: 6px; color: #fff; }
  .pd-turnstile { max-width: 100%; margin: 10px 0 4px; clear: both; }
  .pd-turnstile iframe { max-width: 100%; }

  /* ---------- Footer ---------- */
  #foot { width: auto; margin: 12px 12px 24px; font: bold 15px/1.4 'lucida grande', sans-serif; }
  #foot-right { float: none; text-align: left; margin: 0 0 8px; }
  #foot ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  #foot ul li { line-height: 1; }
  #foot ul li { display: block; padding: 0; }
  #foot ul a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Click-to-call bar ---------- */
  .pd-callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(54, 47, 36, .97); box-shadow: 0 -2px 10px rgba(0,0,0,.3); }
  .pd-callbar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 8px; white-space: nowrap; padding: 0 8px;
    font: bold 16px/1.2 'lucida grande', tahoma, sans-serif; text-decoration: none; text-align: center; color: #fff; }
  .pd-callbar .pd-callbar-tel { background: #4b799b; flex-grow: 1.3; }
  .pd-callbar .pd-callbar-cta { background: #7a6a3e; }
  .pd-callbar svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
  .pd-callbar a:focus-visible { outline: 3px solid #ffe28a; outline-offset: 2px; }
}

@media (max-width: 400px) {
  .pd-callbar a { font-size: 15px; }
  .pd-callbar svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pd-menu-btn .pd-bars, .pd-menu-btn .pd-bars::before, .pd-menu-btn .pd-bars::after, .pd-sub-btn span { transition: none; } }