/* ==========================================================================
   privacy_consent.css — privacy & consent package stylesheet (tasks 1-6)

   Linked from src/css.php, flag-guarded on PRIVACY_CONSENT_ENABLED, loaded
   last so package rules win without !important. Conventions: privacy/README.md.
   Each task writes only into its own numbered section — keep the order.

   1. Shared tokens & primitives      5. Cookie settings
   2. Cookie banner                   6. Privacy page & tabs
   3. Consent engine states           7. Rights request forms
   4. Privacy footer                  8. Responsive overrides
   ========================================================================== */

/* Inter — the design's typeface. Must stay above every rule: @import is only
   valid before style rules. Note this is a third-party request that fires
   before the visitor makes a consent choice. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* ==========================================================================
   1. Shared tokens & primitives
   ========================================================================== */


/* ==========================================================================
   2. Cookie banner
   --------------------------------------------------------------------------
   ISOLATION — read before editing a selector here.

   The site theme reaches bare tags through body classes (`.specials h2`,
   `.events-container h2`) at specificity (0,1,1), which outranks any single
   class of ours. Those rules are generated per site from SASS and repeated at
   six breakpoints, so they can be neither enumerated nor out-specified by class.

   So the banner is isolated in two steps instead of by !important:
     1. `all: revert` strips every template style off the banner subtree,
        leaving browser defaults.
     2. Every rule below is written through the markup's id, giving (1,1,0)+,
        which beats both the reset (1,0,0) and anything the theme can reach.

   Keep new rules id-prefixed. !important is then unnecessary, with two
   deliberate exceptions kept as belt-and-braces — the scroll lock (competes
   with an inline style, outside the reset's reach) and font-family (the most
   aggressively themed property, and the one that must still hold if `revert`
   is unsupported and the reset silently drops).
   Page gate lives here, not section 1. Mobile swap is in section 8.
   ========================================================================== */

/* The reset. `revert` drops author styles back to the browser default, so this
   covers every property — margins, padding, borders, color, font — not just
   the ones a theme happens to set today. The SVG is excluded: `all` would
   override its fill/stroke presentation attributes and repaint the icon. */
#privacyOverlay,
#privacyBanner,
#privacyBanner *:not(svg):not(path):not(circle) {
  all: revert;
}


/* --- Page gate ---------------------------------------------------------- */

/* z-index near the top of the 32-bit range: above the homepage cover header
   (100000) and Bootstrap modals (1050). Banner is +1. Tunable. */
#privacyOverlay.privacy-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483000;
  /* TODO: tint unspecified by design; matches Bootstrap's .modal-backdrop. */
  background-color: rgba(0, 0, 0, 0.5);
  /* Stops iOS Safari scrolling the page behind the gate. */
  touch-action: none;
  overscroll-behavior: none;
  opacity: 0;
  transition: opacity 300ms ease;
}

#privacyOverlay.privacy-overlay-visible {
  opacity: 1;
}

/* Fade-out: the page is interactive again, so stop swallowing clicks. */
#privacyOverlay.privacy-overlay-leaving {
  pointer-events: none;
}

/* The one justified !important in this section: it targets html/body, outside
   the reset's reach, and competes with the newsletter-popup script writing
   overflow onto body's inline style. */
html.privacy-no-scroll,
body.privacy-no-scroll {
  overflow: hidden !important;
}

/* Ships hidden; the script reveals it, so returning visitors see no flash. */
#privacyOverlay[hidden],
#privacyBanner[hidden] {
  display: none;
}


/* --- Banner card -------------------------------------------------------- */

#privacyBanner.privacy-banner {
  position: fixed;
  z-index: 2147483001;
  right: 25px;
  bottom: 25px;
  width: 440px;
  max-width: calc(100% - 40px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  /* Single source of truth for banner typography — design's body style. */
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: left;
  text-transform: none;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  /* Resting state = the exit animation; .privacy-banner-visible slides it up. */
  transform: translateY(120%);
  transition: transform 300ms linear;
  will-change: transform;
}

#privacyBanner.privacy-banner-visible {
  transform: translateY(0);
}

