/* =========================================================
   CECIL Official v1.0.110 — sitewide responsive safety layer
   ---------------------------------------------------------
   Final cascade layer loaded after route CSS, framework,
   unified hero and line-break rules.

   Goals
   - FAQ question text must never rotate/skew/move when opened.
   - Only explicit accordion toggles may rotate.
   - Prevent horizontal overflow on 320–430px smartphones.
   - Release legacy nowrap/fixed-width rules on small screens.
   - Keep grids/flex children shrinkable and copy readable.
========================================================= */

/* ---------- FAQ interaction safety: all routes ---------- */
main [class*="faq"] details,
main [class*="faq"] details > summary,
main [class*="faq"] details > summary > * {
  min-width:0;
  max-width:100%;
}

main [class*="faq"] details > summary {
  width:100%;
  box-sizing:border-box;
  transform:none!important;
  rotate:none!important;
  skew:none!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}

/* Question labels/text are always static.  This intentionally excludes the
   dedicated toggle and SVG chevrons, which may animate independently. */
main [class*="faq"] details > summary > :not(.cecil-faq-toggle):not(svg) {
  transform:none!important;
  rotate:none!important;
  skew:none!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}

main [class*="faq"] details > summary > .cecil-faq-toggle {
  flex:0 0 auto;
  min-width:1.45em;
  transform:none!important;
  rotate:none!important;
  transform-origin:center!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  transition:transform .18s ease;
}

main [class*="faq"] details[open] > summary > .cecil-faq-toggle {
  transform:rotate(45deg)!important;
}

/* Dedicated FAQ directory uses the same explicit toggle contract. */
main .faq-item[open] > summary > .faq-toggle.cecil-faq-toggle {
  transform:rotate(45deg)!important;
}

