@charset "utf-8";
/* =======================================================================
   DRIFTLAND  |  MAIN SITE STYLESHEET  |  2026 RACING EDITION
   Alternative deployment filename: driftland-2026-racing.css.
   Designed to work with the matching modern shop CSS.
   Maintains existing navigation hooks and existing image asset paths.
   Dropdowns support hover, keyboard focus and JS-managed .is-open state.
   Colour scheme: charcoal / off-white / racing red.
   CSS tokens deliberately match driftland_shop_modern.css.
   ======================================================================= */

/* 01. DESIGN TOKENS & FOUNDATIONS ----------------------------------------- */
:root {
  color-scheme: light;
  --dl-bg: #f3f5f7;
  --dl-surface: #ffffff;
  --dl-surface-muted: #f8fafb;
  --dl-ink: #151c24;
  --dl-muted: #586573;
  --dl-line: #dce2e7;
  --dl-dark: #101820;
  --dl-accent: #e63946;
  --dl-accent-hover: #be2734;
  --dl-radius: 14px;
  --dl-shadow: 0 8px 28px rgba(17, 29, 41, .08);
  --dl-focus: #3a91dc;
  --dl-wide: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 126px; }
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--dl-bg);
  color: var(--dl-ink);
  font: 400 1rem/1.65 system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
.email { font-family: Calibri, "Segoe UI", Tahoma, Arial, sans-serif; }
::selection { background: #ffd7db; color: var(--dl-dark); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .8em;
  color: inherit;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.22;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); text-align: left; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1.1rem; }
hr { border: 0; border-top: 1px solid var(--dl-line); margin: 1.5rem 0; }
.mb-0, .my-0 { margin-bottom: 0 !important; }
.bold { font-weight: 800; font-size: 1.05em; letter-spacing: .025em; text-transform: uppercase; }
.naBig { font-size: 1.4em; }
.sml { font-size: .8rem; }
.land { color: #d0d6dc; }

/* Links: short transitions, visible keyboard focus, no global forced caps. */
a, a:link, a:visited, a:active {
  color: #a82935;
  text-decoration: none;
  font-weight: 650;
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
a:hover { color: var(--dl-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--dl-focus);
  outline-offset: 3px;
}
a[href^="tel:"], a[href^="mailto:"] { overflow-wrap: anywhere; }
a[href^="tel:"]::before { content: "\260e"; margin-right: .35em; }
a[href^="mailto:"]::before { content: "\2709"; margin-right: .35em; }

/* 02. SITE FRAME, TOP INFORMATION BAR & MAIN NAV -------------------------- */
#page_wrap { width: 100%; min-height: 100vh; margin: 0 auto; text-align: center; }
#container {
  width: min(100% - 2.5rem, var(--dl-wide));
  max-width: var(--dl-wide);
  margin: 0 auto;
  padding: .6rem 0;
}
#containerBody {
  width: min(100% - 2.5rem, var(--dl-wide));
  max-width: var(--dl-wide);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.8rem) 0;
  text-align: left;
  line-height: 1.7;
}
#infobar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 35px;
  padding: 0 .6rem;
  color: #e4eaf0;
  background: #070d13;
  border-bottom: 1px solid #25313b;
  font-size: .78rem;
  line-height: 35px;
  opacity: 1;
}
#infobar a, #infobar a:link, #infobar a:visited,
#infobar a[href^="tel:"], #infobar a[href^="mailto:"] { color: #e7edf2; font-weight: 550; }
#infobar a:hover { color: #ff8b95; }
#menubar {
  position: fixed;
  top: 35px;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 85px;
  color: #fff;
  background: rgba(16, 24, 32, .98);
  border-bottom: 3px solid var(--dl-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .20);
  opacity: 1;
}
#menubar #container { padding-block: 0; }
.logo { float: left; height: 80px; width: auto; max-width: 40vw; padding: 7px 2.5rem 7px 0; object-fit: contain; }
.text_right { width: 100%; padding: 0; text-align: right; }
.text_right a:link, .text_right a:visited, .text_right a:active { color: #e4eaf0; }
.text_right a:hover { color: #ff8b95; }

/* Navigation refresh: retains the site's float-based HTML but scopes the styles
   to #menubar. Existing responsive .icon / #smallMenu JavaScript still applies.
   Optional: adding .is-open or aria-expanded="true" to a dropdown via JS will
   also hold a submenu open for click/touch and assistive technologies. */
#menubar .topnav {
  min-height: 82px;
  overflow: visible;
  line-height: 1.2;
}
#menubar .topnav::after { content: ""; display: table; clear: both; }
#menubar .topnav > a,
#menubar .topnav > a:link,
#menubar .topnav > a:visited {
  display: inline-flex;
  float: right;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  padding: .85rem .9rem;
  color: #e8edf2;
  font-size: .9rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
#menubar .topnav > a:hover,
#menubar .topnav > a:focus-visible,
#menubar .topnav > .dropdown:hover > .dropbtn,
#menubar .topnav > .dropdown:focus-within > .dropbtn,
#menubar .topnav > .dropdown.is-open > .dropbtn {
  color: #fff;
  background: #24313d;
  border-bottom-color: var(--dl-accent);
  text-decoration: none;
}
#menubar .topnav > a.active,
#menubar .topnav > a.active:visited,
#menubar .topnav > a[aria-current="page"] {
  color: #fff;
  background: #26333e;
  border-bottom-color: var(--dl-accent);
}
#menubar .topnav > .dropdown {
  position: relative;
  float: right;
  overflow: visible;
}
#menubar .topnav > .dropdown > .dropbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 82px;
  margin: 0;
  padding: .85rem .9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #e8edf2;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  font-size: .9rem;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* Accessible-looking chevron; doesn't require a Font Awesome icon or HTML edit. */