/* 1ms rather than `none`, so transitionend still fires and the script's
   cleanup path is identical for every visitor. */
@media (prefers-reduced-motion: reduce) {
  #privacyOverlay.privacy-overlay,
  #privacyBanner.privacy-banner,
  #privacyBanner.privacy-banner-visible {
    transition-duration: 1ms;
  }
}

/* Re-asserted after the reset, which returns box-sizing to content-box. */
#privacyBanner.privacy-banner *,
#privacyBanner.privacy-banner *:before,
#privacyBanner.privacy-banner *:after {
  box-sizing: border-box;
}

#privacyBanner.privacy-banner:focus {
  outline: none;
}

/* --- Header ------------------------------------------------------------- */

#privacyBanner .privacy-banner-header {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #e6e9ee;
}

#privacyBanner .privacy-banner-icon {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  /* The SVG paints from currentColor. */
  color: #14181f;
}

#privacyBanner .privacy-banner-title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: #14181f;
}

/* --- Browser opt-out sub-header ----------------------------------------- */

#privacyBanner .privacy-banner-optout {
  margin: 0;
  padding: 6px 20px;
  background-color: #eaf7f0;
  border-top: 1px solid #C6D2EA;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  /* #1C825A (Per design) 4.3:1 on the mint bar — under the 4.5:1 AA floor. */
  color: #177651;
}

/* --- Body -------------------------------------------------------------- */

#privacyBanner .privacy-banner-body {
  padding: 15px 20px;
}

#privacyBanner .privacy-banner-body p {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
}

#privacyBanner .privacy-banner-body strong {
  font-weight: 700;
}

#privacyBanner .privacy-banner-list {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
  list-style: disc outside;
}

#privacyBanner .privacy-banner-list li {
  margin: 0 0 12px;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
  list-style: disc outside;
}

#privacyBanner .privacy-banner-list li:last-child {
  margin-bottom: 0;
}

/* --- Agreement --------------------------------------------------------- */

#privacyBanner p.privacy-banner-agree {
  margin: 15px 0 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  color: #0066FF;
}

#privacyBanner p.privacy-banner-agree a {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: #0066FF;
  text-decoration: underline;
  text-transform: uppercase;
  transition: none;
}

#privacyBanner p.privacy-banner-agree a:hover,
#privacyBanner p.privacy-banner-agree a:focus,
#privacyBanner p.privacy-banner-agree a:active {
  color: #0052cc;
  background: none;
  text-decoration: underline;
}

#privacyBanner p.privacy-banner-agree a:focus-visible {
  outline: 2px solid #0066FF;
  outline-offset: 2px;
}

/* --- Actions ----------------------------------------------------------- */

#privacyBanner .privacy-banner-actions {
  display: flex;
  padding: 14px 16px;
  border-top: 1px solid #C6D2EA;
}

#privacyBanner .privacy-banner-button {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 12px 10px;
  background-color: #0066FF;
  background-image: none;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: none;
  text-shadow: none;
  color: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#privacyBanner .privacy-banner-button + .privacy-banner-button {
  margin-left: 12px;
}

#privacyBanner .privacy-banner-button:hover,
#privacyBanner .privacy-banner-button:focus,
#privacyBanner .privacy-banner-button:active {
  background-color: #0052cc;
  color: #ffffff;
}

#privacyBanner .privacy-banner-button:focus-visible {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}


/* ==========================================================================
   3. Consent engine states
   ========================================================================== */


/* ==========================================================================
   4. Privacy footer
   ========================================================================== */

/*
 * WCache rewrites .contact-location, .hours-title, .zip and .hours.
 * Keep those anchors unchanged; see privacy_footer.php for details.
 */

/* --- Root --------------------------------------------------------------- */

.privacy-footer {
  background-color: var(--privacy-footer-bg);
  background-image: none;
  color: var(--privacy-footer-text);
  text-align: left;
}

.privacy-footer.section-wrapper .container {
  margin-bottom: 0;
}

.privacy-footer .row {
  display: flex;
  flex-wrap: wrap;
}

/* Prevent Bootstrap clearfix pseudo-elements from becoming flex items. */
.privacy-footer .row::before,
.privacy-footer .row::after {
  display: none;
}

