/* ==========================================================================
   BDCQ heritage dark reskin — loads after the legacy Betheme theme CSS.
   Restyles the existing scraped markup; does not change page structure
   (except two dead WordPress form blocks, replaced with real React forms
   mounted via BDCQ_FORM_MOUNT markers — see app/[...slug]/page.tsx).
   ========================================================================== */

:root {
  /* Accent colors — brightened versions of the logo's maroon/green for
     legibility as text/icons/links on a dark background; the "-deep"
     variants are for solid fills (buttons, header border, footer). */
  --bdcq-maroon: #c8455f;
  --bdcq-maroon-deep: #7a1b2e;
  --bdcq-maroon-deeper: #4a101b;
  --bdcq-green: #3f9c6a;
  --bdcq-green-deep: #1b5e3a;
  --bdcq-green-deeper: #0e2f1d;
  --bdcq-silver: #c9c9c9;

  --bdcq-bg: #121110;
  --bdcq-surface: #1c1a17;
  --bdcq-surface-2: #26221e;
  --bdcq-border: rgba(255, 255, 255, 0.1);
  --bdcq-text: #f2ece4;
  --bdcq-text-muted: rgba(242, 236, 228, 0.65);

  --font-heading: var(--font-cinzel), Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------
   Base / layout fixes
   -------------------------------------------------------------------- */

/* The legacy theme hard-codes a 960px minimum body width, which is the
   main reason the site can't be responsive on phones — it forces a
   desktop-width viewport and horizontal scrolling. */
html, body {
  min-width: 0 !important;
  max-width: 100%;
  overflow-x: hidden;
}

html {
  background: var(--bdcq-bg);
}

body {
  background: var(--bdcq-bg) !important;
  color: var(--bdcq-text);
}

#Wrapper,
#Content,
.content_wrapper,
.section_wrapper,
.the_content_wrapper {
  background: transparent !important;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--bdcq-maroon);
}
a:hover,
a:focus {
  color: var(--bdcq-green);
}

::selection {
  background: var(--bdcq-maroon-deep);
  color: #fff;
}

/* A couple of scraped content blocks hard-code black or near-black text
   inline (readable on the old white background, invisible on this dark
   one) — the promo poster on /bulletin is the main offender. */
[style*="color:#000"],
[style*="color: #000"] {
  color: var(--bdcq-text) !important;
}

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

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.fancy_heading .title,
#Top_bar .logo a,
.title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bdcq-text) !important;
}
/* Headings that are themselves links (e.g. "Download the 2026
   Application Form") should read as a heading, not a random link
   color — but still show intent on hover. */
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--bdcq-green) !important;
}

.fancy_heading_line .title {
  position: relative;
  padding-bottom: 18px;
}
.fancy_heading_line .title:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--bdcq-green);
  transform: translateX(-50%);
}

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

#Header_wrapper {
  background: var(--bdcq-bg) !important;
}

#Top_bar {
  position: sticky !important;
  left: auto !important;
  top: 0 !important;
  border-bottom: 3px solid var(--bdcq-maroon-deep);
  background: var(--bdcq-bg) !important;
}

#Top_bar .container,
#Top_bar .column {
  background: transparent !important;
}
#Top_bar .container {
  /* Same full-bleed breakout as .bdcq-hero-section — .container inherits
     be.css's max-width:1220px, and on very wide screens the ancestor
     #wp-clone is separately capped at 1800px (zz-wide-screen-fix.css).
     Without this the header content ends up centered in a shrunken,
     doubly-boxed island with huge dead space on both sides at wide
     viewports, while the hero below it (already full-bleed) fills the
     whole screen — a jarring mismatch. */
  max-width: 100vw !important;
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 40px !important;
  box-sizing: border-box;
}

#Top_bar .top_bar_left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent !important;
}

#Top_bar .logo {
  display: flex;
  align-items: center;
}
/* responsive.css's mobile block sets margin:10px 50px on the logo link
   (meant for the original theme's centered-mobile-logo layout, which we
   don't use) — it was pushing the logo 50px off the left edge and
   throwing off vertical centering against the hamburger button. */
#Top_bar .logo a,
#Top_bar .logo #logo,
#Top_bar .logo .custom-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}
#Top_bar .logo img.logo-main {
  display: block !important;
  height: 64px;
  width: auto;
  max-width: none;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
}
/* The scraper captured all four logo variants (main/sticky/mobile/
   mobile-sticky) as static siblings with no JS to swap between them —
   show only one, at every breakpoint. */
#Top_bar .logo img.logo-sticky,
#Top_bar .logo img.logo-mobile,
#Top_bar .logo img.logo-mobile-sticky {
  display: none !important;
}

#Top_bar .menu_wrapper {
  display: flex;
  align-items: center;
}
#Top_bar #menu {
  background: transparent !important;
}

#Top_bar .menu > li > a {
  line-height: normal;
}
#Top_bar .menu > li > a span:not(.description) {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bdcq-text-muted);
  border-right: none !important;
  padding: 0 16px;
}
#Top_bar .menu > li > a:hover span:not(.description),
#Top_bar .menu > li.current-menu-item > a span:not(.description) {
  color: var(--bdcq-maroon);
}