#menubar .topnav > .dropdown > .dropbtn::after {
  content: "";
  width: .42rem;
  height: .42rem;
  margin-top: -.22rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  opacity: .8;
}
/* If older markup already uses a Font Awesome caret, avoid a second one. */
#menubar .topnav > .dropdown > .dropbtn:has(> .fa-caret-down)::after,
#menubar .topnav > .dropdown > .dropbtn:has(> .fa-angle-down)::after {
  display: none;
}
#menubar .topnav > .dropdown:hover > .dropbtn::after,
#menubar .topnav > .dropdown:focus-within > .dropbtn::after,
#menubar .topnav > .dropdown.is-open > .dropbtn::after,
#menubar .topnav > .dropdown > .dropbtn[aria-expanded="true"]::after {
  transform: translateY(.18rem) rotate(225deg);
}
#menubar .topnav > .dropdown > .dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  z-index: 1100;
  width: max-content;
  min-width: 238px;
  max-width: min(340px, calc(100vw - 24px));
  padding: .45rem;
  color: #e8edf2;
  background: linear-gradient(145deg, #1d2b37 0%, #111c25 100%);
  border: 1px solid #394955;
  border-top: 3px solid var(--dl-accent);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36);
  text-align: left;
  overflow-wrap: anywhere;
}
#menubar .topnav > .dropdown > .dropdown-content a,
#menubar .topnav > .dropdown > .dropdown-content a:link,
#menubar .topnav > .dropdown > .dropdown-content a:visited {
  display: flex;
  float: none;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: .68rem .86rem;
  color: #edf3f7;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
