/* ==========================================================================
   FALCON 2027 Winter School - shared presentation layer
   Added 2026-09-24. Presentation only: no page wording is changed here.

   Why it exists
   - The site mixed two palettes: the theme's purple (#8b3dff) on buttons,
     tables and icons, and a sky blue that only the home page defined.
   - Body text used the theme grey #64748b, which fell below 4.5:1 on the
     tinted backgrounds, and .text-muted dropped it to ~2.9:1 with opacity.
   - The sky blue #0ea5e9 is ~2.7:1 as text, so it is kept for decoration
     (glows, borders, the progress bar) and never used for words.

   Page <style> blocks are parsed after this file, so overrides are scoped
   with `body` to win on specificity; !important is used only where a page
   or the theme already uses it.
   ========================================================================== */

:root {
   --w-night:        #0b1a33;
   --w-night-2:      #14305a;
   --w-ink:          #0f1d33;
   --w-text:         #3d4b5f;   /* body copy - 8.9:1 on white */
   --w-muted:        #52627a;   /* secondary copy - 6.1:1 on white */
   --w-glacier:      #0369a1;   /* links, buttons, accents - 5.9:1 */
   --w-glacier-deep: #075985;
   --w-glacier-ink:  #0c4a6e;
   --w-ice:          #0ea5e9;   /* decorative only */
   --w-aurora:       #7dd3fc;   /* decorative only */
   --w-frost:        #e0f2fe;
   --w-frost-2:      #eff7fd;
   --w-snow:         #f6fafd;
   --w-line:         #d7e5f1;
   --w-shadow:       0 1px 2px rgba(11,26,51,.05), 0 10px 30px rgba(11,26,51,.07);
   --w-shadow-lift:  0 2px 6px rgba(11,26,51,.07), 0 22px 46px rgba(11,26,51,.12);
   --w-radius:       18px;
   --w-display:      'Sora', 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

   /* Re-point the theme's own tokens so every utility follows the palette */
   --bs-primary:               #0369a1;
   --bs-primary-rgb:           3,105,161;
   --bs-link-color:            #0369a1;
   --bs-link-color-rgb:        3,105,161;
   --bs-link-hover-color:      #075985;
   --bs-link-hover-color-rgb:  7,89,133;
   --bs-body-color:            #3d4b5f;
   --bs-body-color-rgb:        61,75,95;
   --bs-secondary-color:       #52627a;
   --bs-secondary-color-rgb:   82,98,122;
   --bs-heading-color:         #0f1d33;
   --bs-primary-bg-subtle:     #e0f2fe;
   --bs-primary-border-subtle: #bae6fd;
   --bs-primary-text-emphasis: #075985;
   --bs-info:                  #0e7490;
   --bs-info-rgb:              14,116,144;
   --bs-body-bg:               #f6fafd;
   --bs-body-bg-rgb:           246,250,253;
   --bs-border-color:          #d7e5f1;
}

/* ---------- Base ------------------------------------------------------- */

/* `overflow-x: hidden` on html AND body turns body into a scroll container,
   which silently breaks position:sticky. `clip` keeps the safety net
   without that side effect. */
html body { overflow-x: clip; }
html { overflow-x: clip; }

html body {
   background: var(--w-snow);
   color: var(--w-text);
   font-size: 1.02rem;
   line-height: 1.72;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
   font-family: var(--w-display);
   color: var(--w-ink);
   letter-spacing: -0.02em;
   line-height: 1.2;
   text-wrap: balance;
}
body main h1, body main .h1 { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.55rem); font-weight: 700; }
body main h2 { font-size: clamp(1.45rem, 1.12rem + 1.3vw, 2rem); font-weight: 700; }
body main h3 { font-size: clamp(1.18rem, 1.02rem + .6vw, 1.42rem); font-weight: 600; }
body main h4 { font-size: 1.15rem; font-weight: 600; }

body p, body li { color: var(--w-text); }
body strong, body b { color: var(--w-ink); font-weight: 650; }

