/* =============================================================
 * Estates Strategy Partnership — site.css
 * Hand-written replica of the Loveable Tailwind build.
 *
 * Every utility class below corresponds to a class referenced
 * in the Loveable .tsx files and produces the same computed
 * styles Tailwind v3 would have produced from
 * tailwind.config.ts + src/index.css.
 *
 * Breakpoints (Tailwind defaults):
 *   md  ≥ 768px
 *   lg  ≥ 1024px
 *
 * Design tokens live as CSS custom properties in :root so the
 * React source files (which reference var(--color-teal) etc.)
 * continue to work unchanged when ported into PHP templates.
 * ============================================================= */

/* ---- Google Fonts ------------------------------------------- */
/* Loaded via <link> in layouts/main.php for performance.
   @import creates a render-blocking waterfall; <link> with
   preconnect saves 300-600ms on LCP. */

/* =============================================================
 * 1. Design tokens (from src/index.css :root)
 * ============================================================= */
:root {
  /* ESP brand colours */
  --color-navy:      #0B1F50;
  --color-teal:      #4C989D;
  --color-gold:      #F8AC00;
  --color-white:     #FFFFFF;
  --color-navy-tint: #E8EDF5;
  --color-mid-navy:  #3D5068;

  /* Typography */
  --font-heading: 'Spectral', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;

  /* shadcn HSL tokens mapped to ESP palette (preserved so any
     ported shadcn component still resolves correctly) */
  --background:            0 0% 100%;
  --foreground:            216 76% 18%;
  --card:                  226 33% 93%;
  --card-foreground:       216 76% 18%;
  --popover:               0 0% 100%;
  --popover-foreground:    216 76% 18%;
  --primary:               183 36% 45%;
  --primary-foreground:    0 0% 100%;
  --secondary:             226 33% 93%;
  --secondary-foreground:  216 76% 18%;
  --muted:                 226 33% 93%;
  --muted-foreground:      213 24% 33%;
  --accent:                226 33% 93%;
  --accent-foreground:     216 76% 18%;
  --destructive:           0 84.2% 60.2%;
  --destructive-foreground:0 0% 100%;
  --border:                226 33% 93%;
  --input:                 226 33% 93%;
  --ring:                  183 36% 45%;
  --radius:                0.25rem;
}

/* =============================================================
 * 2. Preflight-equivalent reset (Tailwind v3 compatible)
 * ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-body);
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: inherit;
}

b, strong { font-weight: bolder; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select { text-transform: none; }

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

[hidden] { display: none; }

ul, ol { list-style: none; margin: 0; padding: 0; }

/* =============================================================
 * 3. Base typography (from src/index.css @layer base)
 * ============================================================= */
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-mid-navy);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-navy);
}

h1 { font-size: 42px; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }

p + p { margin-top: 1.5em; }

/* Focus states */
*:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}
.on-navy-tint *:focus-visible {
  outline-color: var(--color-navy);
}

@media (max-width: 767px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
}

/* =============================================================
 * 4. Layout utilities
 * ============================================================= */

/* Container */
.mx-auto    { margin-left: auto; margin-right: auto; }
.max-w-content { max-width: 1100px; }

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.flex         { display: flex; }
.grid         { display: grid; }

/* Flex direction / wrap */
.flex-col { flex-direction: column; }
.flex-1   { flex: 1 1 0%; }

/* Align / justify */
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* Gap */
.gap-2    { gap: 0.5rem;   } /* 8px  */
.gap-2\.5 { gap: 0.625rem; } /* 10px */
.gap-3    { gap: 0.75rem;  } /* 12px */
.gap-4    { gap: 1rem;     } /* 16px */
.gap-6    { gap: 1.5rem;   } /* 24px */
.gap-8    { gap: 2rem;     } /* 32px */
.gap-10   { gap: 2.5rem;   } /* 40px */
.gap-12   { gap: 3rem;     } /* 48px */

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: -webkit-sticky; position: sticky; }