.privacy-footer .container .row div[class^="col"].privacy-footer-col {
  text-align: left;
  font-weight: 400;
}

.privacy-footer .container .row .privacy-footer-col-empty {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  border-left: 0;
}

.privacy-footer .contact-location,
.privacy-footer .hours,
.privacy-footer .privacy-footer-policies,
.privacy-footer .contact-us,
.privacy-footer .social {
  font-size: 1.2em;
}

/* --- Headings ----------------------------------------------------------- */

.privacy-footer .hours-title,
.privacy-footer .privacy-footer-policies-title,
.privacy-footer .contact-us-title,
.privacy-footer .social-title {
  margin-bottom: 1em;
  font-size: 1.4em;
  text-transform: uppercase;
  color: var(--privacy-footer-text);
}

.privacy-footer .hours-title h2,
.privacy-footer .privacy-footer-policies-title h2,
.privacy-footer .contact-us-title h2,
.privacy-footer .social-title h2 {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  text-align: inherit;
  font-family: var(--sub-title-font, inherit);
}

/* --- Location ----------------------------------------------------------- */

.privacy-footer .contact-location .city-state,
.privacy-footer .contact-location .zip {
  display: inline;
}

.privacy-footer .contact-location .address {
  display: block;
}

/* --- Hours -------------------------------------------------------------- */

.privacy-footer .privacy-footer-hours-row {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0.5em;
}

.privacy-footer .hours .days {
  text-transform: capitalize;
}

.privacy-footer .hours .from-to {
  margin-left: auto;
  padding-left: 1em;
  text-align: right;
  white-space: nowrap;
}

/* --- Policies ----------------------------------------------------------- */

.privacy-footer .privacy-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy-footer .privacy-footer-links li {
  padding-bottom: 0.5em;
}

.privacy-footer .privacy-choices-icon {
  height: 1em;
  width: auto;
  margin-left: 0.5em;
  vertical-align: -0.15em;
  border: 0;
  background: none;
  box-shadow: none;
  filter: none;
}

/* --- Contact us --------------------------------------------------------- */

.privacy-footer .contact-us {
  word-break: break-word;
}

.privacy-footer .contact-us p {
  margin: 0;
  padding-bottom: 5px;
  font-size: 1em;
}

/* --- Links -------------------------------------------------------------- */

.privacy-footer a {
  color: var(--privacy-footer-text);
  text-decoration: underline;
}

.privacy-footer a:hover,
.privacy-footer a:active,
.privacy-footer a:focus,
.privacy-footer .contact-us a:hover,
.privacy-footer .contact-us a:active {
  color: var(--privacy-footer-link-hover);
  text-decoration: underline;
}

.privacy-footer a:focus {
  outline: 2px solid var(--privacy-footer-text);
  outline-offset: 2px;
}

.privacy-footer a:focus:not(:focus-visible) {
  outline: none;
}

/* --- Find us on --------------------------------------------------------- */

.privacy-footer .social-links .contact-icon {
  color: var(--privacy-footer-text);
  text-decoration: none;
}

.privacy-footer .social-links .contact-icon:hover,
.privacy-footer .social-links .contact-icon:focus,
.privacy-footer .social-links .contact-icon:active {
  color: var(--privacy-footer-link-hover);
  background-color: transparent;
}

.privacy-footer .social-links .contact-icon .social-icon.fa {
  font-family: FontAwesome;
}

.privacy-footer .social-links .contact-icon .social-icon[class*="icon-twitter-x"]::before {
  font-family: "twitter_x";
}


/* ==========================================================================
   5. Cookie settings
   --------------------------------------------------------------------------
   ISOLATION. The banner can afford `all: revert`; this page cannot, because the
   header, nav and footer must stay on-theme.

   The theme reaches bare tags through body classes — `.drink-menu h2` — at (0,1,1).
   Every rule here is `.privacy-page .<class>`, which is (0,2,0) and outranks that, so
   no !important is needed. `.privacy-page` is on <body>, so do not put font-family or
   color on it alone: that repaints the header and footer too.

   Mobile overrides are in section 8.
   ========================================================================== */

