/* ================================================================
   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
   ================================================================ */

/* --- 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;
  }
}

/* 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;
  }
}

/* --- Phone: simplified header, show mobile photo, stack comments --- */
@media (max-width: 600px) {
  /* 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;
  }
}