/* ================================================================
   Responsive overrides — desktop-first.
   Breakpoints:
     1060px — fluid outer shell (all pages)
     1024px — tablet: unstack sidebar, flatten inner columns
      600px — phone: stack comments, fluid images, touch targets
   ================================================================ */

/* Mobile HP button list — hidden by default, shown at phone width */
#mobile-hp {
  display: none;
}
#mobile-hp h1#hometitle {
  font-size: 1.2em;
  margin: 8px 10px;
  color: #333;
}
#mobile-hp-buttons {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #c8c8c8;
  margin: 0 10px;
  background: #fff;
}
a.home-button-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.home-button-link + a.home-button-link .home-button {
  border-top: 1px solid #d0d0d0;
}
.home-button {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  background: #fff;
  min-height: 50px;
}
.home-button:active {
  background: #e8e8e8;
}
.home-button-icon {
  width: 36px;
  text-align: center;
  font-size: 18px;
  flex-shrink: 0;
  color: #555;
}
.home-button-text {
  flex: 1;
  font-size: 16px;
  padding: 0 8px;
  line-height: 1.3;
}
.home-button-text strong {
  display: block;
}
.home-button-sub {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 1px;
}
.home-button-chevron {
  color: #aaa;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
#mobile-hp > p {
  margin: 12px 10px 0;
  font-size: 14px;
}

/* --- Fluid outer shell --- */
@media (max-width: 1060px) {
  #outer_wrapper {
    width: 100%;
    background-image: none;
  }
  #wrapper {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 5px;
    box-sizing: border-box;
  }
  #main1col, #main2col {
    width: 100%;
    box-sizing: border-box;
  }
  /* Header and nav fixed widths — these cause the main overflow */
  #header, #headerold {
    width: 100%;
    box-sizing: border-box;
  }
  div#mainnav {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    overflow: hidden; /* contains the floated li children so the next element clears below it */
  }
  #headertoplinks {
    overflow: hidden;
  }
  div#oldfooter {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Mobile photo block hidden by default (shown only at 600px) */
#mobile-photo {
  display: none;
}

/* .img-shadow-center has float:left in default.css — clear it inside the show page columns
   at tablet width so photo and details stack vertically */
@media (max-width: 1024px) {
  #restomainright .img-shadow-center,
  #restomainleft .img-shadow-center,
  #restoresaleft .img-shadow-center,
  #restoresaright .img-shadow-center {
    float: none;
    width: 100%;
    margin: 0;
    background-image: none;
  }
  #restomainright .img-shadow-center img,
  #restomainleft .img-shadow-center img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* --- Tablet: unstack sidebar and inner columns (show page) --- */
@media (max-width: 1024px) {
  /* Flex container on the restopage wrapper reorders sidebar below main */
  #restopage {
    display: flex;
    flex-direction: column;
    clear: both;
  }
  #restomain, .restomain {
    order: 1;
    float: none;
    width: 100%;
  }
  #restomargin {
    order: 2;
    float: none;
    width: 100%;
    padding: 8px 0 20px;
  }
  /* Non-reservable inner columns */
  #restomainleft, .restomainleft {
    float: none;
    width: 100%;
  }
  #restomainright {
    float: none;
    width: 100%;
    padding: 0 0 8px;
  }
  /* Reservable inner columns */
  #restoresaleft, #restoresaright {
    float: none;
    width: 100%;
  }
  /* Fixed-width blocks inside restomain */
  #restoactions {
    width: 100%;
    box-sizing: border-box;
  }
  #promobar {
    width: 100%;
    box-sizing: border-box;
  }
  #votedetails {
    width: 100%;
    box-sizing: border-box;
  }
  #votedetails > #voteaverage,
  #votedetails > #votetype {
    float: none;
    width: 100%;
  }
  .leftcol, .rightcol {
    float: none;
    width: 100%;
    display: block;
  }

  /* List page: unstack two-column layout */
  #list-header {
    float: none;
    width: 100%;
  }
  #ob3clistmain {
    float: none;
    width: 100%;
  }
  #ob3clistright {
    float: none;
    width: 100%;
  }
  #ob3clistleft {
    float: none;
    width: 100%;
    margin-right: 0;
  }
  /* Map blocks: inline styles on #hpdynmap need !important */
  #hpstaticmap300 {
    float: none;
    width: 100%;
    height: 200px;
  }
  #hpdynmap {
    float: none !important;
    width: 100% !important;
    height: 200px !important;
  }
  .latestbox {
    float: none;
    width: 100%;
  }
  .ob2cgoogad300x250 {
    float: none;
  }

  /* HP page: unstack fixed-width float columns */
  #hpdyncontent {
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
  }
  #hptoprightcol {
    float: none;
    width: 100%;
  }
  #hpmaincol {
    float: none;
    width: 100%;
    margin-right: 0;
  }
  #hpleftcol, #hpleftcollinks {
    float: none;
    width: 100%;
    margin-right: 0;
  }
  .hpleftcolimg {
    float: none;
    width: 100%;
  }
}