.privacy-page .privacy-cookie-intro,
.privacy-page .privacy-cookie-row-body p,
.privacy-page .privacy-cookie-acknowledge {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

/* The type scale records Text as 700/15px, but every frame draws body copy at
   regular weight with bold used only for emphasis. 400 here, 700 on <strong>. */
.privacy-page .privacy-cookie-settings strong {
  font-weight: 700;
}

.privacy-page .privacy-cookie-intro {
  margin-bottom: 26px;
}

.privacy-page .privacy-cookie-link {
  font-weight: 700;
  color: #0066FF;
  text-decoration: underline;
}

/* --- Runtime notices ----------------------------------------------------- */
/* No-JS, engine-unavailable and GPC. Plain status lines. */

.privacy-page .privacy-cookie-notice {
  margin: 0 0 22px;
  padding: 10px 14px;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  background-color: #f7f8fa;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #14181f;
}

/* Mint, matching the banner's browser opt-out line. #177651 rather than the design's
   #1C825A, which is 4.3:1 on this ground and under the 4.5:1 floor. */
.privacy-page .privacy-cookie-notice-gpc {
  border-color: #C6D2EA;
  background-color: #eaf7f0;
  color: #177651;
}

/* --- Rows ---------------------------------------------------------------- */

.privacy-page .privacy-cookie-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy-page .privacy-cookie-row {
  margin: 0 0 28px;
}

/* Order is toggle, title, pill — also the DOM order, so nothing here reorders.
   No `gap`: this template's browser set predates flex gap. */
.privacy-page .privacy-cookie-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.privacy-page .privacy-cookie-row-title {
  margin: 0 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #14181f;
}

/* Indented past the toggle so the copy hangs off the title. 36px control + 20px. */
.privacy-page .privacy-cookie-row-body {
  padding-left: 56px;
  padding-top: 8px;
}

.privacy-page .privacy-cookie-row-body p:last-child {
  margin-bottom: 0;
}

/* --- The pill toggle ------------------------------------------------------ */
/* Shared by a <button role="switch"> and an inert <span>, so nothing here may rely
   on button-only properties. */

.privacy-page .privacy-toggle {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: #c9ced6;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease;
}

.privacy-page .privacy-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: transform 0.15s ease;
}

.privacy-page .privacy-toggle-on {
  background-color: #0066FF;
}

.privacy-page .privacy-toggle-on::after {
  transform: translateX(16px);
}

/* Drawn grey at full strength — the pill carries the meaning, not the control — so
   this is not dimmed like a disabled toggle. It just cannot be used. */
.privacy-page .privacy-toggle-locked {
  cursor: default;
}

/* Before the engine enables it, with GPC on, or with no engine. The notice above
   says which; this only has to look inoperable. */
.privacy-page .privacy-toggle[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.privacy-page .privacy-toggle:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

/* --- Pill and pending cue -------------------------------------------------- */

.privacy-page .privacy-cookie-pill {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 11px;
  border: 1px solid #c9ced6;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #14181f;
  white-space: nowrap;
}

/* Amber rather than the action blue, so it cannot be mistaken for a control.
   6.4:1 on its own ground. */
.privacy-page .privacy-cookie-pending {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 11px;
  border-radius: 11px;
  background-color: #fff4e5;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #8a5300;
  white-space: nowrap;
}

/* Re-asserts the row when something is staged, so the cue is not the only signal. */
.privacy-page .privacy-cookie-row-pending .privacy-cookie-row-title {
  color: #8a5300;
}

/* --- Sub-sections --------------------------------------------------------- */
/* Content, not rows. No border, no control, no hover: they must not read as
   separately switchable categories, because they are not. */

.privacy-page .privacy-cookie-subsections {
  margin-top: 22px;
}

.privacy-page .privacy-cookie-subsection {
  margin-bottom: 20px;
}

.privacy-page .privacy-cookie-subsection:last-child {
  margin-bottom: 0;
}

.privacy-page .privacy-cookie-subsection-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #14181f;
}

/* --- Acknowledgement ------------------------------------------------------ */

.privacy-page .privacy-cookie-acknowledge {
  margin: 28px 0 0;
  font-weight: 600;
  color: #0066FF;
}

