/*
 * Spanish Adventures — the Bold visual style.
 *
 * Loaded only when "Bold" is chosen under Appearance -> Customize -> Visual
 * style. It never replaces main.css; it sits on top of it, so every layout,
 * every template and every feature is the same. What changes is the skin:
 * near-black pages, condensed capitals, square edges and flat blocks of
 * colour instead of shadows.
 *
 * Two rules run through the whole file.
 *
 * First, the brand red is a BACKGROUND, not a text colour. #BF092F on
 * #0E1116 is a contrast ratio of about 3:1 — fine as a block with white on
 * top of it, far too little to read a sentence in. Where a coloured word is
 * needed, the signal yellow does the job at roughly 13:1.
 *
 * Second, nothing here is decorative at the cost of being readable. Capitals
 * are for headings, labels and buttons, never for body text or anything long.
 *
 * @package Gon_Adventure
 */

/* ---------------------------------------------------------------------------
   Headings — the loudest thing on the page
   --------------------------------------------------------------------------- */
.sa-style-bold h1,
.sa-style-bold h2,
.sa-style-bold h3,
.sa-style-bold h4,
.sa-style-bold h5,
.sa-style-bold h6{
  color:var(--sa-ink);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  margin-bottom:.45em;
}
.sa-style-bold h1{letter-spacing:0;font-size:clamp(var(--sa-h1-min),7vw,calc(var(--sa-h1-max) * 1.35))}
.sa-style-bold h2{letter-spacing:.005em;font-size:clamp(var(--sa-h2-min),4.6vw,calc(var(--sa-h2-max) * 1.2))}
.sa-style-bold h3{letter-spacing:.02em}
.sa-style-bold h4,
.sa-style-bold h5,
.sa-style-bold h6{letter-spacing:.06em}

