/* ==========================================================================
   Gogarty – responsive layer
   Loaded after style.css. Desktop (>1100px) only gets the body fix below.
   ========================================================================== */

/* All sizes: the theme's menu, events strip and home boxes are positioned
   against <body> (they sit outside #page). Making <body> the positioning
   reference from the start stops them jumping ~32px when the WordPress admin
   bar is showing or Google Translate loads and makes <body> relative. */
body { position: relative; }

/* All sizes: the "Musical Pub Crawl" home box link is broken, so the box
   is no longer clickable */
#boxDublinFriday a { pointer-events: none; cursor: default; }

/* Mobile menu button and the social row inside the mobile menu –
   hidden except on phones */
#gog-menu-toggle,
#menu .gog-menu-social { display: none; }

/* --------------------------------------------------------------------------
   TABLET & BELOW (≤1100px): switch from absolute positioning to normal flow
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  body { min-width: 0 !important; }
  html { overflow-x: hidden; }
  #page { overflow-x: hidden; }

  /* ---- Header ----
     Original green bar + shield (gogartyBanner.png) with the logo in the
     shield. Everything else is laid over the bar:
       tablet: flag (left) + social icons (right) on top, menu split
               left/right of the logo underneath
       phone:  flag (left) + hamburger (right)
     #banner is flattened (display:contents) so its children position
     against #page. */
  #page { position: relative; }
  #masthead { background: none; }
  #banner { display: contents; }
  #newsletter, #shop { display: none !important; }

  #topLogo {
    position: relative;
    top: auto; left: auto;
    width: auto;
    height: 205px;
    box-sizing: border-box;
    padding-top: 34px;
    margin: 0;
    background: url("images/gogartyBanner.png") center top no-repeat;
  }
  #topLogo a { display: block; }
  #topLogo img {
    display: block;
    position: relative;
    left: -4px;
    width: 300px;
    max-width: 92%;
    margin: 6px auto 0;
  }

  /* Language picker shown as a flag; Google's <select> sits invisibly on top
     so tapping the flag opens the normal language list */
  #language {
    position: absolute;
    z-index: 30;
    top: 68px;
    left: 14px;
    right: auto;
    margin: 0;
    width: 36px;
    height: 24px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23169b62'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23ff883e'/%3E%3C/svg%3E") center / cover no-repeat;
  }
  #language::after {
    content: "\25BE";
    position: absolute;
    left: 40px;
    top: 2px;
    font-size: 14px;
    color: #343522;
    pointer-events: none;
  }
  #language #google_translate_element,
  #language .goog-te-gadget,
  #language .goog-te-gadget > div {
    position: static;
    font-size: 0;
    color: transparent;
  }
  #language .goog-te-gadget > span,
  #language .goog-logo-link { display: none !important; }
  #language .goog-te-combo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
  }

  #social {
    position: absolute;
    z-index: 30;
    top: 67px;
    right: 14px;
    margin: 0;
    display: flex;
    gap: 6px;
  }
  #social img { display: block; height: 26px; width: auto; }

  /* ---- Main menu on the bar, one line either side of the logo ----
     Font scales with screen width: ~11px on a 768px iPad, 12px at 820px,
     13px from 900px up. */
  #menu {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: 0;
    margin: 0;
  }
  #menuLeft, #menuRight {
    position: absolute;
    z-index: 30;
    top: 112px;
    height: 36px;
    float: none;
    display: flex;
    align-items: center;
  }
  /* Items hug the logo; any spare room is left at the outer edges */
  #menuLeft  { left: 4px;  right: calc(50% + 140px); justify-content: flex-end; }
  #menuRight { right: 4px; left: calc(50% + 140px);  justify-content: flex-start; }
  #menu ul {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
  }
  #menu li { float: none; max-width: none; overflow: visible; }
  #menu a {
    padding: 4px 3px;
    font-size: clamp(11px, 1.45vw, 13px);
    white-space: nowrap;
  }

  /* Slides start at the bottom edge of the green bar, with the shield
     hanging over them, as on desktop (bar ends 166px down; header is 205px) */
  #slider {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 1000px;
    margin: -39px auto 0;
  }
  /* The slideshow plugin hard-codes a 483px height; scale it with the width */
  #slider .slideshow_container,
  #slider .slideshow_content,
  #slider .slideshow_view,
  #slider .slideshow_slide {
    height: min(48.4vw, 483px) !important;
  }
  #slider .slideshow_slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* ---- "Dublin Events Live" ribbon ----
     Ribbon ends (stripLeft/Right.png) either side, gold middle stretches.
     strip.png has a darker title panel in its first 244px which shows as a
     vertical line, so only the plain part of the image (x 245-992) is used:
     one copy anchored right, a second copy covering the left-hand side. */
  #stripWrapper {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    width: auto;
    height: 66px;
    margin: 0;
    left: auto; top: auto;
  }
  #stripLeft, #stripRight {
    display: block;
    float: none;
    flex: 0 0 auto;
  }
  #strip {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 64px;
    box-sizing: border-box;
    padding: 8px 6px 0 10px;
    overflow: hidden;
    background:
      url("images/strip.png") -245px 0 no-repeat,
      url("images/strip.png") right 0 no-repeat;
  }
  #stripInfo { float: none; text-align: left; }
  #stripTitle { padding-top: 0; font-size: 13px; line-height: 16px; }
  #stripCredit { display: none; }
  #stripMarquee { float: none; width: auto; padding-top: 1px; font-size: 17px; line-height: 22px; }

  /* ---- Home boxes: keep each box at its designed size, let them wrap ---- */
  #boxWrapper {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 20px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 12px;
  }
  #boxMap, #boxDublinFriday, #boxAccommodation {
    float: none;
    margin: 0;
    flex: 0 0 323px;
  }
  #boxWrapper > a { display: block; }
  /* Boxes scaled up to fill the width (zoom set by responsive.js), keeping
     each box's artwork and booking form in proportion */
  #boxMap, #boxDublinFriday, #boxWrapper #boxAccommodation { zoom: var(--gog-box-zoom, 1); }
  /* Order on mobile/iPad: booking box, pub crawl, map */
  #boxAccommodation { order: 1; }
  #boxDublinFriday  { order: 2; }
  #boxWrapper > a   { order: 3; }

  #freeDrink {
    position: static;
    margin: 0 auto 20px !important;
  }

  /* ---- Inner-page booking boxes (apartments / hostel) ---- */
  #main #boxAccommodation,
  #hostelAccommodation,
  .page-id-20 #boxAccommodation {
    position: relative;
    float: none;
    margin: 0 auto 20px !important;
  }

  /* ---- Content area ---- */
  #main {
    width: auto;
    max-width: 992px;
    margin: 20px auto 0;
    padding: 0 12px 60px;
  }
  #content { padding: 24px; }
  #content img { max-width: 100%; height: auto; }
  #content iframe, #content video, #content embed { max-width: 100%; }
  /* Videos sitting inline in a paragraph: put the text underneath */
  #content iframe { display: block; margin-bottom: 16px; }
  /* Page slideshows (jQuery Cycle Lite) use absolutely-positioned slides in
     a fixed-height box. Stack the slides in one grid cell instead so the box
     takes the real height of the (now scaled) images. */
  .cycle_lite_container div[style*="relative"] {
    display: grid !important;
    height: auto !important;
    clear: both;   /* never squeeze in beside a floated block */
  }
  .cycle_lite_container div[style*="relative"] > * {
    grid-area: 1 / 1;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  .entry-content .left,
  .entry-content .right {
    width: auto;
    float: none;
    margin: 0 0 20px !important;
  }
  .entry-content > table td { width: auto; }
  #bookAppartment { width: 100%; }

  #third1, #third2, #third3 {
    height: auto;
    width: calc(50% - 10px);
    margin-right: 0;
  }
  #third1 { margin-right: 20px; }

  .etabs { padding-left: 0; }
  #positionTca, #positionTch { position: static; }
  /* Empty spacer lines in page content (flagged by responsive.js) */
  .gog-empty { display: none !important; }

  .site-info { width: auto; padding: 8px 12px; }
  #colophon { height: auto; padding: 6px 10px; box-sizing: border-box; }
}

