/* ===== Claret-e Singapore: Design Revisions v1 - Global ===== */

/* Widen content area, reduce side white space */
:root {
  --wp--style--global--content-size: 800px;
  --wp--style--global--wide-size: 1600px;
}

/* Bigger logo (v2: +10% again) */
.custom-logo {
  width: 132px !important;
  height: auto !important;
}

/* Subtle textured off-white background site-wide */
body {
  background-color: #faf9f6;
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px), radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 2px 2px;
}

/* Body copy: Claret-e grey instead of black */
body, p, li, .wp-block-paragraph, .wp-block-list {
  color: #6b6f66;
}

/* Headline serif font + pink, matching UK site headline style */
h1, h2, h3, .wp-block-heading {
  font-family: Georgia, 'Playfair Display', 'Times New Roman', serif;
  color: #D60058;
}
h1 em, h2 em, h3 em, .wp-block-heading em {
  font-style: italic;
}

/* Header / nav v2: logo row stays on textured background, nav row is a narrow pink strip */
header.wp-block-template-part .alignwide.is-content-justification-space-between {
  flex-wrap: wrap;
  row-gap: 0;
  background-color: transparent !important;
}
/* Only the DIRECT child group wrapping the nav gets the pink strip (not the outer row, which also contains nav as a descendant) */
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) {
  background-color: #D60058;
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  padding: 6px 24px;
  margin-top: 10px;
}
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) nav.wp-block-navigation {
  justify-content: center;
  width: 100%;
}
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) a,
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) .wp-block-navigation-item__label {
  color: #fff !important;
}
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) svg,
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) path {
  fill: #fff !important;
  color: #fff !important;
}
/* Tagline next to logo */
.header-tagline {
  color: #6b6f66;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 19.5px;
  font-weight: 500;
  margin: 0 0 0 20px;
  align-self: flex-end;
}
/* Dropdown submenus: nudge down a bit so it's clearer there's more to explore */
.wp-block-navigation .wp-block-navigation__submenu-container {
  margin-top: 0 !important;
  padding-top: 10px !important;
  background-color: #D60058 !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation__submenu-container a {
  color: #ffffff !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__label {
  color: #f3d9e4 !important;
  text-decoration: underline;
}

/* Price-Led Approach: stack the 3 clickable areas into a single tight box */
.price-led-stack.wp-block-columns {
  flex-direction: column;
  gap: 6px !important;
}
.price-led-stack .wp-block-column {
  flex-basis: 100% !important;
  width: 100% !important;
}
.price-led-stack .wp-block-heading {
  margin: 0 !important;
  color: #ffffff !important;
}
.price-led-stack figure.wp-block-image {
  margin: 0 !important;
}
.price-led-stack figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Footer: keep all lines left-aligned (fix any inherited centering) */
footer.wp-block-template-part p {
  text-align: left;
}

/* Fix invisible dropdown submenus: white-on-white bug (v2) */
.wp-block-navigation__submenu-container {
  background-color: #D60058 !important;
  border: none;
  min-width: 220px;
}
.wp-block-navigation__submenu-container a,
.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  color: #ffffff !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > a,
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__label {
  color: #f3d9e4 !important;
  text-decoration: underline;
}

