/* --- ticket tier cards --- */
.ocgf-tier-list { list-style: none; margin: 0; padding: 0; }
.ocgf-tier-list li {
  position: relative;
  padding: 5px 0 5px 20px;
  border-bottom: 1px solid rgba(41,21,23,.12);
}
.ocgf-tier-list li:last-child { border-bottom: 0; }
.ocgf-tier-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 13px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #EB781B;
}

/* --- content page lists --- */
.ocgf-list { list-style: none; margin: 0 0 4px; padding: 0; }
.ocgf-list li {
  position: relative;
  padding: 4px 0 4px 22px;
}
.ocgf-list li::before {
  content: "";
  position: absolute;
  left: 3px; top: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #EB781B;
}

/* --- judging / criteria tables --- */
.ocgf-table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; }
.ocgf-table th, .ocgf-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(41,21,23,.14);
  vertical-align: top;
}
.ocgf-table th {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #CC5221;
  border-bottom-width: 2px;
}
.ocgf-table td:nth-child(2) { white-space: nowrap; font-weight: 600; }

/* A three-column criteria table cannot always compress to phone width. Its
   own wrapper scrolls, so the table never spills over the card padding no
   matter how long the descriptions get. */
.ocgf-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .ocgf-table { font-size: 14px; }
  .ocgf-table th, .ocgf-table td { padding: 7px 9px; }
}

/* --- deep-link targets ---
   The header is position:fixed, so a browser jumping to #vendors puts the card
   top under the bar. scroll-margin-top reserves the bar height; the numbers
   match the two header heights set in 02-design.php. */
html { scroll-behavior: smooth; }
[id="main-stage"], [id="cook-off"], [id="pageants"], [id="clubs-kids"],
[id="parade"], [id="parking"], [id="rv-camping"], [id="vehicles"],
[id="prohibited"], [id="safety"], [id="partner"], [id="sponsorship"],
[id="vendors"] { scroll-margin-top: 130px; }
@media (max-width: 922px) {
  [id="main-stage"], [id="cook-off"], [id="pageants"], [id="clubs-kids"],
  [id="parade"], [id="parking"], [id="rv-camping"], [id="vehicles"],
  [id="prohibited"], [id="safety"], [id="partner"], [id="sponsorship"],
  [id="vendors"] { scroll-margin-top: 104px; }
}