/* ---------- Generic responsive containment ---------- */
@media (max-width:760px) {
  html,
  body {
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
  }

  main,
  main section,
  main article,
  main aside,
  main nav,
  main header,
  main footer,
  main div,
  main details,
  main summary {
    min-width:0;
  }

  main img,
  main picture,
  main video,
  main canvas,
  main svg,
  main iframe {
    max-width:100%;
  }

  main iframe,
  main video {
    width:100%;
  }

  main input,
  main select,
  main textarea,
  main button {
    max-width:100%;
  }

  main :where(h1,h2,h3,h4,h5,h6,p,li,dd,dt,summary,blockquote,figcaption,small,strong) {
    max-inline-size:100%;
    white-space:normal!important;
  }

  html[lang="ja"] main :where(h1,h2,h3,h4,h5,h6,p,li,dd,dt,summary,blockquote,figcaption,small,strong) {
    line-break:strict;
    word-break:normal;
    word-break:auto-phrase;
    overflow-wrap:break-word;
  }

  /* Flex/grid children frequently cause hidden overflow when their content has
     an intrinsic width. Make every common content child shrinkable. */
  main :where([class*="grid"],[class*="layout"],[class*="inner"],[class*="actions"],[class*="features"]) > * {
    min-width:0;
    max-width:100%;
  }

  /* Buttons may wrap on narrow screens. Fixed bottom navigation is handled
     separately so all three booking labels remain usable at 320px. */
  main .btn,
  main [class*="actions"] a {
    max-width:100%;
    white-space:normal!important;
    text-align:center;
    line-height:1.45;
  }

  /* Legacy menu-page rules forced these headings onto a single line, which can
     overflow at 320/360px. Natural wrapping is the intended mobile behaviour. */
  .service-menu-faq .service-menu-section-head h2,
  .service-menu-final-inner h2[data-cecil-key="menu.t085"] {
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    text-wrap:pretty!important;
  }

  /* FAQ rows: reserve stable space for the icon and let the question use the
     remaining width. This applies to menu, price, salon, access, dispatch,
     hotel, home, couple and the dedicated FAQ directory. */
  main [class*="faq"] details > summary {
    overflow:visible;
    line-height:1.65;
  }

  main [class*="faq"] details > summary > :not(.cecil-faq-toggle):not(svg) {
    min-width:0;
    max-width:100%;
    overflow-wrap:break-word;
    text-wrap:pretty;
  }

  .service-menu-faq-list summary,
  .price-faq-list summary,
  .salon-faq-list summary,
  .access-faq-list summary,
  .dispatch-home-faq-list summary,
  .dispatch-hotel-faq-list summary,
  .dispatch-contact-faq-list summary,
  .couple-faq-list summary {
    gap:12px!important;
    padding-left:16px!important;
    padding-right:16px!important;
    align-items:center!important;
  }

  .service-menu-faq-list summary > :first-child,
  .price-faq-list summary > :first-child,
  .salon-faq-list summary > :first-child,
  .access-faq-list summary > :first-child,
  .dispatch-home-faq-list summary > :first-child,
  .dispatch-hotel-faq-list summary > :first-child,
  .dispatch-contact-faq-list summary > :first-child,
  .couple-faq-list summary > :first-child {
    flex:1 1 auto;
    min-width:0;
    padding-right:0!important;
  }

  .service-menu-faq-list details p,
  .price-faq-list details p,
  .salon-faq-list details p,
  .access-faq-list details p,
  .dispatch-home-faq-list details p,
  .dispatch-hotel-faq-list details p,
  .dispatch-contact-faq-list details p,
  .couple-faq-list details p {
    max-width:100%;
    overflow-wrap:break-word;
  }

  /* Dedicated /faq/ cards need enough room for Q + copy + toggle without the
     middle column overflowing on smaller iPhones. */
  .faq-page .faq-item summary {
    grid-template-columns:30px minmax(0,1fr) 24px!important;
    gap:9px!important;
    padding:14px 12px!important;
    align-items:center!important;
  }
  .faq-page .faq-item summary strong {
    min-width:0;
    max-width:100%;
    overflow-wrap:break-word;
    text-wrap:pretty;
  }
  .faq-page .faq-answer {
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:9px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .faq-page .faq-answer p {
    min-width:0;
    max-width:100%;
    overflow-wrap:break-word;
  }

  /* Safe tables: existing purpose-built scrollers remain scrollable, while a
     bare table can never enlarge the entire viewport. */
  main :where(.first-table-wrap,.reasons-table-wrap,.legal-table-wrap) {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Fixed three-way booking bar. */
  .mobile-contact {
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    max-width:calc(100vw - 16px)!important;
  }
  .mobile-contact a {
    min-width:0!important;
    padding:7px 4px!important;
    font-size:clamp(.66rem,2.9vw,.76rem)!important;
    line-height:1.3!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
  .mobile-contact svg {
    flex:0 0 auto;
  }

  /* Popup/back-to-top must stay inside the safe viewport. */
  .cecil-line-promo {
    max-width:calc(100vw - 24px)!important;
  }
  .back-to-top {
    max-width:calc(100vw - 28px)!important;
  }
}

@media (max-width:430px) {
  /* Consistent 12px page gutters on compact phones. Route-specific containers
     that already use the same value are unaffected. */
  main .container {
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
  }

  .service-menu-faq-list summary,
  .price-faq-list summary,
  .salon-faq-list summary,
  .access-faq-list summary,
  .dispatch-home-faq-list summary,
  .dispatch-hotel-faq-list summary,
  .dispatch-contact-faq-list summary,
  .couple-faq-list summary {
    padding-left:14px!important;
    padding-right:14px!important;
    gap:10px!important;
  }
}

@media (max-width:360px) {
  .faq-page .faq-item summary {
    grid-template-columns:28px minmax(0,1fr) 22px!important;
    gap:8px!important;
    padding:13px 10px!important;
  }
  .faq-page .faq-answer {
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:8px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .mobile-contact {
    left:6px!important;
    right:6px!important;
    max-width:calc(100vw - 12px)!important;
  }
  .mobile-contact a {
    padding-left:3px!important;
    padding-right:3px!important;
    font-size:.66rem!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  main [class*="faq"] details > summary > .cecil-faq-toggle {
    transition:none!important;
  }
}