#menubar .topnav > .dropdown > .dropdown-content a + a { margin-top: .1rem; }
#menubar .topnav > .dropdown > .dropdown-content a:hover,
#menubar .topnav > .dropdown > .dropdown-content a:focus-visible,
#menubar .topnav > .dropdown > .dropdown-content a[aria-current="page"] {
  color: #fff;
  background: #2c3d49;
  border-left-color: var(--dl-accent);
}
#menubar .topnav > .dropdown:hover > .dropdown-content,
#menubar .topnav > .dropdown:focus-within > .dropdown-content,
#menubar .topnav > .dropdown.is-open > .dropdown-content,
#menubar .topnav > .dropdown:has(> .dropbtn[aria-expanded="true"]) > .dropdown-content {
  display: block;
  animation: dl-menu-appear .16s ease-out both;
}
@keyframes dl-menu-appear {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* The hamburger retains its existing markup and click handler. */
#menubar .topnav > .icon,
#menubar .topnav > a.icon:link,
#menubar .topnav > a.icon:visited { display: none; }
#smallMenu { display: none; }

/* OPTIONAL PHOTO REFRESH (leave existing paths in place until assets exist):
   ../site_images/homebg.jpg              -> 1920x900 drifting action hero WebP
   ../site_images/tarmac.bg.jpg           -> restrained dark asphalt WebP texture
   ../site_images/track-layout.whiteOp.png -> transparent SVG track outline
   ../site_images/dlfaded.png             -> transparent one-colour DL watermark
   After uploading replacements, update only the corresponding url(...) below.
   Keep photographs licensed/owned and readable under dark gradient overlays. */
/* 03. HERO / IMAGE PANELS -------------------------------------------------- */
#dedicated {
  min-height: 410px;
  height: auto;
  background-color: var(--dl-dark);
  padding: clamp(10.5rem, 15vw, 13rem) max(1.25rem, calc((100vw - 1200px) / 2)) 4rem;
  background-image: linear-gradient(95deg, rgba(8, 14, 21, .86) 0%,
                     rgba(8, 14, 21, .50) 60%, rgba(8, 14, 21, .25) 100%),
                     url("../site_images/homebg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  font-family: inherit;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.06;
  text-align: left;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
#dedicated a { color: #fff; }
#dedicated a:hover { color: #ffc7cc; }
#panel, #panel2, #panel3, #panel4, #panel5, #panel6 {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
}
#panel { color: var(--dl-ink); background: var(--dl-surface); }
#panel2 { color: var(--dl-ink); background: #edf1f4; }
#panel3 {
  color: #f1f5f8;
  background-color: #14202a;
  background-image: linear-gradient(rgba(14, 23, 31, .9), rgba(14, 23, 31, .9)),
                    url("../site_images/tarmac.bg.jpg");
  background-repeat: repeat;
}
#panel3 > #containerBody {
  color: #f1f5f8;
  background-image: url("../site_images/track-layout.whiteOp.png");
  background-position: center right;
  background-size: contain;
  background-repeat: no-repeat;
}
#panel4 {
  color: #f2f6fa;
  background: linear-gradient(145deg, #24313d, #101820);
}
#panel4 #containerBody {
  color: #fff;
  background-image: url("../site_images/dlfaded.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#panel5 { color: #e4eaf0; background: #18232e; border-top: 3px solid var(--dl-accent); }
#panel6 { min-height: 50px; color: #b5c1cb; background: #0b1218; font-size: .82rem; font-weight: 550; }
#panel6 #containerBody { padding-block: 1.2rem; text-align: center; }
#panel3 a, #panel3 a:visited,
#panel4 a, #panel4 a:visited,
#panel5 a, #panel5 a:visited,
#panel6 a, #panel6 a:visited { color: #ff9da6; }
#panel3 a:hover, #panel4 a:hover,
#panel5 a:hover, #panel6 a:hover { color: #fff; }
#containerBody a.textlink, #containerBody a.textlink:link,
#containerBody a.textlink:visited, #containerBody a.textlink:active {
  color: #ad2634;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#containerBody a.textlink:hover { color: var(--dl-accent-hover); }
#panel3 #containerBody a.textlink, #panel4 #containerBody a.textlink,
#panel5 #containerBody a.textlink { color: #ffadb5; }
#panel3 #containerBody a.textlink:hover, #panel4 #containerBody a.textlink:hover,
#panel5 #containerBody a.textlink:hover { color: white; }

/* 04. CONTENT, PROMOTIONAL CTA & NEWS ------------------------------------- */
#half_page {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 1.25rem);
  margin: 0 .5rem 1.2rem;
  padding: .75rem 1rem;
  text-align: left;
}
.poster { float: right; width: min(400px, 42%); max-width: 100%; margin: 0 0 1.5rem 1.5rem; padding: 0; }
.poster img { display: block; width: 100%; border-radius: var(--dl-radius); box-shadow: var(--dl-shadow); }
.moreinfo, .moreinfo:link, .moreinfo:visited, .moreinfo:active,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  width: auto;
  min-height: 48px;
  padding: .85rem 1.4rem;
  margin: .35rem 0;
  border: 1px solid var(--dl-accent);
  border-radius: 9px;
  background: var(--dl-accent);
  box-shadow: 0 4px 14px rgba(230, 57, 70, .16);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.moreinfo:hover, .moreinfo:focus-visible,
