/* =============================================================
   POLICY WAYFINDER — DESIGN TOKENS
   brand.css — v1.0
   
   Drop this file into your project's static/css/ directory and
   import it at the top of your main stylesheet:
   @import url('brand.css');
   
   All tokens are defined as CSS custom properties (variables)
   on the :root element, making them available globally.
   ============================================================= */


/* -------------------------------------------------------------
   COLOUR PALETTE
   ------------------------------------------------------------- */
:root {

  /* Primary */
  --pw-navy:          #1B2B4B;   /* Primary brand colour. Headings, nav, footer backgrounds. */
  --pw-navy-light:    #243660;   /* Hover state for navy elements. */
  --pw-navy-subtle:   rgba(27, 43, 75, 0.06);  /* Dividers, subtle backgrounds. */
  --pw-navy-border:   rgba(27, 43, 75, 0.10);  /* Card borders, input borders. */

  /* Secondary */
  --pw-teal:          #3D8B8B;   /* CTAs, links, active states, highlights. */
  --pw-teal-light:    #4FA5A5;   /* Hover state for teal. */
  --pw-teal-subtle:   rgba(61, 139, 139, 0.10); /* Teal tints for badges, chips. */

  /* Accent */
  --pw-sand:          #F2EAD3;   /* Section backgrounds, card fills. Warm breathing space. */
  --pw-sand-dark:     #E8DCC4;   /* Darker sand for hover states on sand backgrounds. */

  /* Neutral */
  --pw-slate:         #5C6B7A;   /* Body copy, secondary text, placeholders. */
  --pw-white:         #FAFAF8;   /* Page background. Slightly warm — not pure white. */

  /* Semantic */
  --pw-sage:          #7BAE7F;   /* Positive / covered outcomes. Success states. */
  --pw-sage-subtle:   rgba(123, 174, 127, 0.15); /* Sage tint for result badges. */
  --pw-sage-text:     #4a8a4e;   /* Sage text on light backgrounds. */

  --pw-amber:         #C9882A;   /* Partial coverage / uncertain outcomes. */
  --pw-amber-subtle:  rgba(201, 136, 42, 0.12);
  --pw-amber-text:    #a06b1a;

  --pw-red:           #B94444;   /* Not covered / exclusion outcomes. */
  --pw-red-subtle:    rgba(185, 68, 68, 0.10);
  --pw-red-text:      #8c2e2e;


  /* -------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------- */

  /* Font families */
  --pw-font-display:  'Playfair Display', Georgia, serif;
    /* Use for: H1, H2, hero headings, pull quotes, logo wordmark */

  --pw-font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
    /* Use for: Body copy, UI labels, navigation, buttons, captions */

  /* Font sizes — fluid where appropriate */
  --pw-text-xs:       0.7rem;    /* 11px — labels, legal, captions */
  --pw-text-sm:       0.8rem;    /* 13px — secondary copy, badges */
  --pw-text-base:     0.9rem;    /* 14px — body copy */
  --pw-text-md:       1rem;      /* 16px — comfortable reading size */
  --pw-text-lg:       1.1rem;    /* ~18px — lead paragraphs */
  --pw-text-xl:       1.35rem;   /* ~22px — subheadings */
  --pw-text-2xl:      1.75rem;   /* ~28px — section headings */
  --pw-text-3xl:      2.25rem;   /* ~36px — page headings */
  --pw-text-hero:     clamp(2.4rem, 4vw, 3.4rem); /* Hero H1 — fluid */

  /* Font weights */
  --pw-weight-light:    300;
  --pw-weight-regular:  400;
  --pw-weight-medium:   500;
  --pw-weight-bold:     700;

  /* Line heights */
  --pw-leading-tight:   1.15;   /* Headings */
  --pw-leading-snug:    1.4;    /* Subheadings */
  --pw-leading-base:    1.65;   /* Body copy */
  --pw-leading-loose:   1.8;    /* Long-form / article copy */

  /* Letter spacing */
  --pw-tracking-tight:  -0.025em;  /* Display headings */
  --pw-tracking-normal: 0;
  --pw-tracking-wide:   0.05em;    /* Badges, labels */
  --pw-tracking-wider:  0.12em;    /* Section labels, ALL CAPS */
  --pw-tracking-widest: 0.18em;    /* Logo descriptor */


  /* -------------------------------------------------------------
     SPACING SCALE
     ------------------------------------------------------------- */
  --pw-space-1:   0.25rem;   /*  4px */
  --pw-space-2:   0.5rem;    /*  8px */
  --pw-space-3:   0.75rem;   /* 12px */
  --pw-space-4:   1rem;      /* 16px */
  --pw-space-5:   1.25rem;   /* 20px */
  --pw-space-6:   1.5rem;    /* 24px */
  --pw-space-8:   2rem;      /* 32px */
  --pw-space-10:  2.5rem;    /* 40px */
  --pw-space-12:  3rem;      /* 48px */
  --pw-space-16:  4rem;      /* 64px */
  --pw-space-20:  5rem;      /* 80px */
  --pw-space-24:  6rem;      /* 96px */


  /* -------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------- */
  --pw-radius-sm:   4px;    /* Buttons (small), tags */
  --pw-radius-md:   8px;    /* Buttons, inputs, small cards */
  --pw-radius-lg:   12px;   /* Cards, panels */
  --pw-radius-xl:   16px;   /* Large cards, modals */
  --pw-radius-full: 9999px; /* Pills, badges, circular elements */


  /* -------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------- */
  --pw-shadow-xs:   0 1px 3px rgba(27, 43, 75, 0.06);
  --pw-shadow-sm:   0 2px 8px rgba(27, 43, 75, 0.08);
  --pw-shadow-md:   0 4px 16px rgba(27, 43, 75, 0.10);
  --pw-shadow-lg:   0 8px 32px rgba(27, 43, 75, 0.12);
  --pw-shadow-xl:   0 20px 60px rgba(27, 43, 75, 0.14);


  /* -------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------- */
  --pw-max-width:         1200px;  /* Max page content width */
  --pw-max-width-content:  720px;  /* Max width for text content / articles */
  --pw-max-width-narrow:   480px;  /* Narrow content, form widths */

  --pw-page-padding-x:    2.5rem;  /* Horizontal page padding — desktop */
  --pw-page-padding-x-sm: 1.25rem; /* Horizontal page padding — mobile */

  --pw-nav-height:        64px;    /* Fixed nav bar height */


  /* -------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------- */
  --pw-transition-fast:   0.15s ease;
  --pw-transition-base:   0.2s ease;
  --pw-transition-slow:   0.4s ease;


  /* -------------------------------------------------------------
     LOGO MARK — SVG reference
     
     The compass mark SVG path data is documented here for
     consistent reproduction across contexts.
     
     Viewbox: 0 0 42 42
     Circle: cx=21 cy=21 r=19
     Stroke (light bg): #1B2B4B, 1.5px
     Stroke (dark bg):  rgba(255,255,255,0.25), 1.5px
     Centre dot: r=2.5, fill=var(--pw-teal) / #4FA5A5 on dark
     North point: M21 5 L23 18.5 L21 21 L19 18.5 Z
     East point:  M37 21 L23.5 23 L21 21 L23.5 19 Z  opacity 0.45
     South point: M21 37 L19 23.5 L21 21 L23 23.5 Z  opacity 0.35
     West point:  M5 21 L18.5 19 L21 21 L18.5 23 Z   opacity 0.25
     ------------------------------------------------------------- */


  /* -------------------------------------------------------------
     COVERAGE RESULT STATES
     Used in scenario analysis results UI.
     ------------------------------------------------------------- */
  --pw-result-covered-bg:    var(--pw-sage-subtle);
  --pw-result-covered-text:  var(--pw-sage-text);
  --pw-result-covered-border: var(--pw-sage);

  --pw-result-partial-bg:    var(--pw-amber-subtle);
  --pw-result-partial-text:  var(--pw-amber-text);
  --pw-result-partial-border: var(--pw-amber);

  --pw-result-excluded-bg:   var(--pw-red-subtle);
  --pw-result-excluded-text: var(--pw-red-text);
  --pw-result-excluded-border: var(--pw-red);

}