body a { color: var(--w-glacier); text-underline-offset: 3px; text-decoration-thickness: 1px; }
body a:hover { color: var(--w-glacier-deep); }

body .text-primary  { color: var(--w-glacier) !important; }
body .text-muted,
body .text-secondary,
body .text-body-secondary { color: var(--w-muted) !important; opacity: 1 !important; }
body .text-info     { color: #0e7490 !important; }
body .text-danger,
body [style*="color: red"], body [style*="color:red"],
body [style*="color:#ff0000"], body [style*="color: #ff0000"] { color: #b4123a !important; }
body .text-dark     { color: var(--w-ink) !important; }

/* Long addresses, e-mails and URLs must wrap rather than widen the page */
body main a, body footer a { overflow-wrap: anywhere; }

img { max-width: 100%; }

/* ---------- Reading progress bar -------------------------------------- */

.w-progress {
   position: fixed;
   inset: 0 0 auto 0;
   height: 3px;
   z-index: 1080;
   pointer-events: none;
   background: transparent;
}
.w-progress > span {
   display: block;
   height: 100%;
   transform-origin: 0 50%;
   transform: scaleX(0);
   background: linear-gradient(90deg, var(--w-aurora) 0%, var(--w-ice) 45%, var(--w-glacier) 100%);
   box-shadow: 0 0 12px rgba(14,165,233,.55);
   will-change: transform;
}

/* ---------- Navbar ----------------------------------------------------- */

/* The frosted glass is painted on a pseudo-element on purpose. Putting
   backdrop-filter (or a transform) on the navbar itself would make it the
   containing block for the fixed-position phone menu that lives inside it,
   trapping that menu inside the 64px bar. */
body nav.navbar {
   background: transparent !important;
   box-shadow: none !important;
   border-bottom: 1px solid rgba(186,214,238,.75);
   padding-top: .55rem;
   padding-bottom: .55rem;
}
body nav.navbar::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: rgba(255,255,255,.82);
   -webkit-backdrop-filter: blur(14px) saturate(160%);
   backdrop-filter: blur(14px) saturate(160%);
   box-shadow: 0 8px 28px rgba(11,26,51,.07);
}

/* Logo: the file is 300x129 but was forced to 100x40, which distorted it.
   Size by height only so it keeps its proportions. */
body nav.navbar .navbar-brand img,
body .offcanvas-header img {
   height: 44px !important;
   width: auto !important;
}

/* No `display` here: Bootstrap hides the toggler at >=992px with a weaker
   selector, and setting display at this specificity would override it and
   show the menu button on desktop. */
body nav.navbar .navbar-toggler {
   place-items: center;
   width: 44px;
   height: 44px;
   padding: 0;
   border: 1px solid var(--w-line);
   border-radius: 12px;
   background: var(--w-frost-2);
   color: var(--w-ink);
   font-size: 1.5rem;
   box-shadow: none;
   transition: background-color .2s ease, border-color .2s ease;
}
body nav.navbar .navbar-toggler:hover { background: var(--w-frost); border-color: #bcd8ee; }
body nav.navbar .navbar-toggler:focus-visible { outline: 3px solid var(--w-ice); outline-offset: 2px; box-shadow: none; }

body nav.navbar .navbar-nav .nav-link {
   font-family: 'Public Sans', system-ui, sans-serif;
   font-weight: 500;
   color: #2b384b !important;
   border-radius: 999px;
   transition: color .18s ease, background-color .18s ease;
}
body nav.navbar .navbar-nav .nav-link:hover,
body nav.navbar .navbar-nav .nav-link:focus-visible {
   color: var(--w-glacier-deep) !important;
   background: var(--w-frost);
}
body nav.navbar .navbar-nav .nav-link.is-current {
   color: var(--w-glacier-ink) !important;
   background: var(--w-frost);
   font-weight: 650;
}

@media (min-width: 992px) {
   body nav.navbar .navbar-nav { gap: .2rem; }
   body nav.navbar .navbar-nav .nav-link {
      font-size: .94rem;
      padding: .5rem .9rem !important;
      white-space: nowrap;
   }
   body nav.navbar .navbar-nav .nav-link.is-current { box-shadow: inset 0 0 0 1px #bfe0f5; }
}

/* Between 992px and 1200px the five labels (one of them long) do not fit at
   full padding; tighten rather than let them wrap onto two lines. */
@media (min-width: 992px) and (max-width: 1199.98px) {
   body nav.navbar .navbar-nav { gap: 0; }
   body nav.navbar .navbar-nav .nav-link { font-size: .86rem; padding: .45rem .6rem !important; }
   body nav.navbar .navbar-brand img { height: 38px !important; }
}

/* Phone / tablet menu */
@media (max-width: 991.98px) {
   body nav.navbar .navbar-toggler { display: inline-grid; }
   /* Opens from the right: the menu button is top-right, so the panel
      slides out from the same side and its close button lands where the
      menu button was. */
   body .offcanvas.offcanvas-end,
   body .offcanvas.offcanvas-start {
      width: min(20rem, 86vw) !important;
      border-left: 1px solid var(--w-line);
      background: linear-gradient(180deg, #f1f8fe 0, #ffffff 9rem);
      box-shadow: -18px 0 50px rgba(11,26,51,.18);
   }
   body .offcanvas .offcanvas-header {
      padding: .9rem 1rem;
      border-bottom: 1px solid var(--w-line);
   }
   body .offcanvas .offcanvas-header .btn-close {
      width: 40px; height: 40px;
      padding: 0;
      margin: 0;
      border-radius: 10px;
      background-color: var(--w-frost-2);
      background-size: .8rem;
      opacity: 1;
   }
   body .offcanvas .offcanvas-body { padding: .9rem .75rem 1.5rem !important; }
   body .offcanvas .navbar-nav { gap: .25rem; width: 100%; align-items: stretch !important; }
   /* The theme zeroes side padding on phone menu links with
      `.navbar .navbar-nav .nav-item .nav-link {padding: .75rem 0 !important}`,
      which out-ranked the rule here and put the text flush against the
      current-page marker. This selector is more specific on purpose. */
   body nav.navbar .offcanvas .navbar-nav .nav-item .nav-link {
      position: relative;
      font-size: 1.02rem;
      padding: .8rem 1rem .8rem 1.15rem !important;
      border-radius: 12px;
      line-height: 1.35;
   }
   /* Current-page marker: a short rounded bar set inside the highlight,
      clear of the text, rather than a flush edge line. Every link keeps
      the same left padding so the labels stay aligned. */
   body nav.navbar .offcanvas .navbar-nav .nav-item .nav-link.is-current { box-shadow: none; }
   body nav.navbar .offcanvas .navbar-nav .nav-item .nav-link.is-current::before {
      content: '';
      position: absolute;
      left: .42rem;
      top: 26%;
      bottom: 26%;
      width: 3px;
      border-radius: 3px;
      background: var(--w-ice);
   }
}

/* While the phone menu is open, lift the bar above Bootstrap's backdrop
   (z-index 1040). The menu lives inside the bar's stacking context, so
   without this the backdrop would sit on top of the menu itself. */
body.w-menu-open nav.navbar { z-index: 1050; }

/* ---------- Buttons ---------------------------------------------------- */

body .btn { font-weight: 600; letter-spacing: .005em; border-radius: 12px; }

body .btn-primary {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--w-glacier);
   --bs-btn-border-color: var(--w-glacier);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--w-glacier-deep);
   --bs-btn-hover-border-color: var(--w-glacier-deep);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--w-glacier-ink);
   --bs-btn-active-border-color: var(--w-glacier-ink);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: var(--w-glacier);
   --bs-btn-disabled-border-color: var(--w-glacier);
   --bs-btn-focus-shadow-rgb: 14,165,233;
   box-shadow: 0 8px 22px rgba(3,105,161,.22);
   transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(3,105,161,.28); }

body .btn-outline-primary {
   --bs-btn-color: var(--w-glacier);
   --bs-btn-border-color: var(--w-glacier);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--w-glacier);
   --bs-btn-hover-border-color: var(--w-glacier);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--w-glacier-deep);
   --bs-btn-active-border-color: var(--w-glacier-deep);
}