.privacy-page .privacy-cookie-acknowledge a {
  font-weight: 700;
  color: #0066FF;
  text-decoration: underline;
  text-transform: uppercase;
}

.privacy-page .privacy-cookie-acknowledge a:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

/* --- Action bar ----------------------------------------------------------- */
/* Styled once here and reused by the rights-request submit button. */

/* Full-bleed out of Bootstrap's .container without restructuring the DOM. 100vw
   counts the scrollbar, so the few pixels that can overhang are clipped below — the
   page itself must never scroll sideways. */
.privacy-page .privacy-action-bar {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 40px 0 0 -50vw;
  padding: 18px 16px;
  border-top: 1px solid #e3e7ec;
  text-align: center;
}

.privacy-page .pagecontent {
  overflow-x: hidden;
}

.privacy-page .privacy-action-button {
  min-width: 218px;
  padding: 11px 28px;
  border: 0;
  border-radius: 6px;
  background-color: #0066FF;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  cursor: pointer;
}

/* As drawn. Disabled controls are exempt from the contrast minimum, and the button
   is never the only signal that nothing is staged. */
.privacy-page .privacy-action-button[disabled] {
  background-color: #b9bec7;
  cursor: default;
}

.privacy-page .privacy-action-button:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}


/* ==========================================================================
   6. Privacy page & tabs
   --------------------------------------------------------------------------
   Recorded type scale: Inter; Nav item 600/16, Title 700/24, Subtitle 700/18,
   Text 700/15 (see the deviation note in section 5 on that last one).
   Line-height is unitless throughout; no letter-spacing was specified.
   ========================================================================== */

/* `.privacy-page` is on <body>. Background and colour only — see the isolation note
   in section 5 for why font-family must not go here. `drink-menu` brings the shared
   content-page chrome and with it `color: white`, and legal text has to be readable. */
.privacy-page {
  background-color: #ffffff;
  color: #1a1a1a;
}
/* Theme neutraliser — read before adding a rule to section 5 or 6.

   Theme rules on bare tags set more than colour and font: `.drink-menu h4` also sets
   text-align:center and text-transform:uppercase, so overriding only the properties
   you had in mind leaves the rest leaking through.

   Not div or button — `.privacy-action-bar` centres its button, and a blanket
   text-align:left would outrank it. Inline styles still win. */
.privacy-page .privacy-layout h1,
.privacy-page .privacy-layout h2,
.privacy-page .privacy-layout h3,
.privacy-page .privacy-layout h4,
.privacy-page .privacy-layout h5,
.privacy-page .privacy-layout h6,
.privacy-page .privacy-layout p,
.privacy-page .privacy-layout li,
.privacy-page .privacy-layout dt,
.privacy-page .privacy-layout dd,
.privacy-page .privacy-layout th,
.privacy-page .privacy-layout td {
  font-style: normal;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  letter-spacing: normal;
}

/* Inter has to be set on the elements themselves, not inherited: the theme's
   `.drink-menu p` (0,1,1) beats inheritance from any ancestor. (0,2,1) here. */