/* =============================================================
   BASE RESETS & DEFAULTS
   Minimal sensible defaults using the tokens above.
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-md);
  font-weight: var(--pw-weight-regular);
  line-height: var(--pw-leading-base);
  color: var(--pw-navy);
  background-color: var(--pw-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pw-font-display);
  font-weight: var(--pw-weight-bold);
  line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight);
  color: var(--pw-navy);
}

h1 { font-size: var(--pw-text-hero); }
h2 { font-size: var(--pw-text-3xl); }
h3 { font-size: var(--pw-text-2xl); }
h4 { font-size: var(--pw-text-xl); }
h5 { font-size: var(--pw-text-lg); }
h6 { font-size: var(--pw-text-md); font-family: var(--pw-font-body); }

p {
  color: var(--pw-slate);
  font-weight: var(--pw-weight-light);
  line-height: var(--pw-leading-base);
}

a {
  color: var(--pw-teal);
  text-decoration: none;
  transition: color var(--pw-transition-base);
}

a:hover { color: var(--pw-teal-light); }

img, svg { display: block; max-width: 100%; }

input, textarea, select, button {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-base);
}


/* =============================================================
   UTILITY CLASSES
   Minimal set — extend as needed in your component styles.
   ============================================================= */

/* Layout */
.pw-container {
  width: 100%;
  max-width: var(--pw-max-width);
  margin-inline: auto;
  padding-inline: var(--pw-page-padding-x);
}

