/*
Theme Name: ConnectBarcelona
Theme URI: https://connect-barcelona.com/
Author: Kazarnovskis Marketing Agency
Description: Purpose-built theme for ConnectBarcelona. Ships a reset, the design tokens, a header
  and a footer — and deliberately nothing else. Every page section owns its own styling, so the
  theme never competes with it. This replaces Astra plus the Elementor kit, whose global rules
  (`.elementor-kit-15 h2`, Astra's zero-specificity `:where()` selectors) silently outranked the
  page CSS and restyled headings, buttons and widths across the site.
Version: 1.2.5
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
Text Domain: connectbarcelona
*/

/* ==========================================================================
   Design tokens — the single source. Sections read these, never hard-code.
   ========================================================================== */
:root {
  --cb-blue: #1747A6;
  --cb-blue-d: #0F3580;
  --cb-tint: #EDF2FB;
  --cb-ink: #141E38;
  --cb-body: #3A4560;
  --cb-muted: #525F7A;
  --cb-line: #E2E7F0;
  --cb-bg: #FFFFFF;
  --cb-alt: #F5F7FB;
  --cb-amber: #D98E1F;
  --cb-green: #1E7F49;
  --cb-r-card: 16px;
  --cb-r-btn: 10px;
  --cb-shadow: 0 1px 2px rgba(20, 30, 56, .06);
  --cb-shadow-hover: 0 12px 32px rgba(20, 30, 56, .12);
  --cb-wrap: 1160px;
  --cb-gutter: 24px;
  --cb-head-h: 83px;
  --cb-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cb-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
}

/* ==========================================================================
   Reset. Kept small on purpose: it normalises, it does not express taste.
   Nothing here styles a bare h1-h6 beyond inheriting the family, because a
   theme that styles headings globally is exactly what broke the old site.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cb-bg);
  color: var(--cb-body);
  font-family: var(--cb-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--cb-display);
  color: var(--cb-ink);
  line-height: 1.15;
}

p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cb-blue); }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(23, 71, 166, .35);
  outline-offset: 2px;
}

.cb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cb-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.cb-skip:focus { left: 0; }

/* The content well. Sections are self-contained and set their own widths, so main
   imposes nothing — no max-width, no padding. That absence is the point: Astra's
   `.ast-page-builder-template … > *{max-width:none}` at (0,4,0) is what made the
   provider page run 1337px wide where the rest of the site ran 1160px. */
.cb-main { display: block; }

/* ==========================================================================
   Site header
   ========================================================================== */
/* Sticky, and honest about it only once there is something to sit on top of.
   At the top of the page it is plain white with no border and no shadow, so it reads as part of
   the page rather than as a bar. Past a few pixels of scroll it becomes translucent with a blur,
   gains a hairline and a soft shadow, and text passing underneath is visibly behind glass.
   The height never changes. A sticky element stays in flow, so shrinking it while pinned would
   pull every section below it upward mid-scroll — a jump the visitor reads as a glitch. */
.cb-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cb-bg);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cb-head.cb-head--pinned {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: rgba(20, 30, 56, .08);
  box-shadow: 0 6px 24px rgba(20, 30, 56, .06);
}
/* Without backdrop-filter the translucency would just make the nav hard to read against whatever
   scrolls under it, so those browsers get an opaque bar instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cb-head.cb-head--pinned { background: #FFFFFF; }
}
.cb-head__wrap {
  max-width: var(--cb-wrap);
  margin: 0 auto;
  padding: 18px var(--cb-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--cb-head-h);
}
.cb-head__logo { display: inline-flex; align-items: center; flex: none; }
.cb-head__logo img { width: 217px; height: auto; }
.cb-head__logo--text {
  font-family: var(--cb-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--cb-ink);
  text-decoration: none;
}

.cb-head__right { display: flex; align-items: center; gap: 34px; }

.cb-head__nav ul { list-style: none; display: flex; align-items: center; gap: 34px; }
.cb-head__nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--cb-ink);
  text-decoration: none;
  transition: color .18s ease;
}
.cb-head__nav a:hover { color: var(--cb-blue); }
.cb-head__nav .current-menu-item > a,
.cb-head__nav .current_page_item > a,
.cb-head__nav .current-menu-ancestor > a { color: var(--cb-blue); }

/* line-height:1 is what makes this 47px tall rather than 56. The body's 1.6 leading is right for
   paragraphs and wrong inside a button, and those 9px pushed the whole header from 83px to 92px
   — the measurement the old Elementor header was built to. */
.cb-head__cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cb-blue); color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none;
  padding: 15px 30px; border-radius: 50px; border: 0; cursor: pointer;
  transition: background .18s ease;
  white-space: nowrap;
}
.cb-head__cta:hover, .cb-head__cta:focus, .cb-head__cta:active {
  background: var(--cb-blue-d); color: #fff;
}

.cb-head__burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--cb-line); border-radius: var(--cb-r-btn);
  color: var(--cb-ink); cursor: pointer;
}
.cb-head__burger svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .cb-head__burger { display: inline-flex; }
  .cb-head__right {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cb-bg); border-bottom: 1px solid var(--cb-line);
    padding: 8px var(--cb-gutter) 20px;
    box-shadow: 0 18px 40px rgba(20, 30, 56, .10);
  }
  .cb-head__right[hidden] { display: none; }
  .cb-head__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .cb-head__nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--cb-line); }
  .cb-head__cta { margin-top: 16px; }
}