/* --- Phone: simplified header, show mobile photo, stack comments --- */
@media (max-width: 600px) {
  /* Mobile HP: show button list, hide full desktop layout */
  #mobile-hp {
    display: block;
  }
  #hp-desktop {
    display: none;
  }

  /* Hide search form — too wide for phone header */
  #headersearch {
    display: none;
  }
  /* Full-width logo: unset float, stretch to fill header */
  #header, #headerold {
    padding: 0;
    overflow: hidden;
  }
  img#headerimg {
    float: none;
    display: block;
    width: 100%;
    height: auto !important;
  }
  /* Hide the town list links (Paris | Lyon | …) — no room on phone */
  #headertoplinks > span:not(.floatright) {
    display: none;
  }
  /* Mainnav: hide inline search form and Réservations link */
  div#mainnav > div {
    display: none;
  }
  div#mainnav li:has(#nav_RESERVATION) {
    display: none;
  }
  /* Breadcrumb: clear below the navbar */
  #restobreadcrumb {
    clear: both;
    display: block;
    width: 100%;
  }
  /* Mobile photo block: shown only on phone, full-width */
  #mobile-photo {
    display: block;
    width: 100%;
    overflow: hidden;  /* clearfix for the .img-shadow-center float */
    margin: 0;
    padding: 0;
  }
  #mobile-photo .img-shadow-center,
  #mobile-photo .img-shadow {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: none;
  }
  #mobile-photo #restophotobox {
    width: 100%;
    margin: 0;
  }
  #mobile-photo #restophotobox img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    margin: 0;
  }
  /* Hide the desktop-position photobox on phone (non-reservable: entire div is just the photo) */
  #restomainright {
    display: none;
  }
  /* For reservable layout: hide only the photo elements, keep reservation box visible */
  #restoresaleft #restophotobox,
  #restoresaleft #restophotocontrols,
  #restoresaleft #restophotoupload {
    display: none;
  }

  /* Restaurant tab bar: horizontally scrollable so tabs don't wrap */
  #navbar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background-image: none;
    border-bottom: 3px solid #FF6633;
  }
  #navbar ul {
    display: flex;
    flex-wrap: nowrap;
  }
  #navbar li, #navbar li#current {
    flex-shrink: 0;
    float: none;
  }
  #navbar li#current {
    border-bottom: 3px solid #fff;
    margin-bottom: -3px;
  }

  /* Comment layout: narrow avatar float (80px) so text stays alongside */
  .comment_user, .comment_user_photo {
    width: 80px;
    float: left;
    text-align: center;
    padding-bottom: 0;
  }
  .comment_box {
    margin-left: 85px;
  }
  .comment_actions {
    padding-left: 90px;
  }
  .comment_speech {
    left: 70px;
  }
  .commenttree {
    padding-left: 15px;
  }
  /* Fluid images */
  img {
    max-width: 100%;
    height: auto;
  }
  /* Phone call button: full-width tap target */
  .phone_button {
    display: block;
    text-align: center;
    padding: 12px 10px;
  }
  /* Search bar: override fixed desktop dimensions, reflow into two rows */
  #newhpdynform2 {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  #newhpdynform2 form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
  }
  #newhpdynform2 .floatleft,
  #newhpdynform2 .floatright {
    float: none;
  }
  /* Row 1 left: orange title — grows to fill available space */
  #newhpdynform2 form > .floatleft:first-child {
    flex: 1;
    min-width: 0;
    order: 1;
    padding-top: 0;
  }
  /* Row 1 right: Advanced search / Change town links */
  #newhpdynform2 form > span.floatright {
    order: 1;
    flex-shrink: 0;
    padding-top: 0;
    text-align: right;
  }
  /* Row 2: form fields + submit button */
  #newhpdynform2 form > .floatleft:not(:first-child) {
    order: 2;
    padding-top: 0;
  }

  /* List items: fluid width */
  .listitem {
    width: 100%;
    box-sizing: border-box;
  }
  /* Opening hours table */
  table#opentable {
    width: 100%;
  }
  #phone_tarif {
    width: 100%;
    box-sizing: border-box;
  }
  /* Action buttons: larger tap targets */
  .actionbutton {
    padding: 10px 14px;
    margin: 3px 2px;
    display: inline-block;
  }
}