.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.top-0     { top: 0; }
.top-2     { top: 0.5rem; }
.top-4     { top: 1rem; }
.right-0   { right: 0; }
.right-6   { right: 1.5rem; }
.bottom-0  { bottom: 0; }
.bottom-6  { bottom: 1.5rem; }
.bottom-12 { bottom: 3rem; }
.left-0    { left: 0; }
.left-4    { left: 1rem; }
.left-6    { left: 1.5rem; }
.-top-2    { top: -0.5rem; }
.-right-2  { right: -0.5rem; }

/* Z-index (including arbitrary values used by the Loveable source) */
.z-50       { z-index: 50; }
.z-\[999\]  { z-index: 999; }
.z-\[1000\] { z-index: 1000; }
.z-\[1001\] { z-index: 1001; }
.z-\[1100\] { z-index: 1100; }

/* Sizing */
.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-\[18px\] { width: 18px; }
.h-9       { height: 2.25rem; } /* 36px */
.h-10      { height: 2.5rem;  } /* 40px */
.h-\[18px\] { height: 18px; }

/* Text alignment */
.text-center { text-align: center; }

/* =============================================================
 * 5. Spacing (padding / margin)
 * ============================================================= */
.p-1  { padding: 0.25rem; }
.p-2  { padding: 0.5rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-\[10px\] { padding-left: 10px; padding-right: 10px; }
.px-\[14px\] { padding-left: 14px; padding-right: 14px; }

.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;    padding-bottom: 1rem; }
.py-6  { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem;  padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem;    padding-bottom: 3rem; }
.py-16 { padding-top: 4rem;    padding-bottom: 4rem; }
.py-\[6px\]  { padding-top: 6px;  padding-bottom: 6px; }
.py-\[10px\] { padding-top: 10px; padding-bottom: 10px; }
.py-\[14px\] { padding-top: 14px; padding-bottom: 14px; }

.pt-6  { padding-top: 1.5rem; }
.pb-4  { padding-bottom: 1rem; }

/* =============================================================
 * 6. Borders / radius / rings
 * ============================================================= */
.border     { border-width: 1px; }
.border-t   { border-top-width: 1px; }
.border-b   { border-bottom-width: 1px; }
.border-teal      { border-color: var(--color-teal); }
.border-navy-tint { border-color: var(--color-navy-tint); }

.rounded         { border-radius: 0.25rem; } /* 4px */
.rounded-\[4px\] { border-radius: 4px; }
.rounded-\[20px\] { border-radius: 20px; }

/* =============================================================
 * 7. Typography utilities
 * ============================================================= */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

.font-light   { font-weight: 300; }
.font-normal  { font-weight: 400; }

.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[16px\] { font-size: 16px; }
.text-\[20px\] { font-size: 20px; }
.text-\[24px\] { font-size: 24px; }
.text-sm       { font-size: 0.875rem; line-height: 1.25rem; }
.text-base     { font-size: 1rem;     line-height: 1.5rem; }
.text-2xl      { font-size: 1.5rem;   line-height: 2rem; }
.no-underline  { text-decoration: none; }

/* =============================================================
 * 8. Colours (utility versions of the design tokens)
 * ============================================================= */
.text-teal      { color: var(--color-teal); }
.text-navy      { color: var(--color-navy); }
.text-mid-navy  { color: var(--color-mid-navy); }
.text-white     { color: var(--color-white); }
.text-navy-tint { color: var(--color-navy-tint); }

.bg-teal      { background-color: var(--color-teal); }
.bg-navy      { background-color: var(--color-navy); }
.bg-navy-tint { background-color: var(--color-navy-tint); }
.bg-\[var\(--color-white\)\] { background-color: var(--color-white); }
.text-\[var\(--color-white\)\] { color: var(--color-white); }

.bg-transparent { background-color: transparent; }