/* Registration and hero buttons were purple gradients with white text
   (white on #a084e8 is ~3:1). Same shape, glacier palette. */
body .btn-register,
body .hero-text-box .btn-primary {
   background: linear-gradient(135deg, var(--w-glacier) 0%, var(--w-glacier-deep) 100%) !important;
   color: #fff !important;
   border: 0 !important;
   box-shadow: 0 10px 26px rgba(3,105,161,.28);
}
body .btn-register:hover,
body .hero-text-box .btn-primary:hover {
   background: linear-gradient(135deg, var(--w-glacier-deep) 0%, var(--w-glacier-ink) 100%) !important;
   color: #fff !important;
}

/* ---------- Cards & surfaces ------------------------------------------ */

body .card,
body .info-card,
body .section-card {
   border: 1px solid var(--w-line) !important;
   border-radius: var(--w-radius) !important;
   box-shadow: var(--w-shadow) !important;
   background: #fff;
}
body .card:hover,
body .info-card:hover,
body .section-card:hover { box-shadow: var(--w-shadow-lift) !important; }

body .bg-light { background-color: var(--w-frost-2) !important; }
body .bg-white { background-color: #fff !important; }
/* .bg-primary is deliberately NOT forced solid here: Bootstrap builds it from
   --bs-primary-rgb and --bs-bg-opacity, so re-pointing the variable above is
   enough. A solid !important colour broke bg-opacity-10 tints into full
   glacier blue behind dark text (dates.php measured 1.5:1). */

/* Icons inside cards and lists were theme purple */
body svg.text-primary, body i.text-primary, body .bi.text-primary { color: var(--w-glacier) !important; }

/* Squashed photos: avatars and the residence banner had fixed boxes that
   did not match the image's own shape. */
body img.avatar,
body img.rounded-circle { object-fit: cover; }
body img[src*="RU_Monte_da_Condesa"] { object-fit: cover; }

/* ---------- Tables ----------------------------------------------------- */

body main .table {
   --bs-table-striped-bg: rgba(14,165,233,.055);
   --bs-table-hover-bg: rgba(14,165,233,.09);
   --bs-table-color: var(--w-text);
   border-color: var(--w-line);
}
body main .table-responsive { border-radius: 14px; }

/* Programme and committees tables had purple headings with black text */
body thead.purple-header,
body .custom-table thead,
body .table > thead.table-dark,
body .table > thead.table-primary {
   background: linear-gradient(135deg, var(--w-night) 0%, var(--w-glacier) 100%) !important;
}
body thead.purple-header th,
body .custom-table thead th,
body .table > thead.table-dark th,
body .table > thead.table-primary th {
   background: transparent !important;
   color: #fff !important;
   border-color: rgba(255,255,255,.16) !important;
   font-family: var(--w-display);
   font-weight: 600;
   letter-spacing: .01em;
}

/* Theme tinted the dates/applications tables lilac; frost instead */
body main .table-primary,
body main .table-light,
body main td.bg-light,
body main th.bg-light { --bs-table-bg: var(--w-frost-2) !important; background-color: var(--w-frost-2) !important; color: var(--w-text) !important; }

/* ---------- Home page hero -------------------------------------------- */

body .summer-bg-section {
   background:
      linear-gradient(180deg, rgba(8,22,46,.50) 0%, rgba(8,22,46,.62) 60%, rgba(8,22,46,.72) 100%),
      url('../images/alicante2.jpg') center / cover no-repeat !important;
}
body .summer-bg-section .w-snow {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
}
body .summer-bg-section .container { position: relative; z-index: 2; }

body .hero-text-box {
   background: rgba(255,255,255,.9) !important;
   border: 1px solid rgba(255,255,255,.8) !important;
   box-shadow: 0 30px 70px rgba(3,12,30,.38) !important;
}
/* An empty <br> at the top of the card pushed its content off-centre */
body .hero-text-box > br { display: none; }
body .hero-text-box h1, body .hero-text-box h2 {
   font-family: var(--w-display);
   font-weight: 700;
   letter-spacing: -0.025em;
   line-height: 1.16;
}
body .hero-text-box .lead { color: var(--w-text) !important; }

@media (max-width: 767.98px) {
   body .summer-bg-section { padding: 92px 0 56px !important; min-height: 0 !important; }
   body .summer-bg-section .container { padding-top: 0 !important; padding-bottom: 0 !important; }
   body .hero-text-box { padding: 26px 20px !important; border-radius: 20px !important; }
   body .hero-text-box h1, body .hero-text-box h2 { font-size: 1.5rem !important; }
   body .hero-text-box .lead { font-size: 1rem !important; line-height: 1.65 !important; }
   body .hero-text-box .btn { width: 100%; }
}
@media (max-width: 380px) {
   body .hero-text-box h1, body .hero-text-box h2 { font-size: 1.36rem !important; }
}

/* Home page photo panels: inline width:130% / height:110% pushed them past
   the edge of the page (clipped at desktop, 81px of overflow on phones). */
body .card-lift[style*="130%"] {
   width: 100% !important;
   height: auto !important;
   aspect-ratio: 4 / 3;
   background-position: center !important;
}

/* The three key-date cards */
body .pb-xl-8 .py-lg-5 {
   border: 1px solid var(--w-line) !important;
   box-shadow: var(--w-shadow) !important;
}
body .pb-xl-8 .py-lg-5 h4 { font-family: var(--w-display); }
body .pb-xl-8 .py-lg-5 p { color: var(--w-text) !important; font-weight: 500; }

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

body footer {
   background:
      radial-gradient(ellipse 60% 70% at 85% 0%, rgba(14,165,233,.16), transparent 70%),
      radial-gradient(ellipse 45% 60% at 10% 100%, rgba(125,211,252,.10), transparent 70%),
      var(--w-night);
   color: #c7d5e8;
   margin-top: 3rem;
}
/* The theme's lilac gradient under the curve does not belong on a night sky */
body footer img[src*="gradient.svg"] { display: none; }
/* Logo is a dark-on-light mark: give it a snow-white chip on the night footer */
body footer .text-inverse img {
   height: 60px;
   width: auto;
   background: #fff;
   padding: .5rem .8rem;
   border-radius: 14px;
   box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
body footer .small,
body footer .small a,
body footer .small span { color: #d9e7f7 !important; }
body footer .small a:hover { color: #fff !important; text-decoration: underline !important; }

/* The light/dark switch cannot work: the script that drives it
   (color-modes.js) is not loaded. The social buttons link to "#!".
   Hidden rather than deleted, so they can be restored in one line. */
body footer .dropdown:has([data-bs-theme-value]) { display: none !important; }
body footer a[href="#!"] { display: none !important; }

/* Theme scroll-to-top control, retinted */
body .btn-scroll-top { background: #fff; box-shadow: var(--w-shadow-lift); }
body .btn-scroll-top svg path { stroke: var(--w-ice); }
body .btn-scroll-top::after { color: var(--w-glacier) !important; }

/* ---------- Focus, motion, print -------------------------------------- */

body a:focus-visible,
body button:focus-visible,
body .btn:focus-visible {
   outline: 3px solid var(--w-ice);
   outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
   body *, body *::before, body *::after {
      transition-duration: .001ms !important;
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
   }
   body .w-snow { display: none !important; }
}

@media print {
   .w-progress, body .w-snow, body nav.navbar, body .btn-scroll-top { display: none !important; }
   html body { background: #fff; }
}

/* The home page keeps a speakers grid commented out for later. Its wrapping
   .row was left outside any .container, so its -12px gutters poked past the
   screen edge although it holds nothing visible. Hidden only while empty -
   it reappears by itself if the speakers are un-commented. */
body main > .row.g-4:not(:has(*)) { display: none; }

/* ---------- One consistent gap under the fixed navbar ------------------
   Pages had pushed their titles down with invisible spacers (four <br>s, an
   <hr> with an 8.2em margin, etc.), so the gap under the menu ranged from
   11px to 161px. The spacers are removed; this gives every inner page the
   same room instead. Excluded: pages that open with a full-bleed banner. */
body main:not(.accommodation-page):not(:has(> .summer-bg-section)) { padding-top: 3rem; }
@media (max-width: 767.98px) {
   body main:not(.accommodation-page):not(:has(> .summer-bg-section)) { padding-top: 1.5rem; }
}
/* A few pages open with a margin-based block (.container.my-5, 48px)
   rather than the 80px padded section the others use; match them. */
body main > .pattern-square + .container.my-5 { margin-top: 6rem !important; }
@media (max-width: 767.98px) {
   body main > .pattern-square + .container.my-5 { margin-top: 4.5rem !important; }
}

/* Justified text opens wide rivers between words on a narrow screen
   ("As   cyber   threats"). Keep it justified on desktop only. */
@media (max-width: 575.98px) {
   body .text-justify,
   body [style*="text-align: justify"],
   body [style*="text-align:justify"] { text-align: left !important; }
}

/* ---------- Home: key facts strip + hosted by -------------------------
   The three fact cards sat flat against the hero's bottom edge, with the
   old column dividers (border-end-md) still drawn between them and uneven
   gaps. They now float over the hero edge as one strip. The value (place,
   date) leads; the label sits above it as a small caption. */
body .w-facts {
   position: relative;
   z-index: 3;
   margin-top: -76px;
   padding-bottom: 2.5rem !important;
}
body .w-facts .row {
   --bs-gutter-x: 1.25rem;
   --bs-gutter-y: 1.25rem;
   max-width: 1080px;
   margin-left: auto !important;
   margin-right: auto !important;
}
body .w-facts .row > [class*="col-md-4"] { border: 0 !important; display: flex; }
body .w-facts .row > [class*="col-md-4"] > div {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 1.9rem 1.5rem 1.8rem !important;
   border-radius: 20px !important;
   background: rgba(255,255,255,.97) !important;
   border: 1px solid var(--w-line) !important;
   box-shadow: 0 1px 2px rgba(11,26,51,.05), 0 20px 46px rgba(11,26,51,.11) !important;
   transform: none !important;           /* static facts - no hover lift */
}
body .w-facts .row > [class*="col-md-4"] > div > .mb-4 {
   display: grid;
   place-items: center;
   width: 58px;
   height: 58px;
   margin-bottom: 1.1rem !important;
   border-radius: 16px;
   background: linear-gradient(145deg, var(--w-frost) 0%, #f5fbff 100%);
   box-shadow: inset 0 0 0 1px #cde6f7;
}
body .w-facts .row > [class*="col-md-4"] > div > .mb-4 svg { width: 26px; height: 26px; }
body .w-facts h4 {
   order: 0;
   margin: 0 0 .4rem !important;
   font-family: 'Public Sans', system-ui, sans-serif !important;
   font-size: .78rem !important;
   font-weight: 650 !important;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--w-muted) !important;
}
body .w-facts .row > [class*="col-md-4"] > div > p.mb-0 {
   font-family: var(--w-display);
   font-size: 1.22rem;
   font-weight: 600 !important;
   letter-spacing: -.01em;
   color: var(--w-ink) !important;
   line-height: 1.3;
}

/* Hosted by: same snow ground as the strip above instead of its own white
   band, with the caption drawn between two hairlines. */
body .w-hosts {
   background: transparent !important;
   padding: .5rem 0 3.25rem !important;
}
body .w-hosts p.text-uppercase {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   max-width: 420px;
   margin: 0 auto 1.4rem !important;
   font-size: .78rem;
   letter-spacing: .16em !important;
   color: var(--w-muted) !important;
}
body .w-hosts p.text-uppercase::before,
body .w-hosts p.text-uppercase::after {
   content: '';
   flex: 1 1 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, #c5d9ea);
}
body .w-hosts p.text-uppercase::after { background: linear-gradient(90deg, #c5d9ea, transparent); }
body .w-hosts img {
   height: 112px !important;
   padding: .9rem 1.4rem;
   background: #fff;
   border: 1px solid var(--w-line);
   border-radius: 18px;
   box-shadow: var(--w-shadow);
}

@media (max-width: 767.98px) {
   body .summer-bg-section { padding-bottom: 84px !important; }
   body .w-facts { margin-top: -48px; padding-bottom: 1.75rem !important; }
   body .w-facts .row { --bs-gutter-y: .9rem; }
   /* On phones each card becomes a compact row: icon on the left, label
      stacked over value on the right. */
   body .w-facts .row > [class*="col-md-4"] > div {
      display: grid;
      grid-template-columns: 50px 1fr;
      grid-template-rows: auto auto;
      column-gap: 1rem;
      align-items: center;
      text-align: left;
      padding: 1.1rem 1.2rem !important;
   }
   body .w-facts .row > [class*="col-md-4"] > div > .mb-4 {
      grid-row: 1 / span 2;
      margin: 0 !important;
      width: 50px; height: 50px;
   }
   /* tighter tracking so "Acceptance Notification" stays on one line and
      all three cards keep the same height */
   body .w-facts .row > [class*="col-md-4"] > div > h4 {
      align-self: end;
      margin: 0 0 .15rem !important;
      font-size: .72rem !important;
      letter-spacing: .06em;
      white-space: nowrap;
   }
   body .w-facts .row > [class*="col-md-4"] > div > p { align-self: start; margin: 0; font-size: 1.08rem; }
   body .w-hosts img { height: 96px !important; }
}

/* Facts strip - in-between sizes, found by measuring each width:
   - tablets: the strip came within 8px of the welcome card and the long
     labels wrapped, so less overlap and tighter labels there;
   - phones: stacked cards share one height (grid rows of equal size);
   - under 360px "Acceptance Notification" cannot fit on one line, and
     forcing it widened that card alone, so it may wrap there. */
@media (min-width: 768px) and (max-width: 991.98px) {
   body .w-facts { margin-top: -36px; }
   body .w-facts h4 { font-size: .7rem !important; letter-spacing: .06em; }
   body .w-facts .row > [class*="col-md-4"] > div { padding: 1.5rem 1rem !important; }
   body .w-facts .row > [class*="col-md-4"] > div > p.mb-0 { font-size: 1.08rem; }
}
@media (max-width: 767.98px) {
   body .w-facts .row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: 1fr;
      row-gap: .9rem;
      --bs-gutter-y: 0;
   }
}
@media (max-width: 360px) {
   body .w-facts .row > [class*="col-md-4"] > div > h4 { white-space: normal; }
}

/* Keep link decoration thickness identical after dropping the duplicate Bootstrap CDN stylesheet */
.btn, .nav-link, .navbar-brand { text-decoration-thickness: auto; }

/* 26 Oct 2026: Gold Sponsor strip under "Hosted By". The sponsor card is a full designed
   image, so it gets no padding box and is drawn larger than the host logo. */
body .w-hosts.w-sponsors { padding-top: 0 !important; }
body .w-hosts.w-sponsors img {
   height: 190px !important;
   width: auto;
   padding: 0;
   border-radius: 18px;
}
@media (max-width: 767.98px) {
   body .w-hosts.w-sponsors img { height: 150px !important; }
}