/* Submenu link color: higher-specificity override to beat the white nav-text rule */
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) .wp-block-navigation__submenu-container a,
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  color: #ffffff !important;
}
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > a,
.wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group.is-nowrap.is-layout-flex:has(nav.wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__label {
  color: #f3d9e4 !important;
  text-decoration: underline;
}

/* Home v2: shrink hero image so Best of Burgundy peeks underneath */
.home-hero-image img {
  max-height: 320px;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Home v2: Best of Burgundy box - flush top/bottom photo + copy, bigger photo */
.bob-columns {
  align-items: stretch !important;
}
.bob-columns .bob-photo {
  height: 100%;
  margin: 0 !important;
}
.bob-columns .bob-photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Home v2: Price-Led stack - fix shrink-to-fit bug preventing small images from filling column width, and shrink box height */
.price-led-stack figure.wp-block-image {
  display: block !important;
  width: 100% !important;
}
.price-led-stack figure.wp-block-image img {
  width: 100% !important;
  height: 130px !important;
  object-fit: cover;
  display: block;
}
.wp-block-columns:has(.price-led-stack) {
  column-gap: 48px !important;
}
/* About Claret-e v2: integrate Corporate event photo into left column copy, shrink size */
.about-event-photo {
  margin-top: 20px !important;
}
.about-event-photo img {
  width: 100% !important;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  display: block;
}

/* Delivery v4: taller crop to show full truck branding + MBS building background */
.delivery-truck-photo img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 10 / 3;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

/* v3: Price-Led sub-heads are wrapped in <a> - override link color/underline directly */
.price-led-stack .wp-block-heading a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* v3: Wine tables - center numeric columns, keep Wine + Grower/Region left-aligned */
table.tablepress th:nth-child(n+3),
table.tablepress td:nth-child(n+3) {
  text-align: center !important;
}
table.tablepress th:first-child,
table.tablepress th:nth-child(2),
table.tablepress td:first-child,
table.tablepress td:nth-child(2) {
  text-align: left !important;
}

/* v3: import restriction disclaimer line above tables */
.wine-import-disclaimer {
  text-align: left !important;
  font-size: 13px !important;
  color: #6b6f66 !important;
  margin: 0 0 10px 0 !important;
  font-style: italic;
}

/* v6: Pricing terms notice (bold caps) below import disclaimer, on every category page */
.wine-pricing-notice {
  text-align: left !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  color: #6b6f66 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5;
  margin: 0 0 4px 0 !important;
}

/* v7: force category label to hug the table's left edge like the copy below it */
.wp-block-post-content .wine-category-label,
.entry-content .wine-category-label {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* v7: tighten gap between pricing notice copy and the table below it */
.wine-pricing-notice + .wp-block-group.alignwide {
  margin-top: 2px !important;
}

/* v3: Per-wine mailto enquiry links (wine name becomes clickable link) */
table.tablepress td a.wine-enquiry-link {
  color: inherit;
  text-decoration: none;
}
table.tablepress td a.wine-enquiry-link:hover {
  color: #D60058;
  text-decoration: underline;
}

/* v4: Widen search results page so table columns have more room */
.wine-search-page {
  max-width: none !important;
  width: 100% !important;
}

/* v5: Search results page tables lack TablePress plugin base CSS - force consistent full width */
.wine-search-page table.tablepress {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}

/* v6: consistent column widths across Everyday Wine (6-col) search-result tables */
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) th:nth-child(1),
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) td:nth-child(1) { width: 34% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) th:nth-child(2),
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) td:nth-child(2) { width: 18% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) th:nth-child(3),
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) td:nth-child(3) { width: 8% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) th:nth-child(4),
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) td:nth-child(4) { width: 12% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) th:nth-child(5),
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) td:nth-child(5) { width: 14% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) th:nth-child(6),
.wine-search-page table.tablepress:has(thead tr th:nth-child(6):last-child) td:nth-child(6) { width: 14% !important; }

/* v6: consistent column widths across Fine Wine (7-col, includes UK in-bond price) search-result tables */
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) th:nth-child(1),
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) td:nth-child(1) { width: 26% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) th:nth-child(2),
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) td:nth-child(2) { width: 16% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) th:nth-child(3),
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) td:nth-child(3) { width: 7% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) th:nth-child(4),
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) td:nth-child(4) { width: 9% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) th:nth-child(5),
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) td:nth-child(5) { width: 14% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) th:nth-child(6),
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) td:nth-child(6) { width: 14% !important; }
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) th:nth-child(7),
.wine-search-page table.tablepress:has(thead tr th:nth-child(7):last-child) td:nth-child(7) { width: 14% !important; }

.wine-search-page table.tablepress td { word-wrap: break-word; overflow-wrap: break-word; }

/* v6: Footer contact/address - center the text block under each heading (grid-based, works despite flex-basis on column), keep lines sharing a left edge */
footer .wp-block-columns .wp-block-column {
  display: grid !important;
  justify-content: center !important;
}
footer .wp-block-columns .wp-block-column p {
  text-align: left !important;
}
footer .wp-block-columns .wp-block-column .wp-block-heading {
  text-align: center !important;
}


/* v5: dropdown menu - add small visible gap below nav, bridge hover dead-zone */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  top: calc(100% + 14px) !important;
}
.wp-block-navigation .has-child {
  position: relative;
}
.wp-block-navigation .has-child::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}


/* v6: footer Contact column - indent phone numbers to align with email address above (not the label) */
footer .wp-block-columns .wp-block-column:nth-child(2) p:nth-of-type(2) {
  margin-left: 67px !important;
}
footer .wp-block-columns .wp-block-column:nth-child(2) p:nth-of-type(4) {
  margin-left: 70px !important;
}