input[type="submit"]:hover, input[type="submit"]:focus-visible,
#panel4 .moreinfo:hover, #panel4 .moreinfo:focus-visible {
  color: #fff;
  background: var(--dl-accent-hover);
  border-color: var(--dl-accent-hover);
  box-shadow: 0 7px 18px rgba(230, 57, 70, .22);
  text-decoration: none;
  transform: translateY(-1px);
}
#panel4 .moreinfo, #panel4 .moreinfo:visited,
#panel4 .moreinfo:active { color: #fff; background: var(--dl-accent); }
#panel5 .moreinfo, #panel5 .moreinfo:visited,
#panel5 .moreinfo:active { padding: .65rem 1rem; font-size: .85rem; }
.newsHeaderImg {
  display: block;
  width: 100%;
  height: clamp(190px, 28vw, 320px);
  object-fit: cover;
  border-radius: 12px;
}
.newsHeaderImgNew { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 12px; }
#newsflash { font-size: 1.1rem; font-weight: 800; line-height: 1.4; text-transform: none; }
.postdetails { color: var(--dl-muted); font-size: .78rem; line-height: 1.45; letter-spacing: .025em; text-transform: uppercase; }
#panel3 .postdetails, #panel4 .postdetails, #panel5 .postdetails { color: #cad4dc; }

