/* Shared mobile presentation for every page; home-specific rules load after this. */
@media (width < 48rem) {
  #main-content .service-catalog-actions,
  #main-content .service-intro-actions > a[href*="line.me"] {
    display: none;
  }
  #main-content .service-catalog a.reveal,
  #main-content .service-catalog div.reveal.rounded-md {
    background-color: #fff;
    border-color: #d8e1eb;
    color: #10243e;
  }
  #main-content .service-catalog a.reveal > p,
  #main-content .service-catalog a.reveal > ul {
    color: #5c6b7e;
  }
  #main-content .service-catalog a.reveal > div,
  #main-content .service-catalog a.reveal > span,
  #main-content .service-catalog a.reveal li::marker {
    color: #1261a6;
  }
  #main-content .service-catalog a.reveal span[aria-hidden="true"].grid {
    background-color: #e9f2fa;
    color: #0b5797;
  }
  #main-content p.uppercase {
    display: none;
  }
  #main-content h1 {
    font-size: clamp(1.375rem, 6vw, 2rem);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #main-content p.uppercase + h1,
  #main-content p.uppercase + h2 {
    margin-top: 0;
  }
  #main-content:not(:has(#hero)) > section[class~="bg-[#f3f7fb]"] {
    background-color: #fff7ed;
  }
  #main-content .border-l-2 {
    border-left-color: #d97706;
  }
  #main-content .mobile-price {
    color: #b45309;
  }
  #main-content .mobile-price.text-white {
    color: #fbbf24;
  }
  #main-content a[href*="line.me"][class*="min-h-"] {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #fff;
  }
  #main-content a[href*="line.me"][class*="min-h-"]:hover,
  #main-content a[href*="line.me"][class*="min-h-"]:active {
    background-color: #115e59;
    border-color: #115e59;
  }
  body > a.fixed,
  #contact a {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 10px 28px rgba(15, 118, 110, 0.24);
  }
  body > a.fixed:hover,
  body > a.fixed:active,
  #contact a:hover,
  #contact a:active {
    background-color: #115e59;
    border-color: #115e59;
  }
  body > a.fixed:focus-visible,
  #contact a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #115e59;
  }
  footer {
    padding-top: 2rem;
  }
  footer > div > .grid {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 0;
  }
  footer a > span:has(.footer-logo) {
    width: 10rem;
    height: 6rem;
  }
  footer nav > p {
    margin-bottom: 0.75rem;
  }

  /* ── About page expertise tags: force 2 rows on mobile ──── */
  #main-content .about-expertise-tags {
    gap: 0.25rem;
  }
  #main-content .about-expertise-tags li {
    font-size: 0.625rem;
    line-height: 1.3;
    padding: 0.3rem 0.5rem;
    gap: 0.25rem;
    border-radius: 0.375rem;
    white-space: nowrap;
  }
  #main-content .about-expertise-tags li [data-lucide] {
    width: 0.75rem;
    height: 0.75rem;
  }
  #main-content .about-expertise-tags li:nth-child(4),
  #main-content .about-expertise-tags li:nth-child(5) {
    font-size: 0.5625rem;
    padding-inline: 0.45rem;
  }

  /* ── Service sub-page bottom navigator: single line, compact ──── */
  #main-content .service-detail-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    padding-bottom: 0.375rem;
    margin-right: -1rem;
    margin-left: -1rem;
    padding-inline: 1rem;
  }
  #main-content .service-detail-nav::-webkit-scrollbar {
    display: none;
  }
  #main-content .service-detail-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    border-radius: 0.375rem;
  }

  /* ── Header mobile: show brand name + small menu button (height restored to desktop) ──── */
  .site-header a[aria-label$="หน้าแรก"] > span:last-child {
    display: block !important;
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    line-height: 1.1;
    white-space: nowrap;
  }
  .site-header .menu-button {
    min-height: 2rem;
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.375rem;
  }

  /* ── Footer mobile: hide tagline ──── */
  footer .flex.flex-col > p.mt-6 {
    display: none;
  }
}