/* =============================================================
 * 9. Transitions
 * ============================================================= */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.ease-in-out  { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* =============================================================
 * 10. Minimum tap targets (accessibility)
 * ============================================================= */
.min-h-\[44px\] { min-height: 44px; }

/* =============================================================
 * 11. Outline / ring (focus states)
 * ============================================================= */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* Focus-variant of outline-none (used on the search input) */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* =============================================================
 * 12. Opacity / hover opacity
 * ============================================================= */
.hover\:opacity-90:hover { opacity: 0.9; }

/* =============================================================
 * 13. Placeholder colour (used in nav search input)
 * ============================================================= */
.placeholder\:text-\[var\(--color-mid-navy\)\]\/50::placeholder {
  color: color-mix(in srgb, var(--color-mid-navy) 50%, transparent);
}

/* =============================================================
 * 14. Screen-reader only (sr-only) + focus unhide
 * ============================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
/* Skip-link focus styles (composed utilities from SiteNavigation.tsx) */
.focus\:fixed:focus      { position: fixed; }
.focus\:left-4:focus     { left: 1rem; }
.focus\:top-2:focus      { top: 0.5rem; }
.focus\:z-\[1100\]:focus { z-index: 1100; }
.focus\:rounded:focus    { border-radius: 0.25rem; }
.focus\:px-4:focus       { padding-left: 1rem;  padding-right: 1rem; }
.focus\:py-2:focus       { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:font-body:focus  { font-family: var(--font-body); }
.focus\:text-sm:focus    { font-size: 0.875rem; line-height: 1.25rem; }
.focus\:font-normal:focus{ font-weight: 400; }
.focus\:ring-2:focus     { box-shadow: 0 0 0 2px var(--color-teal); }
.focus\:ring-teal:focus  { /* consumed by focus:ring-2 */ }

/* =============================================================
 * 15. Responsive variants — md: (≥768px) and lg: (≥1024px)
 *     Only the variants actually referenced by the Loveable
 *     source are defined.
 * ============================================================= */
@media (min-width: 768px) {
  .md\:block  { display: block; }
  .md\:flex   { display: flex; }
  .md\:hidden { display: none; }

  .md\:flex-row        { flex-direction: row; }
  .md\:items-center    { align-items: center; }
  .md\:justify-between { justify-content: space-between; }

  .md\:py-16        { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:py-\[80px\] { padding-top: 80px; padding-bottom: 80px; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:gap-8       { gap: 2rem; }
}

/* max-md: variants (apply below the md breakpoint). The Loveable
   source uses !important via Tailwind's ! prefix — we match that. */
@media (max-width: 767px) {
  .max-md\:\!py-10    { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .max-md\:\!py-12    { padding-top: 3rem   !important; padding-bottom: 3rem   !important; }
  .max-md\:py-10      { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .max-md\:py-12      { padding-top: 3rem;   padding-bottom: 3rem; }
  .max-md\:\!text-\[24px\] { font-size: 24px !important; }
  .max-md\:\!text-\[32px\] { font-size: 32px !important; }
}

/* sm: variant (≥640px) — used by PartnerProfile flex row */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:gap-8    { gap: 2rem; }
}
.flex-shrink-0 { flex-shrink: 0; }
.rounded-full  { border-radius: 9999px; }
.object-cover  { object-fit: cover; }

/* Additional utilities needed by the Phase 2 pages */
.mb-4  { margin-bottom: 1rem; }
.mb-\[6px\] { margin-bottom: 6px; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-\[2px\]  { margin-top: 2px; }
.mt-\[6px\]  { margin-top: 6px; }
.mt-\[10px\] { margin-top: 10px; }
.mx-6  { margin-left: 1.5rem; margin-right: 1.5rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.justify-center { justify-content: center; }
.text-\[15px\]   { font-size: 15px; }
.text-\[17px\]   { font-size: 17px; }
.text-\[32px\]   { font-size: 32px; }
.text-\[42px\]   { font-size: 42px; }
.font-medium     { font-weight: 500; }
.text-teal       { color: var(--color-teal); }
.text-navy       { color: var(--color-navy); }
.disabled\:opacity-70:disabled { opacity: 0.7; }
.hover\:underline:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .md\:text-\[42px\] { font-size: 42px; }
  .md\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================
 * Filter panel (Phase 3)
 * ============================================================= */
.filter-pill {
  cursor: pointer;
}
.filter-pill[data-dormant="1"] {
  opacity: 0.5;
  cursor: default;
}
.filter-pill-selected {
  background-color: var(--color-teal) !important;
  color: var(--color-white) !important;
}
.filter-pill-selected span { color: inherit; }
.filter-pill:hover:not([data-dormant="1"]):not(.filter-pill-selected) {
  opacity: 0.8;
}

.article-card:hover { background-color: var(--color-navy-tint); }

.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

.flex-wrap { flex-wrap: wrap; }
.leading-snug { line-height: 1.375; }
.border-l-2 { border-left-width: 2px; }
.border-l-gold { border-left-color: var(--color-gold); }

/* =============================================================
 * Article prose (detail page — ported from InsightArticlePage.tsx)
 * Typography for markdown-rendered article bodies (the body_md path
 * in ArticleRenderer wraps Parsedown output in <div class="article-
 * prose">). Mirrors the block-renderer output element-for-element so
 * a body_md article renders identically to a body_blocks one.
 * ============================================================= */
.article-prose p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-mid-navy);
  font-size: 17px;
  line-height: 1.8;
  max-width: 720px;
  margin-bottom: 1.5rem;        /* mb-6 */
}
.article-prose h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-navy);
  font-size: 26px;
  margin-top: 2.5rem;           /* mt-10 */
  margin-bottom: 1rem;          /* mb-4  */
}
.article-prose h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-navy);
  font-size: 20px;
  margin-top: 2rem;             /* mt-8 */
  margin-bottom: 0.75rem;       /* mb-3 */
}
@media (min-width: 768px) {
  .article-prose h2 { font-size: 30px; }
  .article-prose h3 { font-size: 24px; }
}
.article-prose hr {
  border: 0;
  border-top: 1px solid var(--color-teal);
  margin-top: 2.5rem;           /* mt-10 */
  margin-bottom: 0;
}
.article-prose hr + p {         /* attribution paragraph after divider */
  font-size: 15px;
  padding-top: 1.5rem;          /* pt-6 */
  margin-bottom: 1.5rem;        /* mb-6 */
}
.article-prose strong { font-weight: 500; }   /* Outfit Medium */
.article-prose em     { font-style: italic; }
.article-prose a {
  color: var(--color-teal);
  text-decoration: none;
}
.article-prose a:hover { text-decoration: underline; }
.article-prose ul,
.article-prose ol {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-mid-navy);
  font-size: 17px;
  line-height: 1.8;
  max-width: 720px;
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
  list-style: revert;
}
.article-prose li { margin-top: 0.5rem; }

/* =============================================================
 * Legal prose (Parsedown-rendered legal pages)
 * Matches the inline typography the React .tsx source applied to
 * each element explicitly.
 * ============================================================= */
.legal-prose h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-navy);
  margin-top: 2.5rem;
  font-size: 30px;
}
.legal-prose h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-navy);
  margin-top: 2rem;
  font-size: 22px;
}
.legal-prose p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-mid-navy);
  font-size: 17px;
  line-height: 1.8;
}
.legal-prose a {
  color: var(--color-teal);
  text-decoration: none;
}
.legal-prose a:hover {
  text-decoration: underline;
}
.legal-prose ul, .legal-prose ol {
  padding-left: 1.25rem;
  list-style: revert;
}
.legal-prose li {
  margin-top: 0.5rem;
}
.legal-prose strong { font-weight: 500; }

/* =============================================================
 * 16. Helpers for JS-driven UI (cookie banner, mobile nav)
 *     These classes are toggled by assets/js/site.js instead of
 *     React's conditional rendering.
 * ============================================================= */
[data-hidden="true"] { display: none !important; }
body.nav-mobile-open { overflow: hidden; }