@media (max-width: 768px) {
  .pw-container {
    padding-inline: var(--pw-page-padding-x-sm);
  }
}

/* Section label — small teal ALL CAPS line above headings */
.pw-section-label {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--pw-tracking-wider);
  color: var(--pw-teal);
  margin-bottom: var(--pw-space-3);
}

/* Coverage result badges */
.pw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  padding: 0.3rem 0.75rem;
  border-radius: var(--pw-radius-full);
}

.pw-badge--covered {
  background: var(--pw-result-covered-bg);
  color: var(--pw-result-covered-text);
}

.pw-badge--partial {
  background: var(--pw-result-partial-bg);
  color: var(--pw-result-partial-text);
}

.pw-badge--excluded {
  background: var(--pw-result-excluded-bg);
  color: var(--pw-result-excluded-text);
}

/* Buttons */
.pw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-family: var(--pw-font-body);
  font-weight: var(--pw-weight-medium);
  border-radius: var(--pw-radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--pw-transition-base), transform var(--pw-transition-fast);
  padding: 0.75rem 1.5rem;
  font-size: var(--pw-text-base);
}

.pw-btn--primary {
  background: var(--pw-teal);
  color: white;
}

.pw-btn--primary:hover {
  background: var(--pw-teal-light);
  color: white;
  transform: translateY(-1px);
}

.pw-btn--secondary {
  background: var(--pw-navy);
  color: white;
}

.pw-btn--secondary:hover {
  background: var(--pw-navy-light);
  color: white;
  transform: translateY(-1px);
}

.pw-btn--ghost {
  background: transparent;
  color: var(--pw-navy);
  border: 1px solid var(--pw-navy-border);
}

.pw-btn--ghost:hover {
  border-color: var(--pw-navy);
  color: var(--pw-navy);
}

/* Cards */
.pw-card {
  background: white;
  border-radius: var(--pw-radius-lg);
  border: 1px solid var(--pw-navy-border);
  padding: var(--pw-space-6);
}

.pw-card--elevated {
  border: none;
  box-shadow: var(--pw-shadow-md);
}

/* Fade-up animation */
.pw-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pw-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Upgrade nudge (free tier dashboard) ────────────────────────────── */
.pw-upgrade-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 12px;
  border-top: 1px solid rgba(27, 43, 75, 0.08);
  margin-bottom: 4px;
}
.pw-upgrade-nudge__text {
  font-family: var(--pw-font-body);
  font-size: 0.8125rem;
  color: var(--pw-slate);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pw-upgrade-nudge__link {
  color: var(--pw-teal);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.pw-upgrade-nudge__link:hover {
  text-decoration: underline;
}
.pw-upgrade-nudge__link--secondary {
  font-weight: 400;
  opacity: 0.85;
}
.pw-upgrade-nudge__sep {
  color: var(--pw-slate);
  opacity: 0.5;
  font-size: 0.75rem;
}
.pw-upgrade-nudge__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pw-slate);
  opacity: 0.4;
  font-size: 0.875rem;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
}
.pw-upgrade-nudge__dismiss:hover {
  opacity: 0.8;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROPERTY CARDS (dashboard — property-grouped policy list)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pw-prop-card {
  background: var(--pw-white);
  border: 1px solid rgba(27, 43, 75, 0.10);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}

.pw-prop-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--pw-sand);
  border-bottom: 1px solid rgba(27, 43, 75, 0.08);
}

.pw-prop-card__postcode {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pw-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pw-navy);
  letter-spacing: 0.02em;
}

.pw-prop-card__icon {
  color: var(--pw-teal);
  flex-shrink: 0;
}

.pw-prop-card__address {
  font-weight: 400;
  color: var(--pw-slate);
  letter-spacing: 0;
}