/* ==========================================================================
   Fallback typography for plain editor pages (Legal Notice, Privacy Policy).
   Scoped to .cb-prose so it can never reach a landing section.
   ========================================================================== */
.cb-prose { max-width: 760px; margin: 0 auto; padding: 72px var(--cb-gutter) 96px; }
.cb-prose h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.cb-prose h2 { font-size: 24px; font-weight: 700; margin-top: 40px; }
.cb-prose h3 { font-size: 19px; font-weight: 700; margin-top: 28px; }
.cb-prose p, .cb-prose li { font-size: 17px; line-height: 1.65; color: var(--cb-body); }
.cb-prose p { margin-top: 16px; }
.cb-prose ul, .cb-prose ol { margin: 16px 0 0; padding-left: 22px; }
.cb-prose li { margin-top: 8px; }
.cb-prose ul { list-style: disc; }
.cb-prose ol { list-style: decimal; }
.cb-prose a { color: var(--cb-blue); }

/* ==========================================================================
   404
   ========================================================================== */
.cb-404 { max-width: 720px; margin: 0 auto; padding: 120px var(--cb-gutter); text-align: center; }
.cb-404 h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 800; letter-spacing: -.02em; }
.cb-404 p { margin-top: 16px; font-size: 18px; }
.cb-404 a {
  display: inline-flex; margin-top: 28px; padding: 15px 30px; border-radius: 50px;
  background: var(--cb-blue); color: #fff; font-weight: 600; text-decoration: none;
}
.cb-404 a:hover { background: var(--cb-blue-d); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- Provider dashboard (/account/) ------------------------------------ */
.cb-acct { background: #fff; padding: 104px 24px; min-height: 60vh; }
.cb-acct__wrap { max-width: 880px; margin: 0 auto; }
.cb-acct__h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 40px); color: #14213D; margin: 0 0 8px; }
.cb-acct__h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 24px; color: #14213D; margin: 40px 0 16px; }
.cb-acct__card { background: #fff; border-radius: 16px; box-shadow: 0 24px 56px rgba(20, 30, 56, .10); padding: 48px; max-width: 480px; margin: 0 auto; }
.cb-acct__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.cb-acct__aux { font-size: 15px; }
.cb-acct__aux a { color: #1747A6; }
.cb-acct__row { margin: 0 0 18px; }
.cb-acct__label { display: block; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #5A6478; margin-bottom: 6px; }
.cb-acct__control { width: 100%; font: 400 16px/1.4 "Hanken Grotesk", sans-serif; color: #14213D; border: 1px solid #B9C4DE; border-radius: 8px; padding: 12px 14px; background: #fff; }
.cb-acct__control:focus { outline: 2px solid #1747A6; outline-offset: 1px; }
.cb-acct__check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.cb-acct__btn { display: inline-block; font: 700 16px/1 "Hanken Grotesk", sans-serif; color: #fff; background: #1747A6; border: 0; border-radius: 8px; padding: 14px 28px; cursor: pointer; }
.cb-acct__btn:hover { background: #103478; }
.cb-acct__btn--small { padding: 11px 20px; font-size: 15px; }
.cb-acct__flash { border-radius: 8px; padding: 12px 16px; font-size: 15px; margin: 0 0 20px; }
.cb-acct__flash--ok { background: #EAF3EC; color: #1E5631; }
.cb-acct__flash--err { background: #F9ECEA; color: #8C2F26; }
.cb-acct__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.cb-acct__stat { background: #fff; border-radius: 16px; box-shadow: 0 24px 56px rgba(20, 30, 56, .10); padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.cb-acct__stat-n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 32px; color: #14213D; }
.cb-acct__stat-l { font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #5A6478; }
.cb-acct__lead { border: 1px solid #E4E9F2; border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.cb-acct__lead-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.cb-acct__lead-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px; color: #14213D; margin: 0; }
.cb-acct__lead-date { margin-left: auto; color: #5A6478; font-size: 14px; }
.cb-acct__lead-msg { margin: 10px 0 6px; font-size: 16px; }
.cb-acct__lead-contact { font-size: 15px; margin: 0 0 14px; }
.cb-acct__lead-contact a { color: #1747A6; }
.cb-acct__badge { font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; background: #EDF1F8; color: #35415C; }
.cb-acct__badge--closed { background: #EAF3EC; color: #1E5631; }
.cb-acct__badge--lost { background: #F3F4F6; color: #6B7280; }
.cb-acct__statusrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cb-acct__statusrow .cb-acct__control { width: auto; min-width: 180px; }
.cb-acct__empty { color: #5A6478; }
.cb-acct__profilelist { margin: 0 0 16px; }
.cb-acct__profilerow { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #E4E9F2; }
.cb-acct__profilerow dt { font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #5A6478; }
.cb-acct__profilenote { color: #5A6478; font-size: 15px; margin: 0 0 20px; }
.cb-acct__password { margin-top: 40px; padding-top: 32px; border-top: 1px solid #E4E9F2; }
.cb-acct__pwform { max-width: 420px; }
.cb-acct__hint { color: #5A6478; font-size: 14px; line-height: 1.55; margin: 4px 0 0; }
@media (max-width: 768px) {
	.cb-acct { padding: 64px 20px; }
	.cb-acct__card { padding: 32px 24px; }
	.cb-acct__stats { grid-template-columns: 1fr; }
}