#Top_bar .menu li ul {
  background: var(--bdcq-surface);
  border-top: 3px solid var(--bdcq-green);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
#Top_bar .menu li ul li a {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bdcq-text-muted);
}
#Top_bar .menu > li ul li a:hover,
#Top_bar .menu > li ul li.hover > a {
  background: var(--bdcq-surface-2);
  color: var(--bdcq-maroon);
}

#Top_bar a.responsive-menu-toggle {
  display: none;
  color: var(--bdcq-maroon);
  border: 2px solid var(--bdcq-maroon);
}
#Top_bar a.responsive-menu-toggle:hover {
  background: var(--bdcq-maroon);
  color: #fff;
}

/* --------------------------------------------------------------------
   Home page hero — the page title over a full-width background photo
   (replaces both the original photo slider and the later centered
   hero-image graphic).
   -------------------------------------------------------------------- */

.bdcq-hero-section {
  /* Full-bleed breakout: #wp-clone (an ancestor) gets capped at 1800px
     on very wide screens by zz-wide-screen-fix.css, and the legacy
     theme's #Wrapper/.container chain boxes everything to ~1220px by
     default — neither should clip a hero background image. This
     escapes any ancestor max-width and spans the true viewport width
     regardless of how wide the screen is. */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image:
    linear-gradient(
      to bottom,
      rgba(18, 17, 16, 0.55) 0%,
      rgba(18, 17, 16, 0.35) 45%,
      rgba(18, 17, 16, 0.85) 100%
    ),
    url("/bentley_8-litre_1931_photos_3-e1604033254453.jpg");
  background-size: cover;
  background-position: center 30%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bdcq-hero-section .section_wrapper {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}
.bdcq-hero-section .fancy_heading_line .title:after {
  background: var(--bdcq-green);
}

@media only screen and (max-width: 600px) {
  .bdcq-hero-section {
    min-height: 50vh;
  }
}

/* --------------------------------------------------------------------
   Events page — custom "bentley-events" CSS block (survived the scrape
   as aggregated customizer CSS rather than a stripped inline <style>
   tag) hard-codes a light-grey card background and dark-green text,
   unreadable once the page went dark.
   -------------------------------------------------------------------- */

.bentley-events li {
  background-color: var(--bdcq-surface) !important;
  color: var(--bdcq-text) !important;
}
.bentley-events li strong {
  color: var(--bdcq-green) !important;
}
.bentley-events h2,
.bentley-events h3 {
  color: var(--bdcq-text) !important;
}
.bentley-events p em {
  color: var(--bdcq-text-muted) !important;
}

/* --------------------------------------------------------------------
   Icon boxes / cards
   -------------------------------------------------------------------- */

.icon_box .icon_wrapper .icon {
  color: var(--bdcq-maroon);
}
.icon_box .desc_wrapper .title {
  margin: 0;
}
.icon_box .desc_wrapper .desc {
  color: var(--bdcq-text-muted);
}

/* Card treatment only applies to the top-icon layout (feature/contact
   tiles) — icon_position_left boxes are inline notices where the icon
   sits beside running text, and don't want a card wrapper. */
.icon_box.icon_position_top {
  background: var(--bdcq-surface);
  border: 1px solid var(--bdcq-border);
  border-radius: 8px;
  padding: 32px 24px !important;
  border-top: 3px solid var(--bdcq-green) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height: 100%;
}
.icon_box.icon_position_top:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  border-color: var(--bdcq-green);
}
.icon_box.icon_position_left {
  background: var(--bdcq-surface);
  border: 1px solid var(--bdcq-border);
  border-radius: 8px;
  /* be.css absolutely-positions the icon in the left 145px of this box
     (icon_position_left, min-height:126px) — keep that space reserved
     on the right side of the padding rather than overriding it away,
     or the text collides with the icon. */
  padding: 20px 20px 20px 165px !important;
}
.icon_box.icon_position_left .desc {
  color: var(--bdcq-text-muted);
}

/* --------------------------------------------------------------------
   Buttons / form controls (legacy scraped forms — search box, WP
   remnants still present on a couple of pages)
   -------------------------------------------------------------------- */

input[type="submit"].wpcf7-submit,
button.wpcf7-submit {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bdcq-maroon-deep) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  padding: 14px 32px !important;
  cursor: pointer;
  transition: background 0.2s ease;
}
input[type="submit"].wpcf7-submit:hover,
button.wpcf7-submit:hover {
  background: var(--bdcq-green-deep) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  background: var(--bdcq-surface-2);
  color: var(--bdcq-text);
  border-radius: 6px;
  border: 1px solid var(--bdcq-border) !important;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--bdcq-text-muted);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--bdcq-green) !important;
  box-shadow: 0 0 0 3px rgba(63, 156, 106, 0.25) !important;
}

/* --------------------------------------------------------------------
   Modern forms — ContactForm / ImpromptuEventForm (real React
   components + Server Actions, replacing the dead WordPress
   Contact-Form-7 markup that used to post to a WordPress AJAX endpoint
   that no longer exists).
   -------------------------------------------------------------------- */