/* A heading set on a red or coloured block keeps white, not the ink colour. */
.sa-style-bold .section-cta h1,
.sa-style-bold .section-cta h2,
.sa-style-bold .section-cta h3,
.sa-style-bold .topbar,
.sa-style-bold .card-badge{color:#fff}

/* The body text is the one place that stays calm and lower-case. */
.sa-style-bold body{
  background:var(--sa-page);
  color:var(--sa-ink);
  -webkit-font-smoothing:antialiased;
}
.sa-style-bold .lede,
.sa-style-bold .section-text,
.sa-style-bold .entry-content p{text-transform:none;letter-spacing:0}

/* ---------------------------------------------------------------------------
   Links — white with a heavy red rule, yellow when touched
   --------------------------------------------------------------------------- */
.sa-style-bold a{
  color:var(--sa-ink);
  text-decoration-color:var(--sa-primary);
  text-decoration-thickness:3px;
  text-underline-offset:.2em;
}
.sa-style-bold a:hover,
.sa-style-bold a:focus-visible{
  color:var(--sa-accent);
  text-decoration-color:var(--sa-accent);
  text-decoration-thickness:3px;
}
.sa-style-bold .entry-content a{font-weight:600}

/* ---------------------------------------------------------------------------
   Square everything, and take the shadows out
   --------------------------------------------------------------------------- */
.sa-style-bold .card,
.sa-style-bold .btn,
.sa-style-bold .sa-figure,
.sa-style-bold .card-media,
.sa-style-bold .photo-grid-item,
.sa-style-bold .sa-result,
.sa-style-bold .reach-card,
.sa-style-bold .contact-form-wrap,
.sa-style-bold .level-invite,
.sa-style-bold .sa-alert,
.sa-style-bold .sa-dialog-panel,
.sa-style-bold input,
.sa-style-bold select,
.sa-style-bold textarea{border-radius:0}

.sa-style-bold .card,
.sa-style-bold .sa-motion .card.has-hover:hover,
.sa-style-bold .sa-motion .card.has-hover:focus-within,
.sa-style-bold .reach-card,
.sa-style-bold .site-header,
.sa-style-bold .sa-motion .site-header.is-stuck,
.sa-style-bold .sa-dialog-panel{box-shadow:none}

/* A hard offset block takes the place of a soft shadow. */
.sa-style-bold .sa-motion .card.has-hover:hover,
.sa-style-bold .sa-motion .card.has-hover:focus-within{
  transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 var(--sa-primary);
  border-color:var(--sa-primary);
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.sa-style-bold .site-header{border-bottom:2px solid var(--sa-line)}
.sa-style-bold .brand-name{text-transform:uppercase;letter-spacing:-.01em;font-size:1.3rem;white-space:nowrap}
.sa-style-bold .brand-tag{text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem}
/* Capitals plus tracking made the menu wide enough to wrap onto a second
   line and double the height of the header. It is pulled back in: a smaller
   size, tighter gaps and the condensed face, which is what it is for. */
.sa-style-bold .menu a{
  font-family:var(--sa-font-head);
  font-weight:700;
  font-size:.9375rem;
}
@media (min-width:901px){
  .sa-style-bold .menu{gap:1.05rem;flex-wrap:nowrap}
  .sa-style-bold .primary-nav{gap:1rem}
  .sa-style-bold .menu a{letter-spacing:.05em;white-space:nowrap}
  .sa-style-bold .btn-header{padding:.7rem 1.1rem;font-size:.8125rem;letter-spacing:.06em}
}
@media (min-width:901px) and (max-width:1200px){
  .sa-style-bold .menu{gap:.8rem}
  .sa-style-bold .menu a{font-size:.875rem;letter-spacing:.03em}
  .sa-style-bold .brand-name{font-size:1.15rem}
}
.sa-style-bold .menu a:hover,
.sa-style-bold .menu a:focus-visible{color:var(--sa-accent);box-shadow:inset 0 -3px var(--sa-accent)}
.sa-style-bold .current-menu-item>a{color:var(--sa-accent);box-shadow:inset 0 -3px var(--sa-accent)}
.sa-style-bold .topbar{border-bottom:none;font-weight:600;letter-spacing:.04em}

/* ---------------------------------------------------------------------------
   Buttons — flat, square, shouted
   --------------------------------------------------------------------------- */
.sa-style-bold .btn{
  font-family:var(--sa-font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  border-width:2px;
  transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
}
.sa-style-bold .btn-primary{background:var(--sa-primary);border-color:var(--sa-primary);color:#fff}
.sa-style-bold .btn-primary:hover,
.sa-style-bold .btn-primary:focus-visible{background:var(--sa-accent);border-color:var(--sa-accent);color:var(--sa-accent-ink)}
.sa-style-bold .btn-outline{background:transparent;color:var(--sa-ink);border-color:var(--sa-ink)}
.sa-style-bold .btn-outline:hover,
.sa-style-bold .btn-outline:focus-visible{background:var(--sa-ink);color:var(--sa-page);border-color:var(--sa-ink)}
.sa-style-bold .btn-light{background:#fff;color:#111;border-color:#fff}
.sa-style-bold .btn-light:hover,
.sa-style-bold .btn-light:focus-visible{background:var(--sa-accent);border-color:var(--sa-accent);color:var(--sa-accent-ink)}
.sa-style-bold .btn-ghost{color:var(--sa-ink);text-decoration-color:var(--sa-primary)}
.sa-style-bold .btn-ghost:hover{color:var(--sa-accent)}
.sa-style-bold .sa-motion .btn:hover,
.sa-style-bold .sa-motion .btn:focus-visible{transform:translate(-2px,-2px)}

/* ---------------------------------------------------------------------------
   Panels that were white
   --------------------------------------------------------------------------- */
.sa-style-bold .card,
.sa-style-bold .reach-card,
.sa-style-bold .level-invite,
.sa-style-bold .alt .level-invite,
.sa-style-bold .sa-result,
.sa-style-bold .sa-dialog-panel{background:var(--sa-wash);border:2px solid var(--sa-line);color:var(--sa-ink)}
.sa-style-bold .card.is-featured{border-color:var(--sa-primary);border-width:3px}
.sa-style-bold .card-media{background:var(--sa-page)}
.sa-style-bold .sa-result{border-top:6px solid var(--sa-primary)}
.sa-style-bold .sa-figure{background:var(--sa-wash)}
.sa-style-bold .card-link{color:var(--sa-ink);border-bottom-color:var(--sa-primary);border-bottom-width:3px}
.sa-style-bold .card-link:hover{color:var(--sa-accent);border-bottom-color:var(--sa-accent)}

/* Labels and small print, in capitals like the rest. */
.sa-style-bold .card-badge{background:var(--sa-primary);letter-spacing:.1em}
.sa-style-bold .card-features-title,
.sa-style-bold .page-kicker,
.sa-style-bold .hero-eyebrow,
.sa-style-bold .sa-result-kicker,
.sa-style-bold .sa-clip-kicker,
.sa-style-bold .footer-label,
.sa-style-bold .footer-title{color:var(--sa-accent);letter-spacing:.16em;text-transform:uppercase}

/* ---------------------------------------------------------------------------
   Text that was navy
   In the Classic style the navy is a dark ink on a white page. Here the navy
   IS the page, so every one of these would have been dark-on-dark — the
   contact card's email address and phone number among them, which is how this
   list was found. They all take the ordinary ink colour instead.
   --------------------------------------------------------------------------- */
.sa-style-bold .contact-value,
.sa-style-bold .reach-value,
.sa-style-bold .contact-field label,
.sa-style-bold .card-features-title,
.sa-style-bold .level-invite-note,
.sa-style-bold .post-list-title a,
.sa-style-bold .page-numbers,
.sa-style-bold .sa-quiz-facts li,
.sa-style-bold .sa-quiz-step,
.sa-style-bold .sa-q-prompt,
.sa-style-bold .sa-table caption,
.sa-style-bold .sa-quiz-review summary{color:var(--sa-ink)}

/* The price is the clearest case of the rule at the top of this file. In the
   Classic style it is the brand red on white, which reads well. Here that same
   red sits on a dark card at about 3:1 — technically large enough to scrape
   past, but it is the single number a visitor came to the page to read, and it
   should not be the hardest thing on it to see. It takes the accent instead. */
.sa-style-bold .card-price,
.sa-style-bold .sa-detail-price,
.sa-style-bold .team-role{color:var(--sa-accent)}
.sa-style-bold .card-price-value{font-family:var(--sa-font-head);font-size:1.5rem;letter-spacing:.01em}

/* These two are labels, so they take the accent rather than plain ink. */
.sa-style-bold .reach-label,
.sa-style-bold .contact-label{color:var(--sa-accent)}

/* A navy pill on a near-black page is invisible; the red one is not. */
.sa-style-bold .page-numbers.current{background:var(--sa-primary);border-color:var(--sa-primary);color:#fff}
.sa-style-bold .page-numbers:hover{border-color:var(--sa-accent);color:var(--sa-accent)}

/* Notices keep a visible edge. */
.sa-style-bold .sa-alert{background:var(--sa-wash);color:var(--sa-ink);border-left-width:6px}
.sa-style-bold .sa-alert-notice{border-left-color:var(--sa-accent)}
.sa-style-bold .sa-alert-error{border-left-color:var(--sa-primary)}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
.sa-style-bold .alt{background:var(--sa-wash);border-block:2px solid var(--sa-line)}
.sa-style-bold .section-programs{border-block:2px solid var(--sa-line)}
.sa-style-bold .section-cta{background:var(--sa-primary);color:#fff;border-block:none}
.sa-style-bold .section-cta .section-text{color:rgba(255,255,255,.92)}
.sa-style-bold .page-banner{background:var(--sa-page);border-bottom:4px solid var(--sa-primary)}
.sa-style-bold .page-banner--quiz{background:var(--sa-wash)}

/* A red rule under a section heading, instead of a tinted panel. */
.sa-style-bold .section-title::after{
  content:"";display:block;width:4.5rem;height:6px;
  background:var(--sa-primary);margin-top:.6rem;
}
.sa-style-bold .center .section-title::after,
.sa-style-bold .section-programs .section-title::after,
.sa-style-bold .section-cta .section-title::after{margin-inline:auto}
.sa-style-bold .section-cta .section-title::after{background:#fff}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.sa-style-bold .hero-inner{max-width:58rem}
.sa-style-bold .hero-title{letter-spacing:-.005em}
.sa-style-bold .hero-text{text-transform:none;font-size:1.1875rem;max-width:38rem}
.sa-style-bold .hero.no-image{background:var(--sa-page)}
.sa-style-bold .hero-dot{border-color:#fff}
.sa-style-bold .hero-dot.is-active{background:var(--sa-accent);border-color:var(--sa-accent)}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.sa-style-bold input[type="text"],
.sa-style-bold input[type="email"],
.sa-style-bold input[type="tel"],
.sa-style-bold input[type="search"],
.sa-style-bold select,
.sa-style-bold textarea{
  background:var(--sa-page);
  color:var(--sa-ink);
  border:2px solid var(--sa-line);
}
.sa-style-bold input:focus,
.sa-style-bold select:focus,
.sa-style-bold textarea:focus{
  border-color:var(--sa-accent);
  outline:3px solid var(--sa-accent);
  outline-offset:1px;
}
.sa-style-bold ::placeholder{color:var(--sa-muted);opacity:1}
.sa-style-bold .contact-field > label,
.sa-style-bold .sa-send label{
  text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:700;
}

/* The deep-blue contact panel becomes a red one, which is the loudest thing
   on that page and the only thing on it anybody needs to find. */
.sa-style-bold .contact-form-wrap{background:var(--sa-primary);border:none}
.sa-style-bold .contact-form-wrap input,
.sa-style-bold .contact-form-wrap select,
.sa-style-bold .contact-form-wrap textarea{background:#fff;color:#111;border-color:transparent}
.sa-style-bold .contact-form-wrap input:focus,
.sa-style-bold .contact-form-wrap select:focus,
.sa-style-bold .contact-form-wrap textarea:focus{outline-color:#fff;border-color:#fff}
/* "Required" was white at 60% — readable on the Classic style's deep blue at
   4.73:1, but only 2.98:1 on this brighter red panel. It goes solid. */
.sa-style-bold .contact-form-wrap .req,
.sa-style-bold .sa-send--gate .req{color:#fff}
.sa-style-bold .contact-form-wrap .field-hint{color:rgba(255,255,255,.9)}
.sa-style-bold .field-hint{color:var(--sa-muted)}
.sa-style-bold .contact-form-wrap .contact-form-intro,
.sa-style-bold .sa-send--gate p{color:rgba(255,255,255,.95)}
.sa-style-bold .contact-form-wrap .btn-primary{background:#fff;border-color:#fff;color:#111}
.sa-style-bold .contact-form-wrap .btn-primary:hover,
.sa-style-bold .contact-form-wrap .btn-primary:focus-visible{background:var(--sa-accent);border-color:var(--sa-accent);color:var(--sa-accent-ink)}

/* ---------------------------------------------------------------------------
   The level test
   --------------------------------------------------------------------------- */
.sa-style-bold .sa-quiz-bar{background:var(--sa-wash);border:2px solid var(--sa-line);border-radius:0}
.sa-style-bold .sa-quiz-bar-fill{background:var(--sa-primary)}

/* The answer box is painted by the LABEL, not by the element around it, and
   that label carries background:#fff written by hand. Setting the colour on
   the wrapper alone gave the label light text on its own white background:
   1.09:1, which is invisible. The label is what has to be dressed. */
.sa-style-bold .sa-q-option{background:transparent;border:0;border-radius:0;color:var(--sa-ink)}
.sa-style-bold .sa-q-option label{
  background:var(--sa-wash);
  border:2px solid var(--sa-line);
  border-radius:0;
  color:var(--sa-ink);
}
.sa-style-bold .sa-q-option label:hover{border-color:var(--sa-accent)}
.sa-style-bold .sa-q-option input:checked + label{
  background:var(--sa-page);
  border-color:var(--sa-primary);
  color:var(--sa-ink);
}
.sa-style-bold .sa-q-option input:focus-visible + label{outline-color:var(--sa-accent)}
/* The radio itself is drawn by the browser in its own colours; this keeps it
   visible against the dark box. */
.sa-style-bold .sa-q-option input{accent-color:var(--sa-accent)}
.sa-style-bold .sa-q-num,
.sa-style-bold .sa-q-meta{color:var(--sa-accent);text-transform:uppercase;letter-spacing:.12em}
.sa-style-bold .sa-result-level{color:var(--sa-ink)}
.sa-style-bold .sa-table th{background:var(--sa-page);color:var(--sa-ink)}
.sa-style-bold .sa-table td,
.sa-style-bold .sa-table th{border-color:var(--sa-line)}
.sa-style-bold .sa-send--gate{background:var(--sa-primary)}
.sa-style-bold .sa-send--gate input,
.sa-style-bold .sa-send--gate textarea{background:#fff;color:#111}

/* ---------------------------------------------------------------------------
   Footer and the floating button
   --------------------------------------------------------------------------- */
.sa-style-bold .site-footer{border-top:4px solid var(--sa-primary)}
.sa-style-bold .footer-brand{text-transform:uppercase;letter-spacing:-.01em;font-size:1.4rem}
.sa-style-bold .footer-menu a:hover,
.sa-style-bold .footer-contact-list a:hover{color:var(--sa-accent)}
.sa-style-bold .social a{border:2px solid var(--sa-line);border-radius:0}
.sa-style-bold .social a:hover{border-color:var(--sa-accent);color:var(--sa-accent)}
.sa-style-bold .wa-float{border-radius:0;box-shadow:6px 6px 0 rgba(0,0,0,.5)}

/* ---------------------------------------------------------------------------
   Breadcrumbs, dialog, galleries
   --------------------------------------------------------------------------- */
.sa-style-bold .sa-crumbs li{color:var(--sa-muted);opacity:1}
.sa-style-bold .sa-crumbs a{color:var(--sa-ink);border-bottom-color:var(--sa-primary)}
.sa-style-bold .sa-crumbs a:hover,
.sa-style-bold .sa-crumbs a:focus-visible{color:var(--sa-accent);border-bottom-color:var(--sa-accent)}
.sa-style-bold .sa-dialog-backdrop{background:rgba(0,0,0,.85)}
.sa-style-bold .photo-grid-item{border:2px solid var(--sa-line)}
.sa-style-bold .team-photo{border-radius:0}
.sa-style-bold .team-initial{background:var(--sa-primary);color:#fff}

/* ---------------------------------------------------------------------------
   Print: the dark page would empty a cartridge, so it prints light
   --------------------------------------------------------------------------- */
@media print{
  .sa-style-bold body,
  .sa-style-bold .card,
  .sa-style-bold .sa-result{background:#fff;color:#000}
  .sa-style-bold h1,
  .sa-style-bold h2,
  .sa-style-bold h3{color:#000}
}

/* ---------------------------------------------------------------------------
   The weekly programme
   --------------------------------------------------------------------------- */
.sa-style-bold .section-week{background:var(--sa-wash);border-block:2px solid var(--sa-line)}
.sa-style-bold .week-tab{
  border-radius:0;border-width:2px;color:var(--sa-ink);
  font-family:var(--sa-font-head);text-transform:uppercase;letter-spacing:.08em;
}
.sa-style-bold .week-tab:hover{border-color:var(--sa-accent);color:var(--sa-accent)}
.sa-style-bold .week-tab.is-active{background:var(--sa-primary);border-color:var(--sa-primary);color:#fff}
.sa-style-bold .week-day-name{color:var(--sa-accent)}
.sa-style-bold .week-panel-title{border-bottom-color:var(--sa-primary)}
.sa-style-bold .week-card{background:var(--sa-page);border:2px solid var(--sa-line);border-radius:0}
.sa-style-bold .week-card-media{background:var(--sa-wash)}
.sa-style-bold .week-chip{
  background:var(--sa-page);border:1px solid var(--sa-line);color:var(--sa-accent);border-radius:0;
}
.sa-style-bold .week-chip--time{background:transparent;color:var(--sa-ink)}
.sa-style-bold .week-card-text{color:var(--sa-muted)}