/* v7: header - 5-circle brand motif (from UK site), top-right of logo area, every page */
header.wp-block-template-part .wp-block-group.alignwide.is-content-justification-space-between {
  position: relative;
}
header.wp-block-template-part .wp-block-group.alignwide.is-content-justification-space-between::after {
  content: "";
  position: absolute;
  top: 62px;
  right: 0;
  width: 290px;
  height: 50px;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2052%22%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2226%22%20r%3D%2225%22%20fill%3D%22%23D60058%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2226%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2226%22%20r%3D%2225%22%20fill%3D%22%23D60058%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2226%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%2226%22%20r%3D%2225%22%20fill%3D%22%23D60058%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%2226%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%2226%22%20r%3D%2225%22%20fill%3D%22%23D60058%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%2226%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%2F%3E%3Ccircle%20cx%3D%22266%22%20cy%3D%2226%22%20r%3D%2225%22%20fill%3D%22%23D60058%22%2F%3E%3Ccircle%20cx%3D%22266%22%20cy%3D%2226%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  pointer-events: none;
}


/* v8: header white area (above pink strip) - solid white, no texture, so logo's white bg blends in */
header.wp-block-template-part {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* v8: pink nav strip - extend full viewport width on every page */
header.wp-block-template-part .wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group:nth-child(2) {
  position: relative !important;
  z-index: 500 !important;
}
header.wp-block-template-part .wp-block-group.alignwide.is-content-justification-space-between > .wp-block-group:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: rgb(214, 0, 88);
  z-index: -1;
}

/* v8: prevent horizontal scrollbar from the full-bleed pink strip (100vw breakout) */
html {
  overflow-x: hidden;
}


/* v9: remove the extra bottom padding on the header content wrapper so the white area ends exactly at the pink strip (texture resumes immediately below, no white gap) */
header.wp-block-template-part .wp-block-group.alignwide.is-content-justification-space-between {
  padding-bottom: 0 !important;
}


/* ===================================================================
   v10: MOBILE-ONLY fixes (max-width: 599px matches theme's own header
   breakpoint - the "md:" prefixed utility classes the nav/header use).
   None of these rules apply at 600px and above, so desktop/laptop/
   tablet-landscape layouts are completely untouched.
   =================================================================== */
@media (max-width: 599px) {
  /* Issue 1: 5-circle brand motif is fixed-pixel positioned for the
     single-row desktop header. On mobile the header stacks into two
     rows (logo+tagline, then pink nav strip) so the circles land on
     top of the logo/tagline instead. Simplest safe fix: hide the
     purely-decorative motif below this breakpoint. */
  header.wp-block-template-part .wp-block-group.alignwide.is-content-justification-space-between::after {
    display: none !important;
  }

  /* Issue 2: force reliable, visible hamburger-menu behaviour on the
     pink strip - re-declare colours/visibility explicitly rather than
     relying on inherited colour, since our desktop nav-colour rules
     are scoped to link/label elements, not the toggle button itself. */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: #ffffff !important;
  }
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation__responsive-container-open path,
  .wp-block-navigation__responsive-container-close svg,
  .wp-block-navigation__responsive-container-close path {
    fill: #ffffff !important;
  }
  /* Keep the inline item list hidden until the hamburger is tapped */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  /* When open, force a solid full-screen pink overlay above every
     other header layer (pink-strip pseudo-element, circles, etc.) */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #D60058 !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
  .wp-block-navigation__responsive-container.is-menu-open a {
    color: #ffffff !important;
    font-size: 20px;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background-color: #D60058 !important;
  }
  .wp-block-navigation__responsive-container-close {
    color: #ffffff !important;
  }
}

/* Issue 3: wine tables (search results + category pages) are sized
   with fixed desktop column widths, so on a narrow phone portrait
   screen the text wraps and overlaps. Rather than asking visitors to
   rotate their phone, let the table scroll horizontally within its
   own row so every column stays readable at desktop-like proportions.
   Wider breakpoint (900px) so this also helps phones in landscape and
   small tablets, while staying well clear of real desktop/laptop
   widths. */
@media (max-width: 900px) {
  div:has(> table.tablepress) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .wine-search-page table.tablepress {
    min-width: 680px;
  }
}


/* v11: mobile hamburger icon - core WP's default toggle icon is only 2
   lines; swap in a standard 3-line hamburger so it reads clearly as a
   menu button. Desktop untouched (icon is display:none there anyway). */
@media (max-width: 599px) {
  .wp-block-navigation__responsive-container-open svg {
    display: none !important;
  }
  .wp-block-navigation__responsive-container-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M4 6h16v1.5H4zM4 11.25h16v1.5H4zM4 16.5h16v1.5H4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
  }
}


/* v8: bottom-align header tagline with the logo */
.wp-container-core-group-is-layout-96967725 {
  align-items: flex-end !important;
}

.header-tagline {
  line-height: 1 !important;
}