.bdcq-form {
  background: var(--bdcq-surface);
  border: 1px solid var(--bdcq-border);
  border-radius: 10px;
  padding: 28px;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.bdcq-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bdcq-form__grid--single {
  grid-template-columns: 1fr;
}
.bdcq-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.bdcq-form__field--full {
  grid-column: 1 / -1;
}
.bdcq-form__field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bdcq-text-muted);
}
.bdcq-form input,
.bdcq-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
}
.bdcq-form textarea {
  resize: vertical;
  min-height: 120px;
}
.bdcq-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 14px;
  color: var(--bdcq-text-muted);
}
.bdcq-form__checkbox input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--bdcq-green);
}
.bdcq-form__submit {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bdcq-maroon-deep);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px 32px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.bdcq-form__submit:hover:not(:disabled) {
  background: var(--bdcq-green-deep);
}
.bdcq-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.bdcq-form__message {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}
.bdcq-form__message--success {
  background: rgba(63, 156, 106, 0.15);
  color: #a4e2c0;
  border: 1px solid rgba(63, 156, 106, 0.35);
}
.bdcq-form__message--error {
  background: rgba(200, 69, 95, 0.15);
  color: #f2b8c4;
  border: 1px solid rgba(200, 69, 95, 0.35);
}

@media only screen and (max-width: 640px) {
  .bdcq-form {
    padding: 20px;
  }
  .bdcq-form__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------
   Newsletter page cards (mailing-list signup + newsletter download)
   -------------------------------------------------------------------- */

.bdcq-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 24px;
  max-width: 900px;
  margin: 24px auto 0;
}
@media only screen and (max-width: 700px) {
  .bdcq-card-row {
    grid-template-columns: 1fr;
  }
}

.bdcq-newsletter-card {
  background: var(--bdcq-surface);
  border: 1px solid var(--bdcq-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.bdcq-newsletter-card a {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  height: 100%;
  justify-content: center;
}
.bdcq-newsletter-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
.bdcq-newsletter-card h3 {
  margin: 0;
  color: var(--bdcq-text);
  font-size: 20px;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */

#Footer {
  background: var(--bdcq-green-deeper) !important;
}
#Footer .copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------
   Mobile navigation + general responsive fixes
   -------------------------------------------------------------------- */

@media only screen and (max-width: 1239px) {
  #Top_bar a.responsive-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    margin: 0;
    right: auto;
    top: auto;
  }

  #Top_bar .menu_wrapper {
    width: auto;
  }

  /* #menu is the <nav> that MobileMenu.tsx actually toggles between
     display:none/block (its child, the <ul class="menu">, must stay
     visible so the toggle isn't fighting a second hidden element).
     Positioned against #Top_bar (sticky = a positioned ancestor), not
     .menu_wrapper, so the panel spans the full header width instead of
     just the space next to the logo. */
  #Top_bar #menu {
    display: none;
    position: absolute !important;
    left: 0 !important;
    right: 0;
    top: 100% !important;
    width: 100% !important;
    float: none !important;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    background: var(--bdcq-surface) !important;
    border-top: 3px solid var(--bdcq-maroon-deep);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.5);
  }
  #Top_bar .menu {
    display: flex !important;
    flex-direction: column;
    width: 100%;
  }
  #Top_bar .menu > li {
    float: none;
    width: 100%;
    border-bottom: 1px solid var(--bdcq-border);
  }
  #Top_bar .menu > li > a {
    line-height: normal;
  }
  #Top_bar .menu > li > a span:not(.description) {
    display: block;
    line-height: normal;
    padding: 16px 24px;
  }
  #Top_bar .menu li ul {
    position: static;
    width: 100%;
    box-shadow: none;
    border-top: none;
    background: var(--bdcq-surface-2);
  }
  #Top_bar .menu li ul li a {
    padding-left: 40px;
  }

  #Top_bar .logo img.logo-main {
    height: 48px;
  }
}

@media only screen and (max-width: 600px) {
  #Top_bar .container {
    padding: 10px 20px !important;
  }
  #Top_bar .logo img.logo-main {
    height: 40px;
  }
  .icon_box {
    padding: 22px 16px !important;
  }
  /* Too narrow for icon-beside-text (icon_position_left reserves a
     fixed 145px on the left regardless of viewport) — stack instead. */
  .icon_box.icon_position_left {
    padding: 20px !important;
  }
  .icon_box.icon_position_left .icon_wrapper {
    position: static !important;
    margin-bottom: 12px !important;
  }
  .icon_box.icon_position_left .desc_wrapper {
    padding-top: 0 !important;
  }

  .fancy_heading .title {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }

  /* A handful of scraped content blocks (e.g. the National Rally promo)
     hard-code very large inline font-sizes for a poster look that only
     works at desktop widths — a single long word like "TOOWOOMBA" at
     72px wraps mid-word on a phone. Cap the largest ones responsively. */
  [style*="font-size:72px"] {
    font-size: 26px !important;
  }
  [style*="font-size:54px"] {
    font-size: 24px !important;
  }
  [style*="font-size:52px"] {
    font-size: 23px !important;
  }
}