.pw-prop-card__add-policy {
  font-family: var(--pw-font-body);
  font-size: 0.8rem;
  color: var(--pw-teal);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.pw-prop-card__add-policy:hover {
  text-decoration: underline;
}

.pw-prop-card__policies {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pw-prop-card__empty {
  font-family: var(--pw-font-body);
  font-size: 0.875rem;
  color: var(--pw-slate);
  opacity: 0.6;
  padding: 8px 0;
}

.pw-prop-card__empty a {
  color: var(--pw-teal);
  text-decoration: none;
}

.pw-prop-add-new {
  display: inline-block;
  font-family: var(--pw-font-body);
  font-size: 0.8125rem;
  color: var(--pw-slate);
  opacity: 0.55;
  text-decoration: none;
  margin-top: 4px;
  margin-bottom: 24px;
}

.pw-prop-add-new:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── HVI form helpers ─────────────────────────────────── */

.pw-field-hint {
  font-family: var(--pw-font-body);
  font-size: 0.75rem;
  color: var(--pw-slate);
  opacity: 0.65;
  margin-top: 4px;
  line-height: 1.4;
}

.pw-optional {
  font-family: var(--pw-font-body);
  font-size: 0.75rem;
  color: var(--pw-slate);
  opacity: 0.55;
  font-weight: 400;
}

.pw-hvi-checkbox {
  margin-bottom: 10px;
}

.pw-item-meta {
  font-family: var(--pw-font-body);
  font-size: 0.75rem;
  color: var(--pw-slate);
  opacity: 0.55;
  margin-left: 8px;
}

/* ─── Cover Verification ─────────────────────────────────────── */

/* Policy detail — conflicts card: amber left border + tint */
.pw-verification-card--conflicts {
  border-left: 4px solid var(--pw-amber);
  background: rgba(201, 136, 42, 0.05);
  /* pw-card already supplies border-radius, border, padding */
}

/* Override the section-label colour inside the conflicts card to amber */
.pw-verification-card--conflicts .pw-section-label {
  color: var(--pw-amber-text);
}

.pw-verification-intro {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-sm);
  color: var(--pw-slate);
  margin-bottom: var(--pw-space-4);
}

/* Each conflict item row */
.pw-verification-item {
  display: flex;
  gap: var(--pw-space-3);
  align-items: flex-start;
  padding: var(--pw-space-3) 0;
  border-top: 1px solid var(--pw-navy-border);
}

.pw-verification-item p {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-sm);
  color: var(--pw-navy);
  margin: 0 0 var(--pw-space-2);
  line-height: 1.6;
}

/* Amber warning icon */
.pw-verification-icon {
  color: var(--pw-amber);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

/* "Update my policy details" link */
.pw-verification-action {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  color: var(--pw-teal);
  text-decoration: none;
}
.pw-verification-action:hover {
  text-decoration: underline;
}

/* Confirmations block: visually subordinate to conflicts card */
.pw-verification-card--confirmations {
  border: 1px solid var(--pw-navy-border);
  border-radius: var(--pw-radius-md);
  padding: var(--pw-space-4) var(--pw-space-5);
  background: white;
}

.pw-verification-confirmations-text {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-sm);
  color: var(--pw-slate);
  margin: 0;
  line-height: 1.6;
}

/* Footer attribution line */
.pw-verification-footer {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-xs);
  color: var(--pw-slate);
  opacity: 0.6;
  margin: 0;
}

/* ─── Analyse page verification warnings ────────────────────── */

.pw-analyse-verification {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-3);
  margin-bottom: var(--pw-space-5);
}

.pw-analyse-verification-item {
  display: flex;
  gap: var(--pw-space-3);
  align-items: flex-start;
  background: rgba(201, 136, 42, 0.06);
  border: 1px solid rgba(201, 136, 42, 0.25);
  border-left: 3px solid var(--pw-amber);
  border-radius: var(--pw-radius-md);
  padding: var(--pw-space-3) var(--pw-space-4);
}

.pw-analyse-verification-item p {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-sm);
  color: var(--pw-navy);
  margin: 0 0 var(--pw-space-2);
  line-height: 1.6;
}

/* Unclassed link inside analyse verification items */
.pw-analyse-verification-item a {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  color: var(--pw-teal);
  text-decoration: none;
}
.pw-analyse-verification-item a:hover {
  text-decoration: underline;
}

/* ─── Results page verification caveat ──────────────────────── */

.pw-results-verification-caveat {
  background: rgba(201, 136, 42, 0.06);
  border: 1px solid rgba(201, 136, 42, 0.25);
  border-left: 4px solid var(--pw-amber);
  border-radius: var(--pw-radius-md);
  padding: var(--pw-space-4) var(--pw-space-5);
  margin-bottom: var(--pw-space-5);
}

.pw-results-verification-heading {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--pw-tracking-wider);
  color: var(--pw-amber-text);
  margin: 0 0 var(--pw-space-3);
}

.pw-results-verification-list {
  margin: 0 0 var(--pw-space-4);
  padding-left: var(--pw-space-5);
}

.pw-results-verification-list li {
  font-family: var(--pw-font-body);
  font-size: var(--pw-text-sm);
  color: var(--pw-navy);
  line-height: 1.6;
  margin-bottom: var(--pw-space-2);
}

.pw-results-verification-list li:last-child {
  margin-bottom: 0;
}