.privacy-page .privacy-layout h2,
.privacy-page .privacy-layout h3,
.privacy-page .privacy-layout h4,
.privacy-page .privacy-layout p,
.privacy-page .privacy-layout li,
.privacy-page .privacy-layout a,
.privacy-page .privacy-layout span,
.privacy-page .privacy-layout button,
.privacy-page .privacy-action-bar button {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* The design sets the nav further left than Bootstrap's fixed .container allows at
   desktop widths, so this page gets a wider, fluid one. */
.privacy-page .tabs-container .container {
  width: 100%;
  max-width: 1440px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Desktop: nav column beside the panel. Mobile stacks it in section 8 — same list,
   same order, same DOM. Column position is the only difference. */
.privacy-page .privacy-layout {
  display: flex;
  align-items: flex-start;
  padding-top: 34px;
}

.privacy-page .privacy-nav {
  flex: 0 0 270px;
  width: 270px;
}

/* min-width:0, or a long unbroken string in a customer document stretches this past
   its share and pushes the nav off screen. */
.privacy-page .privacy-panels {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 830px;
}

/* --- Nav ------------------------------------------------------------------ */

.privacy-page .privacy-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy-page .privacy-nav-item {
  margin: 0 0 26px;
}

.privacy-page .privacy-nav-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #14181f;
  text-decoration: none;
}

.privacy-page .privacy-nav-link:hover {
  color: #0066FF;
}

.privacy-page .privacy-nav-link:focus {
  outline: 2px solid #0052cc;
  outline-offset: 3px;
}

/* The non-colour affordance. The active item is underlined and the others are not,
   so the underline is what survives with colour removed. Do not remove it. */
.privacy-page .privacy-nav-link-active {
  color: #0066FF;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* The opt-out mark, beside Your Privacy Choices only. */
.privacy-page .privacy-nav-icon {
  display: inline-block;
  width: 29px;
  height: 14px;
  margin-left: 8px;
  vertical-align: middle;
}

/* --- Panels --------------------------------------------------------------- */

/* Safeguard, not styling — keep it. Panels are hidden with the `hidden` attribute,
   which is only a UA display:none; any display value here would outrank it and show
   all four at once. */
.privacy-panel[hidden] {
  display: none;
}

/* Focused by script after a tab switch. It is tabindex="-1" and not a control, so an
   outline round the whole panel would be noise rather than a focus indicator. */
.privacy-page .privacy-panel:focus {
  outline: none;
}

.privacy-page .privacy-panel-title {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #14181f;
}

/* Panels are <h2>, so the document needs an <h1>; it carries structure only.
   Clip-rect, not display:none, which would also hide it from assistive tech. */
.privacy-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- The customer's document ---------------------------------------------- */
/* A conservative reset, not a restyle. This HTML comes from the customer, so it sets
   only what it takes to make arbitrary markup readable. Two rules: every selector is a
   descendant of `.privacy-doc`, so nothing leaks out; and the panel <h2> at 24px stays
   dominant over the document's own headings at 18px. Inline styles are not
   normalised. */

.privacy-page .privacy-doc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
  /* Long unbroken URLs are common in legal boilerplate. */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.privacy-page .privacy-doc h1,
.privacy-page .privacy-doc h2 {
  margin: 26px 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #14181f;
}

.privacy-page .privacy-doc h3 {
  margin: 22px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #14181f;
}

.privacy-page .privacy-doc h4 {
  margin: 18px 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #14181f;
}

.privacy-page .privacy-doc p {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

.privacy-page .privacy-doc ul,
.privacy-page .privacy-doc ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.privacy-page .privacy-doc li {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

.privacy-page .privacy-doc a {
  color: #0066FF;
  text-decoration: underline;
}

.privacy-page .privacy-doc a:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

.privacy-page .privacy-doc img {
  max-width: 100%;
  height: auto;
}

/* table-layout: fixed rather than an overflow container: we cannot wrap markup we
   did not author, and this keeps any table inside the panel. */
.privacy-page .privacy-doc table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  table-layout: fixed;
}

.privacy-page .privacy-doc th,
.privacy-page .privacy-doc td {
  padding: 8px 10px;
  border: 1px solid #e3e7ec;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --- Your Privacy Choices -------------------------------------------------- */
/* The rights-request forms style themselves in section 7. */

/* Same green as the banner's opt-out line. */
.privacy-page .privacy-choices-optout {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #177651;
}

.privacy-page .privacy-choices p {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

.privacy-page .privacy-choices-heading {
  margin: 26px 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #14181f;
}

.privacy-page .privacy-choices-link {
  font-weight: 700;
  color: #0066FF;
  text-decoration: underline;
}

.privacy-page .privacy-choices-link:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}


/* ==========================================================================
   7. Rights request forms
   ========================================================================== */

/* Until Vue mounts, and for good if it never does. */
.privacy-form-app[v-cloak] {
  display: none;
}

.privacy-page .privacy-form-app {
  margin-top: 34px;
}

.privacy-page .privacy-form-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #14181f;
}

.privacy-page .privacy-form-intro {
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}


/* --- Rows ----------------------------------------------------------------- */
/* Label column left, field right, as drawn. Stacks at 767px in section 8. */

.privacy-page .privacy-form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.privacy-page .privacy-form-label {
  flex: 0 0 232px;
  margin: 0;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
}

.privacy-page .privacy-form-required {
  font-weight: 400;
}

.privacy-page .privacy-form-field {
  flex: 1 1 auto;
  min-width: 0;
}


/* --- Input ---------------------------------------------------------------- */
/* Inter is set here, not inherited: section 6 puts it on text tags only, and
   `input` is not one of them. */

.privacy-page .privacy-form-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 570px;
  padding: 10px 14px;
  border: 1px solid #767676;
  border-radius: 6px;
  background-color: #ffffff;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #1a1a1a;
}

.privacy-page .privacy-form-input::placeholder {
  color: #6b7280;
}

.privacy-page .privacy-form-input:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

/* Never colour alone: the message appears and the border doubles in width. */
.privacy-page .privacy-form-input[aria-invalid="true"] {
  border-width: 2px;
  border-color: #b3261e;
}

.privacy-page .privacy-form-error {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #b3261e;
}


/* --- Online Data control -------------------------------------------------- */
/* Secondary to the form's blue Submit: this one changes a setting, it does not send
   a request, and the two must not read as the same action. */

.privacy-page .privacy-online-optout {
  margin: 0 0 30px;
}

.privacy-page .privacy-online-button {
  padding: 11px 22px;
  border: 2px solid #0066FF;
  border-radius: 6px;
  background-color: #ffffff;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #0052cc;
  cursor: pointer;
}

.privacy-page .privacy-online-button[disabled] {
  border-color: #b9bec7;
  color: #6b7280;
  cursor: default;
}

.privacy-page .privacy-online-button:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

.privacy-page .privacy-online-note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
}

.privacy-page .privacy-online-done {
  font-weight: 700;
  color: #177651;
}


/* --- Confirmation and deadline -------------------------------------------- */

.privacy-page .privacy-form-confirm {
  display: flex;
  align-items: flex-start;
  margin: 0 0 18px;
}

.privacy-page .privacy-form-checkbox {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 12px 0 0;
}

.privacy-page .privacy-form-checkbox:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

/* The message below carries the meaning; this only draws attention to the control. */
.privacy-page .privacy-form-checkbox[aria-invalid="true"] {
  outline: 2px solid #b3261e;
  outline-offset: 1px;
}

.privacy-page .privacy-form-confirm-label {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a1a;
}

.privacy-page .privacy-form-sla {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1a1a1a;
}


/* --- Honeypot, result, no-JS ---------------------------------------------- */

/* Off-screen for everyone. aria-hidden and tabindex keep it off assistive tech
   and out of the tab order; only a bot fills it. */
.privacy-page .privacy-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacy-page .privacy-form-message {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.privacy-page .privacy-form-message:focus {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

.privacy-page .privacy-form-message-success {
  color: #177651;
}

.privacy-page .privacy-form-message-error {
  color: #b3261e;
}

.privacy-page .privacy-form-noscript {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a1a;
}


/* ==========================================================================
   8. Responsive overrides
   ========================================================================== */

/* Cookie banner — mobile: full-width bottom sheet. Swaps at 767px. */
@media (max-width: 767px) {
  #privacyBanner.privacy-banner {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    /* dvh tracks the browser toolbar; vh alone clips the header. vh first as
       the fallback. */
    max-height: 88vh;
    max-height: 88dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
  }

  #privacyBanner .privacy-banner-actions {
    padding: 14px 16px 16px;
  }
}

/* Privacy footer — column states, dividers, mobile reorder, bottom-nav clearance. */

/* Four across */
@media (min-width: 992px) {
  .privacy-footer .privacy-footer-col + .privacy-footer-col {
    border-left: 1px solid var(--privacy-footer-divider);
  }

  .privacy-footer .privacy-footer-col-contact section + section {
    margin-top: 2em;
  }
}

/* 2x2 */
@media (min-width: 768px) and (max-width: 991px) {
  .privacy-footer .privacy-footer-col:nth-child(even) {
    border-left: 1px solid var(--privacy-footer-divider);
  }

  .privacy-footer .privacy-footer-col:nth-child(n+3) {
    margin-top: 1.5em;
    padding-top: 1.5em;
    border-top: 1px solid var(--privacy-footer-divider);
  }

  /* Row 2's rule is inset rather than a border-left: a border paints the whole
     border box, padding-top included, so it would butt into the horizontal rule
     while row 1's line stops 1.5em short of it. Same 1.5em both sides. */
  .privacy-footer .privacy-footer-col:nth-child(even):nth-child(n+3) {
    position: relative;
    border-left-color: transparent;
  }

  .privacy-footer .privacy-footer-col:nth-child(even):nth-child(n+3)::before {
    content: '';
    position: absolute;
    top: 1.5em;
    bottom: 0;
    left: -1px;
    border-left: 1px solid var(--privacy-footer-divider);
  }

  .privacy-footer .privacy-footer-col-contact section + section {
    margin-top: 2em;
  }
}

@media (max-width: 767px) {
  .privacy-footer .row {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }

  .privacy-footer .privacy-footer-col {
    padding-left: 0;
    padding-right: 0;
  }

  .privacy-footer .privacy-footer-col-location { order: 1; }
  .privacy-footer .privacy-footer-col-hours    { order: 2; }
  .privacy-footer .privacy-footer-col-contact  { order: 3; }
  .privacy-footer .privacy-footer-col-policies { order: 4; }

  /* A rule above every block but the first: `+` follows DOM order, which
     works only because Location is first both in the DOM and on screen. */
  .privacy-footer .privacy-footer-col + .privacy-footer-col,
  .privacy-footer .privacy-footer-col-contact section + section {
    margin-top: 1.5em;
    padding-top: 1.5em;
    border-top: 1px solid var(--privacy-footer-divider);
  }

  .privacy-footer .social {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .privacy-footer .social .social-title {
    margin-bottom: 0;
  }

  .privacy-footer .social .social-links {
    white-space: nowrap;
  }

  body:not(.home-page) .privacy-footer.section-wrapper,
  .hide-show-section:last-child .privacy-footer.section-wrapper {
    padding-bottom: 80px;
  }
}


/* Privacy page — the nav stacks above the panel. Same list, same order, same DOM:
   only the column position changes. No horizontal row, no horizontal scrolling. */
@media (max-width: 767px) {

  .privacy-page .tabs-container .container {
    /* Minimum side gutter at every width down to 320. */
    padding-left: 16px;
    padding-right: 16px;
  }

  .privacy-page .privacy-layout {
    display: block;
    padding-top: 22px;
  }

  .privacy-page .privacy-nav,
  .privacy-page .privacy-panels {
    width: auto;
    max-width: none;
  }

  /* The nav sits directly above the panel <h2> with no divider, as designed. */
  .privacy-page .privacy-nav {
    margin: 0 0 26px;
  }

  .privacy-page .privacy-nav-item {
    margin: 0 0 12px;
  }

  .privacy-page .privacy-panel-title {
    margin-bottom: 18px;
    font-size: 22px;
  }

  /* The indent survives at mobile. The row head wraps, so at 320px the pill drops to
     its own line while the toggle and title stay together. */
  .privacy-page .privacy-cookie-row-body {
    padding-left: 56px;
  }

  .privacy-page .privacy-cookie-row {
    margin-bottom: 24px;
  }

  .privacy-page .privacy-form-row {
    display: block;
  }

  .privacy-page .privacy-form-label {
    display: block;
    margin-bottom: 8px;
    padding-top: 0;
  }

  .privacy-page .privacy-form-input {
    max-width: none;
  }

  /* Full-width button. min-width would otherwise overflow at 320px. */
  .privacy-page .privacy-action-button {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .privacy-page .privacy-action-bar {
    margin-top: 30px;
    padding: 16px;
  }

  /* The fixed bottom nav is visible below 768px. The template's 80px clearance is
     scoped to .footer, which this page does not carry, so it reserves its own — on
     <body>, so it sits below the contact footer when that renders. Not reserved for
     the cookie banner, which is temporary and dismissible. */
  .privacy-page {
    padding-bottom: 80px;
  }
}