/* --------------------------------------------------------------------------
   PHONES (≤767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Header scaled to 70% so the flag and hamburger fit beside the logo */
  #topLogo {
    height: 146px;
    padding-top: 24px;
    background-size: 1120px 164px;
  }
  #topLogo img { width: 245px; left: -3px; margin-top: 0; }
  #language { top: 62px; left: 12px; }
  #slider { margin-top: -30px; }
  #social { display: none; }

  /* Hamburger on the bar, right-hand side */
  #gog-menu-toggle {
    display: block;
    position: absolute;
    z-index: 40;
    top: 54px;
    right: 8px;
    width: 44px;
    height: 40px;
    margin: 0;
    padding: 9px 8px;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    background: transparent;
    cursor: pointer;
  }
  #gog-menu-toggle span {
    display: block;
    height: 3px;
    margin: 0 0 6px;
    border-radius: 2px;
    background: #450000;
  }
  #gog-menu-toggle span:last-child { margin-bottom: 0; }
  #gog-menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.25); }

  /* Drop-down menu under the header */
  #menu { display: none; height: auto; }
  /* Opens from behind the logo bar: pulled up 30px under the header
     (#masthead is z-index 10), padded so the first item clears the bar.
     Textured green at the bar's own (fine) scale: each row takes a
     different plain patch of the bar image, so nothing visibly repeats and
     the joins fall on the row divider lines. */
  #menu.is-open {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: -30px 0 0;
    padding-top: 30px;
    z-index: 5;
    background: #92a43b url("images/gogartyBanner.png") -200px -60px no-repeat;
    box-shadow: 0 4px 8px rgba(0,0,0,.4);
  }
  #menuLeft, #menuRight {
    position: static;
    height: auto;
    display: block;
  }
  #menu ul { display: block; }
  #menu li,
  #menu .gog-menu-social {
    border-bottom: 1px solid rgba(0,0,0,.18);
    text-align: center;
  }
  #menuLeft li:first-child { border-top: 1px solid rgba(0,0,0,.18); }
  #menu li,
  #menu .gog-menu-social {
    background: #92a43b url("images/gogartyBanner.png") no-repeat;
  }
  #menuLeft  li:nth-child(1) { background-position: -40px  -55px; }
  #menuLeft  li:nth-child(2) { background-position: -180px -90px; }
  #menuLeft  li:nth-child(3) { background-position: -60px  -100px; }
  #menuLeft  li:nth-child(4) { background-position: -220px -60px; }
  #menuRight li:nth-child(1) { background-position: -120px -75px; }
  #menuRight li:nth-child(2) { background-position: -250px -95px; }
  #menuRight li:nth-child(3) { background-position: -90px  -65px; }
  #menu .gog-menu-social     { background-position: -160px -52px; }
  #menu .gog-menu-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 0;
  }
  #menu .gog-menu-social img { display: block; height: 32px; width: auto; }
  #menu a { padding: 14px 10px; font-size: 15px; }

  #stripTitle { font-size: 12px; }
  #stripMarquee { font-size: 15px; }

  #boxWrapper { padding: 16px 0; }
  /* Apartments / Hostel booking boxes: same scaled size as the home box */
  #main #boxAccommodation,
  #hostelAccommodation { zoom: var(--gog-box-zoom, 1); }

  #main { padding: 0 8px 20px; margin-top: 12px; }
  #content { padding: 16px; }

  .entry-content > table,
  .entry-content > table tbody,
  .entry-content > table tr,
  .entry-content > table td { display: block; width: auto; }

  #third1, #third2, #third3 { width: auto; float: none; margin-right: 0 !important; }

  #specialOffer, #specialOffer1, #positionTca, #positionTch {
    position: static;
  }

  .tab { margin: 6px; }

  /* Larger left/right-aligned photos (flagged by responsive.js): centred */
  .entry-content img.gog-wide-img {
    float: none;
    display: block;
    margin: 0 auto 20px;
  }

  /* Footer: let it grow and sit in the flow instead of a fixed 40px bar */
  #colophon {
    box-sizing: border-box;
    position: static;
    height: auto;
    padding: 10px 12px;
  }
  #colophon div { line-height: 1.6; }

  /* Fonts.com "View all fonts" badge: hidden on phones */
  #mti_wfs_colophon { display: none !important; }
}