/* --- cross-page links inside the cream cards --- */
.elementor-widget-text-editor a {
  color: #CC5221;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease;
}
.elementor-widget-text-editor a:hover { color: #FF462D; }

/* The info band sits on the olive canvas, not on cream, so its links need the
   light treatment instead - burnt on olive is close to unreadable. */
.ocgf-info-col a { color: #EB781B; }
.ocgf-info-col a:hover { color: #EFDEC2; }

/* --- secondary CTA rows ---
   Stacking on mobile is done with the container's own flex settings in
   cta_row(), not here: Elementor's per-element width rule carries three
   classes and beats any selector this stylesheet can reasonably write. */
.ocgf-cta-row .elementor-button { white-space: nowrap; }

/* --- go-live replacement for a tbc callout ---
   Quiet and neutral: it tells a visitor the detail is coming without the amber
   "action required" styling, which is aimed at the client. */
.ocgf-soon {
  border-left: 3px solid rgba(41,21,23,.18);
  padding: 2px 0 2px 14px;
  margin: 14px 0 2px;
  font-style: italic;
  opacity: .85;
  line-height: 1.6;
}

/* --- "to be confirmed" callouts: gaps the client still has to fill --- */
.ocgf-tbc {
  background: rgba(235,120,27,.10);
  border-left: 4px solid #EB781B;
  border-radius: 3px;
  padding: 14px 16px;
  margin: 14px 0 2px;
  font-size: 15px;
  line-height: 1.6;
}

/* ==========================================================================
   Home page: corrections to the hand-built Elementor design.

   Everything below is CSS only, and deliberately so - the desktop layout is
   approved and none of these rules apply above the phone breakpoint except
   the header row, which was overflowing at every width below Astra's header
   break point. The design is not being changed; it is being made to survive
   a 375px viewport, which it did not.
   ========================================================================== */

/* --- the page's h1 ---
   The hero is a flat poster image, so the festival's name existed nowhere as
   text. home-content.php injects an h1 carrying it; this hides it without
   hiding it from search engines or a screen reader. The clip-rect pattern
   rather than display:none, which assistive tech skips entirely. */
.ocgf-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- header: stop the page scrolling sideways ---
   Astra sizes the mobile header row from its content: two max-content grid
   tracks, measured at 198px + 258px + 20px gap = 476px inside a 335px content
   box. The document's scrollWidth was 502 against a 375 viewport, so every
   page on the site could be dragged horizontally on a phone.

   minmax(0,1fr) lets the left track shrink below its content width - a plain
   1fr will not, because a grid track's automatic minimum is min-content - and
   min-width:0 lets the flex sections inside it do the same. */
@media (max-width: 922px) {
  .ast-mobile-header-wrap .ast-builder-grid-row-has-sides {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
  }
  .ast-mobile-header-wrap .site-header-section { min-width: 0; }
  .ast-mobile-header-wrap .ast-builder-layout-element { min-width: 0; }
}

/* The ticket button is the widest fixed thing in that row. Trimming its
   padding on the narrowest phones buys the nav the room it needs without
   letting the label wrap onto two lines. */
@media (max-width: 420px) {
  .ast-mobile-header-wrap .ast-custom-button {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
  }
}

/* --- the insider-list section: make it actually stack ---
   Elementor's atomic grid containers (`e-grid-base`) carry a responsive
   `grid-template-columns`, and at mobile this one is correctly set to
   repeat(1, 1fr). It had no effect: the element computes to display:flex, so
   the grid property was inert and the two columns stayed side by side. The
   text column ended up 90px wide and set one word per line.

   Honouring the display mode the element is already named for is the whole
   fix - the column count is Elementor's own responsive value, not ours. */
@media (max-width: 767px) {
  .elementor .e-con.e-grid-base { display: grid; }
  .elementor .e-con.e-grid-base > .e-con,
  .elementor .e-con.e-grid-base > .elementor-element { min-width: 0; }
}

/* --- desktop side margins on a phone ---
   Two containers carry horizontal margins measured for the desktop layout:
   the insider text column at 30/40px, and the contact card at 67px each side.
   Those are a small inset on a 1140px canvas and half the screen on a 375px
   one - the contact card rendered 201px wide inside a 335px column, and the
   heading above it set two words per line.

   Vertical margins are left alone: they are the section rhythm. Only the
   horizontal pair is neutralised, and only on phones, where the parent
   container's own 20px padding is already the gutter.

   Overriding the custom properties rather than `margin`, because that is
   where the value actually lives: Elementor containers compute their box from
   --margin-inline-start / --margin-left and friends, so a `margin-left: 0`
   rule matches nothing and silently does nothing. That is what makes this
   look fixed in devtools while the page does not move.

   !important because Elementor writes per-element rules of exactly the same
   specificity as anything this stylesheet can name, so source order would
   otherwise decide it - and source order here depends on enqueue timing. */
@media (max-width: 767px) {
  .elementor .e-con {
    --margin-left: 0px !important;
    --margin-right: 0px !important;
    --margin-inline-start: 0px !important;
    --margin-inline-end: 0px !important;
  }
  .elementor .e-con-inner { margin-left: 0 !important; margin-right: 0 !important; }
}

/* The atomic containers need saying again, separately, because they are
   styled through a different mechanism entirely.

   Elementor v4 emits `local-9-frontend-desktop.css`: a per-page stylesheet
   keyed on hashed classes (`.e-f5ba3b5-63b8238`) carrying real
   `margin-inline-start` / `width` declarations, not the custom properties the
   older containers use. It has no media queries and no mobile counterpart, so
   the desktop values - width:70%, 40px and 30px side margins - applied at
   every width. That is what kept the insider column at 218px of a 335px
   screen after the grid itself had correctly stacked.

   The extra class in the selector puts this at 0,3,0 against Elementor's
   0,2,0, so no !important is needed. */
@media (max-width: 767px) {
  .elementor .e-con.e-atomic-element {
    width: 100%;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}

/* --- slider height on a phone ---
   Both sliders are set to a fixed 500px. Stacked, that is 1000px of
   photography before the sign-up buttons come into view. */
@media (max-width: 767px) {
  .elementor .sina-slider-content { min-height: 260px; height: 260px; }
  .elementor .sina-banner-slider .owl-stage-outer { max-height: 260px; }
}

/* --- long-form copy on a phone ---
   The body text is sized for the desktop column and runs edge to edge at
   375px. Side padding and a slightly tighter measure, nothing else. */
@media (max-width: 767px) {
  .elementor-widget-text-editor { padding-left: 14px; padding-right: 14px; }
  .elementor-widget-text-editor p { line-height: 1.5; }
}

/* --- contact card ---
   custom.css pins this card to `width: 60% !important`, which is the right
   inset on a 1140px canvas and far too narrow on a phone: 201px inside a
   335px column, with "Questions? Shoot us an email at" set four words to a
   line and the address overflowing its own panel.

   The selector below is custom.css's own, repeated exactly. Equal specificity
   and equal weight, resolved by source order - which the mu-plugin fixes by
   loading custom before pages. Written out in full rather than shortened
   because anything shorter loses to the original.

   The overflow/radius pair is unrelated: the heading bar is a full-bleed
   child of a padded container, so it sat proud of the cream panel below it. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-af1e75c.e-con-full.e-flex.jltma-glass-effect-no.e-con.e-child {
    width: 100% !important;
    margin: 0 !important;
  }
  .elementor .elementor-element-af1e75c { overflow: hidden; border-radius: 8px; }
}

/* --- images ---
   Nothing on this page is art-directed per breakpoint, so no image should
   ever be asked to render wider than its slot. */
.elementor img { max-width: 100%; height: auto; }