/* Reuse existing card classes (also covers the old Bootstrap-style markup). */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  background: var(--dl-surface);
  background-clip: border-box;
  color: var(--dl-ink);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  box-shadow: 0 3px 12px rgba(16, 24, 32, .05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: #c8d2da; box-shadow: var(--dl-shadow); }
.card > hr { margin-right: 0; margin-left: 0; }
.card-body { flex: 1 1 auto; min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); }
.card-title { margin-bottom: .7rem; }
.card-subtitle { margin-top: -.3rem; margin-bottom: .75rem; color: var(--dl-muted); }
.card-text:last-child { margin-bottom: 0; }
.card-link:hover { text-decoration: underline; }
.card-link + .card-link { margin-left: 1rem; }
.card-header, .card-footer {
  padding: .85rem 1.2rem;
  background: #f4f7f9;
  color: var(--dl-ink);
}
.card-header { margin-bottom: 0; border-bottom: 1px solid var(--dl-line); font-weight: 750; }
.card-footer { border-top: 1px solid var(--dl-line); }
.card-header:first-child { border-radius: calc(var(--dl-radius) - 1px) calc(var(--dl-radius) - 1px) 0 0; }
.card-footer:last-child { border-radius: 0 0 calc(var(--dl-radius) - 1px) calc(var(--dl-radius) - 1px); }
.card-header-tabs { margin: 0 -.65rem -.85rem; border-bottom: 0; }
.card-header-pills { margin: 0 -.65rem; }
.card-img-overlay { position: absolute; inset: 0; padding: 1.25rem; }
.card-img, .card-img-top, .card-img-bottom { display: block; flex-shrink: 0; width: 100%; }
.card-img, .card-img-top { border-radius: calc(var(--dl-radius) - 1px) calc(var(--dl-radius) - 1px) 0 0; }
.card-img-bottom { border-radius: 0 0 calc(var(--dl-radius) - 1px) calc(var(--dl-radius) - 1px); }
.card > .list-group:first-child .list-group-item:first-child { border-radius: var(--dl-radius) var(--dl-radius) 0 0; }
.card > .list-group:last-child .list-group-item:last-child { border-radius: 0 0 var(--dl-radius) var(--dl-radius); }
.card-header + .list-group .list-group-item:first-child { border-top: 0; }
.card-deck .card, .card-group > .card, .card-columns .card { margin-bottom: 1rem; }
.card-deck, .card-group { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.card-deck .card, .card-group > .card { flex: 1 1 270px; margin: 0; }
.card-columns { column-count: 3; column-gap: 1.25rem; }
.card-columns .card { display: inline-flex; width: 100%; break-inside: avoid; }
.accordion > .card { overflow: hidden; }
.accordion > .card:not(:last-of-type) { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.accordion > .card:not(:first-of-type) { border-top-left-radius: 0; border-top-right-radius: 0; }
.accordion > .card > .card-header { border-radius: 0; margin-bottom: -1px; }

/* 05. BOOKING, CALENDAR & FORM CONTROLS ----------------------------------- */
.forms {
  width: min(100%, 850px);
  min-width: 0;
  margin: 1rem auto;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  box-shadow: var(--dl-shadow);
  color: var(--dl-ink);
  line-height: 1.6;
  overflow: hidden;
}
.forms #formleft { float: left; width: 30%; min-width: 0; display: none; }
.forms #formright { float: left; width: 100%; min-width: 0; }
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="email"],
input[type="file"], input[type="search"], select, textarea {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: .45rem 0;
  padding: .72rem .85rem;
  background: var(--dl-surface);
  border: 1px solid #b8c5cf;
  border-radius: 8px;
  color: var(--dl-ink);
  font: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="time"]:focus, input[type="email"]:focus,
input[type="search"]:focus, select:focus, textarea:focus {
  border-color: var(--dl-focus);
  box-shadow: 0 0 0 3px rgba(58, 145, 220, .16);
}
textarea { min-height: 180px; height: 200px; resize: vertical; }
input[type="submit"] { width: auto; min-width: 130px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dl-accent); }
#calendarType {
  padding: .8rem 1rem;
  color: var(--dl-ink);
  background: #e9eff3;
  border: 1px solid var(--dl-line);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 750;
}
#bookingbug { width: 100%; max-width: 100%; text-align: center; margin: 0 auto; }
#map-container { width: 100%; max-width: 100%; margin: 0; padding: 0; }
#calendar {
  display: table;
  width: 100%;
  margin: .9rem auto 1.5rem;
  padding: 0;
  border: 1px solid var(--dl-line);
  border-spacing: 0;
  border-radius: 10px;
  color: var(--dl-ink);
  background: var(--dl-surface);
  line-height: 1.5;
}
#calendar #row { display: table-row; }
#calendar #row:nth-child(odd) { background: #f4f7f9; }
#calendar #row:hover { background: #edf2f5; }
#calendar #row #col1, #calendar #row #col2, #calendar #row #col3,
#calendar #row #col4, #calendar #row #col5 {
  display: table-cell;
  vertical-align: middle;
  padding: .75rem .7rem;
  border-bottom: 1px solid var(--dl-line);
  text-align: left;
  overflow-wrap: anywhere;
}
#col1, #col3, #col4 { width: 20%; }
#col2 { width: 15%; }
#col5 { width: auto; }
#calendar a, #calendar a:visited, #calendar a:active { color: #ad2634; text-decoration: none; }
#calendar a:hover { color: #811924; text-decoration: underline; }

/* Existing event ticket/reservation tables. Do not change table roles. */
.drift_shop { display: inline-table; width: 98%; max-width: 100%; margin: .4rem auto; padding: .65rem; text-transform: none; }
.row { display: table-row; }
.header_row { padding: .65rem 0; color: var(--dl-dark); font-size: 1rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.details, .adults, .button, .kids {
  display: table-cell;
  vertical-align: top;
  padding: .65rem .55rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--dl-line);
}
.details { width: 50%; text-align: left; }
.adults { width: 23%; text-align: left; }
.button { width: 75%; text-align: left; }
.kids { width: 23%; min-height: 35px; text-align: center; }
.item_header { color: var(--dl-dark); font-size: 1.1rem; font-weight: 800; }