/* iPads: three boxes across, scaled down just enough to fit (10px steps) */
@media (min-width: 768px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.74; } }
@media (min-width: 780px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.753; } }
@media (min-width: 790px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.763; } }
@media (min-width: 800px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.773; } }
@media (min-width: 810px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.784; } }
@media (min-width: 820px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.794; } }
@media (min-width: 830px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.804; } }
@media (min-width: 840px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.815; } }
@media (min-width: 850px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.825; } }
@media (min-width: 860px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.835; } }
@media (min-width: 870px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.846; } }
@media (min-width: 880px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.856; } }
@media (min-width: 890px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.866; } }
@media (min-width: 900px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.877; } }
@media (min-width: 910px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.887; } }
@media (min-width: 920px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.897; } }
@media (min-width: 930px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.908; } }
@media (min-width: 940px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.918; } }
@media (min-width: 950px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.928; } }
@media (min-width: 960px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.939; } }
@media (min-width: 970px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.949; } }
@media (min-width: 980px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.959; } }
@media (min-width: 990px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.97; } }
@media (min-width: 1000px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.98; } }
@media (min-width: 1010px) and (max-width: 1100px) { :root { --gog-box-zoom: 0.99; } }
@media (min-width: 1020px) and (max-width: 1100px) { :root { --gog-box-zoom: 1.0; } }

