/* ═══════════════════════════════════════════════════════════════
   Shared site chrome: the corporate footer used on every page.
   For pages that load padel/shared.css (tokens come from there);
   company pages (/, /about, …) get the same rules from /site.css —
   keep the two footer blocks in sync.
   Load AFTER shared.css so these rules win where selectors overlap.
   ═══════════════════════════════════════════════════════════════ */

/* ── Logo lockup (footer brand) — scoped so the hero logo-mark
     sizes in shared.css are unaffected ── */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-lockup .logo-mark {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.logo-lockup .logo-circle,
.logo-lockup .logo-circle-inner {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.logo-lockup .logo-circle {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2.8px solid var(--brand);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%);
}

.logo-lockup .logo-circle-inner {
  top: 19.4%;
  left: 19.4%;
  width: 61.1%;
  height: 61.1%;
  border: 2.8px solid var(--brand-light);
  clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
}

.logo-lockup .logo-text {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--dark);
}

/* ── Footer ── */
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 96px;
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--footer-a) 0%, var(--footer-b) 55%);
  padding: 60px 32px 0;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  align-items: start;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand .logo-lockup .logo-text { color: rgba(255, 255, 255, 0.9); }
.footer-brand .logo-lockup .logo-circle { border-color: rgba(255, 255, 255, 0.8); }
.footer-brand .logo-lockup .logo-circle-inner { border-color: rgba(255, 255, 255, 0.4); }

.footer-tagline {
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  max-width: 230px;
}

.footer-social { display: flex; gap: 16px; margin-top: 20px; }

.footer-social a {
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  transition: color 0.2s;
}

.footer-social a:hover { color: #fff; }

.footer-col h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 18px;
}

.footer-col nav { display: flex; flex-direction: column; gap: 12px; }

.footer-col a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover { color: rgba(255, 255, 255, 0.95); }

.footer-col .soon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

/* Touch pointers get a real tap area on the footer links, which are only
   18px tall by their type size. The row gap shrinks to keep the visual
   rhythm close to the mouse layout, and the social icons pull left by
   their own padding so the column stays optically aligned. */
@media (pointer: coarse) {
  .footer-col nav { gap: 0; }
  .footer-col a,
  .footer-col .soon { padding: 13px 0; }
  .footer-social { gap: 0; margin-left: -12px; }
  .footer-social a { padding: 12px; }
}

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom span { line-height: 1.8; }


@media (max-width: 980px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-footer { padding: 48px 24px 0; margin-top: 72px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ── Header / top menu (shared) — mirrors /site.css; keep in sync ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%; /* shared.css centers body children as flex items */
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(227, 226, 221, 0.6);
}

.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--grey);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 50px;
  transition: color 0.2s, background 0.2s;
}

.nav-links a:hover { color: var(--dark); background: var(--grey-100); }

.nav-links a.active {
  color: var(--brand);
  background: var(--brand-pale);
  font-weight: 600;
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-decoration: none;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* padel/shared.css sizes the arrow at 20px for the big in-page CTAs
   (`.btn-primary .arrow`), which on the header's small button made it 8px
   taller than on pages loading site.css, and the whole header with it. Here
   the arrow tracks its own button's size instead. This file is loaded last
   on every padel-family page, which is what lets the rule win -- keep it
   last if you reorder the <link> tags. Also applies to the .mobile-nav CTA
   inside the header, which is intended: it matches the company pages, where
   site.css never sizes .arrow at all. */
.site-header .btn .arrow { font-size: inherit; }

.btn.btn-primary {
  padding: 15px 36px;
  font-size: 16px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 4px 24px rgba(79, 70, 229, 0.25);
}

.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.35);
  background: color-mix(in srgb, var(--brand) 85%, #000);
}

.btn.btn-sm { padding: 10px 22px; font-size: 14px; }

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  color: var(--dark);
  align-items: center;
  justify-content: center;
}

.nav-burger:hover { background: var(--grey-100); }

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 20px 20px;
  border-top: 1px solid rgba(227, 226, 221, 0.6);
}

.mobile-nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  padding: 13px 8px;
  border-bottom: 1px solid var(--grey-100);
}

.mobile-nav a.active { color: var(--brand); font-weight: 600; }
.mobile-nav .btn { margin-top: 16px; border-bottom: none; }

.site-header.nav-open .mobile-nav { display: flex; }

@media (max-width: 880px) {
  .header-inner { padding: 13px 20px; }
  .site-header .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ══════════════ Resilience: keyboard, no-JS, browser-drawn surfaces ══════════════ */

/* Off-canvas until focused, then a real target above the sticky header. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100%;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 14px 14px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease-out;
}
.skip-link:focus { top: 0; }
#main:focus { outline: none; }

/* The browser default ring is invisible on the indigo button and on the dark
   footer, so the ring is drawn from the palette instead. :where() keeps the
   specificity at zero so component rules can still override it. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(.site-footer) :where(a, button):focus-visible { outline-color: #fff; }
:where(.btn):focus-visible { outline-color: var(--dark); }

::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--dark); }
.site-footer ::selection { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* A long unbroken string (a URL, a compound word in a longer language) wraps
   instead of pushing the layout wider than the viewport. */
h1, h2, h3, h4, p, li, a, .btn { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  /* Collapse the entrance keyframes to their end state rather than killing all
     motion: content arrives without travelling, while hover, focus and menu
     transitions keep the feedback they carry. */
  @keyframes fadeUp { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
  @keyframes slotPop { from { transform: none; } to { transform: none; } }
}

/* padel/shared.css lays the body out as a centred flex column, so the main
   landmark introduced for the skip link became the flex item and collapsed
   to its content width, taking the full-bleed hero gradient with it. It
   inherits the body's layout role rather than interrupting it. */
#main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}