/* 06. MESSAGES & ADMIN/EMAIL UI ------------------------------------------ */
.emailDiv {
  width: 100%;
  margin: .8rem 0;
  padding: 1.2rem;
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: 12px;
  box-shadow: var(--dl-shadow);
  font-size: 1rem;
}
.success, .error, .correct {
  display: block;
  margin: .5rem 0;
  padding: .75rem 1rem;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: none;
}
.success { color: #144765; background: #e6f4fc; border: 1px solid #a8d7f0; }
.error { color: #8d1b29; background: #fff0f1; border: 1px solid #efafb9; }
.correct { color: #145331; background: #e7f8ed; border: 1px solid #a6d9b7; }
.inputResponse { font-size: 1rem; font-weight: 700; }
#adminlist { width: 100%; }
#adminlistrow { display: inline-block; width: 100%; vertical-align: top; border-bottom: 1px solid var(--dl-line); }
#adminlistrow:hover { background: #edf2f5; }
#listitem { display: inline-block; width: 60%; padding: .6rem; vertical-align: top; }
#listsmall { display: inline-block; width: 30%; padding: .6rem; vertical-align: top; }

/* 07. FOOTER & SOCIAL ------------------------------------------------------ */
#footertab {
  float: left;
  width: 25%;
  min-width: 210px;
  padding: .65rem 1.2rem 1rem 0;
  text-align: left;
  overflow-wrap: anywhere;
}
#footertab a, #footertab a:link, #footertab a:active, #footertab a:visited { color: #e4eaf0; text-decoration: none; }
#footertab a:hover { color: #ff9da6; text-decoration: underline; }
#panel5 #containerBody::after { content: ""; display: table; clear: both; }
.fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  margin: 5px 3px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: #2b3945;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}
.fa:hover { opacity: .88; transform: translateY(-2px); }
.fa-facebook { background: #1877f2; color: #fff; }
.fa-instagram { background: linear-gradient(135deg, #833ab4, #e1306c, #f77737); color: #fff; }
.fa-youtube { background: #e62117; color: #fff; }
.fa-twitter { background: #2395cf; color: #fff; }
#follow { display: block; float: right; overflow: visible; text-align: right; line-height: 35px; }

/* 08. RESPONSIVE BREAKPOINTS ---------------------------------------------- */
@media (max-width: 1180px) {
  .logo { padding-right: 1.3rem; }
  #menubar .topnav > a, #menubar .topnav > a:link,
  #menubar .topnav > a:visited,
  #menubar .topnav > .dropdown > .dropbtn { padding-inline: .61rem; font-size: .82rem; }
}
@media (max-width: 1000px) {
  .card-columns { column-count: 2; }
  #footertab { width: 50%; }
  #half_page { width: calc(50% - 1.2rem); }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 120px; }
  #infobar { padding-inline: .4rem; font-size: .7rem; white-space: nowrap; }
  #menubar { height: 80px; }
  #menubar #container { width: calc(100% - 1.4rem); }
  .logo { height: 76px; max-width: 64vw; padding: 7px 1rem 7px 0; }
  #menubar .topnav { min-height: 77px; }
  #menubar .topnav > a, #menubar .topnav > a:link,
  #menubar .topnav > a:visited,
  #menubar .topnav > .dropdown > .dropbtn { display: none; }
  #menubar .topnav > .dropdown > .dropdown-content { display: none !important; }
  #menubar .topnav > .icon, #menubar .topnav > a.icon:link,
  #menubar .topnav > a.icon:visited {
    display: flex;
    float: right;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 72px;
    min-height: 0;
    margin: 3px 0;
    padding: 0;
    background: #26333e;
    border: 1px solid #3f5060;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 1.9rem;
    text-decoration: none;
  }
  #menubar .topnav > .icon:hover,
  #menubar .topnav > a.icon:hover { background: var(--dl-accent); }
  /* JS still toggles #smallMenu display; CSS only defines its visible layout. */
  #smallMenu {
    position: fixed;
    top: 115px;
    left: 0;
    right: 0;
    z-index: 1005;
    width: 100%;
    max-height: calc(100vh - 115px);
    max-height: calc(100dvh - 115px);
    padding: .45rem;
    border-top: 3px solid var(--dl-accent);
    background: #131e27;
    box-shadow: 0 14px 26px rgba(0,0,0,.26);
    overflow-x: hidden;
    overflow-y: auto;
    font-size: .91rem;
    line-height: 1.4;
    text-align: left;
  }
  #smallMenu a, #smallMenu a:link, #smallMenu a:visited,
  #smallMenu #nolink, #smallMenu #sublink,
  #smallMenu .nolink, #smallMenu .sublink {
    display: block;
    width: 100%;
    margin: 0;
    padding: .75rem 1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #2a3742;
    color: #e8edf2;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
  }
  #smallMenu #nolink, #smallMenu .nolink {
    padding-block: .68rem;
    color: #fff;
    background: #253542;
    border-left: 3px solid var(--dl-accent);
    font-weight: 800;
    letter-spacing: .02em;
  }
  #smallMenu #sublink, #smallMenu .sublink {
    padding-left: 2rem;
    color: #d5dfe7;
    font-weight: 550;
  }
  #smallMenu a:hover, #smallMenu a:focus-visible,
  #smallMenu #sublink:hover, #smallMenu .sublink:hover {
    background: #2b3b49;
    color: #fff;
  }
  #smallMenu a.active, #smallMenu a[aria-current="page"] {
    color: #fff;
    background: #2a3945;
    border-left: 3px solid var(--dl-accent);
  }
  #dedicated { min-height: 365px; padding: 145px 1.3rem 3rem; font-size: clamp(2rem, 8vw, 3.3rem); }
  #container, #containerBody { width: calc(100% - 2rem); }
  #containerBody { padding-block: 2.4rem; text-align: left; }
  .poster { float: none; width: min(100%, 420px); margin: 0 auto 1.5rem; }
  .card-columns { column-count: 2; }
  .text_right { text-align: center; }
  #half_page { width: 100%; margin: 0 0 1rem; padding: .6rem 0; text-align: left; }
  .drift_shop { width: 100%; padding: .15rem; }
  #footertab { width: 50%; min-width: 0; }
  #follow { float: none; text-align: center; }
}
@media (max-width: 600px) {
  #infobar { font-size: .64rem; }
  #container, #containerBody { width: calc(100% - 1.5rem); }
  #containerBody { padding-block: 1.8rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.55rem; }
  #dedicated { min-height: 330px; padding: 145px 1rem 2.5rem; font-size: clamp(1.7rem, 8vw, 2.75rem); }
  #panel3 > #containerBody { background-size: 90% auto; background-position: center; }
  .card-deck, .card-group { flex-direction: column; gap: 1rem; }
  .card-deck .card, .card-group > .card { flex-basis: auto; }
  .card-columns { column-count: 1; }
  .forms { padding: 1rem; }
  #calendar { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #calendar #row { display: table-row; }
  #calendar #row #col1, #calendar #row #col2, #calendar #row #col3,
  #calendar #row #col4, #calendar #row #col5 { padding: .6rem; min-width: 85px; }
  .details, .adults, .button, .kids { padding: .55rem .35rem; font-size: .88rem; }
  #footertab { float: none; width: 100%; padding: .65rem 0; }
  #listitem { width: 65%; }
  #listsmall { width: 33%; }
  .moreinfo, .moreinfo:link, .moreinfo:visited, .moreinfo:active { width: 100%; }
}
@media (max-width: 380px) {
  #infobar { font-size: .59rem; }
  .logo { max-width: 60vw; }
  #dedicated { font-size: 1.65rem; }
  .card-body { padding: .9rem; }
}

/* 09. REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .moreinfo:hover, .fa:hover { transform: none; }
  #menubar .topnav > .dropdown > .dropdown-content { animation: none; }
}

/* 10. PRINT & ORDER PRINT AREA -------------------------------------------- */
@page { margin: 12mm; }
@media print {
  html, body { margin: 0; padding: 0; background: #fff; color: #000; }
  body { visibility: hidden; }
  #infobar, #menubar, #smallMenu, #panel7, #panel5, header { display: none !important; }
  .printArea {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 1rem;
    color: #000;
  }
  .printArea * { visibility: visible; }
  .pageBreak { page-break-after: always; break-after: page; }
  .printArea:last-child { page-break-after: auto; break-after: auto; }
  .trorders { display: table-row; background: #ddd; }
  .trorders:nth-child(odd) { background: #fff; }
  .card, .forms { box-shadow: none; }
}