/* Phones: booking/home boxes (designed at 323px) scaled to nearly fill the
   width. Pure CSS in 10px steps so the boxes are the right size on first
   paint (no jump). Used by the home boxes and the Apartments/Hostel boxes. */
@media (min-width: 320px) and (max-width: 767px) { :root { --gog-box-zoom: 0.91; } }
@media (min-width: 330px) and (max-width: 767px) { :root { --gog-box-zoom: 0.941; } }
@media (min-width: 340px) and (max-width: 767px) { :root { --gog-box-zoom: 0.972; } }
@media (min-width: 350px) and (max-width: 767px) { :root { --gog-box-zoom: 1.003; } }
@media (min-width: 360px) and (max-width: 767px) { :root { --gog-box-zoom: 1.034; } }
@media (min-width: 370px) and (max-width: 767px) { :root { --gog-box-zoom: 1.065; } }
@media (min-width: 380px) and (max-width: 767px) { :root { --gog-box-zoom: 1.095; } }
@media (min-width: 390px) and (max-width: 767px) { :root { --gog-box-zoom: 1.126; } }
@media (min-width: 400px) and (max-width: 767px) { :root { --gog-box-zoom: 1.157; } }
@media (min-width: 410px) and (max-width: 767px) { :root { --gog-box-zoom: 1.188; } }
@media (min-width: 420px) and (max-width: 767px) { :root { --gog-box-zoom: 1.219; } }
@media (min-width: 430px) and (max-width: 767px) { :root { --gog-box-zoom: 1.25; } }
@media (min-width: 440px) and (max-width: 767px) { :root { --gog-box-zoom: 1.281; } }
@media (min-width: 450px) and (max-width: 767px) { :root { --gog-box-zoom: 1.312; } }
@media (min-width: 460px) and (max-width: 767px) { :root { --gog-box-zoom: 1.343; } }
@media (min-width: 470px) and (max-width: 767px) { :root { --gog-box-zoom: 1.374; } }
@media (min-width: 480px) and (max-width: 767px) { :root { --gog-box-zoom: 1.4; } }