/* ==========================================================================
   base.css — tipografia global · botões · drawer · formulário · reveal
   (as camadas foram declaradas em critical.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIPOGRAFIA
   -------------------------------------------------------------------------- */
@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); letter-spacing: -.015em; }
  h4 { font-size: var(--step-1); letter-spacing: -.01em; }

  p { max-width: 68ch; }
  strong { font-weight: 650; }

  a:not([class]) {
    color: var(--brand-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    &:hover { text-decoration-thickness: 2px; }
  }

  ::selection { background: color-mix(in oklab, var(--brand) 35%, transparent); }
}

@layer components {
  /* Cabeçalho de secção: título + parágrafo, sempre alinhados ao eixo da grelha */
  .section-head {
    display: grid;
    gap: var(--s-4);
    max-width: 44rem;
    margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);

    &.is-center { margin-inline: auto; text-align: center; justify-items: center; }
    & p { font-size: var(--step-1); color: var(--ink-soft); }
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--brand-strong);
    & .bi { font-size: 1rem; }
  }
}

/* --------------------------------------------------------------------------
   BOTÕES
   -------------------------------------------------------------------------- */
@layer components {
  .btn {
    --_bg: var(--surface);
    --_fg: var(--ink);
    --_bd: var(--line-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: .75rem 1.375rem;
    border: 1px solid var(--_bd);
    border-radius: var(--r-control);
    background: var(--_bg);
    color: var(--_fg);
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, border-color .2s, transform .15s var(--ease-out), box-shadow .2s;

    &:hover  { --_bd: var(--ink-soft); }
    &:active { transform: translateY(1px); }
    & .bi    { font-size: 1.125em; }
  }

  .btn--signal {
    --_bg: var(--signal);
    --_fg: var(--on-signal);
    --_bd: transparent;
    box-shadow: 0 1px 0 rgb(0 0 0 / .08) inset, 0 10px 24px -12px color-mix(in oklab, var(--signal) 80%, #000);
    &:hover { --_bg: var(--signal-hover); --_bd: transparent; }
  }

  .btn--brand {
    --_bg: var(--brand-strong);
    --_fg: light-dark(#fff, #06222a);
    --_bd: transparent;
    &:hover { --_bg: color-mix(in oklab, var(--brand-strong) 88%, var(--ink)); --_bd: transparent; }
  }

  .btn--ghost { --_bg: transparent; }

  .btn--lg    { min-height: 56px; padding-inline: 1.75rem; font-size: 1.0625rem; }
  .btn--block { width: 100%; }
  .btn--sm    { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }

  .btn[aria-busy="true"] {
    pointer-events: none;
    opacity: .85;
    & .btn__label { visibility: hidden; }
    &::after {
      content: "";
      position: absolute;
      width: 1.25rem; height: 1.25rem;
      border: 2px solid currentColor;
      border-inline-end-color: transparent;
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
  }
  .btn[aria-busy] { position: relative; }

  @keyframes spin { to { rotate: 1turn; } }
}

/* --------------------------------------------------------------------------
   DRAWER (menu mobile) — <dialog> nativo + @starting-style
   -------------------------------------------------------------------------- */
@layer components {
  .drawer {
    --_w: min(22rem, 88vw);
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--_w);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    overscroll-behavior: contain;

    translate: 100% 0;
    transition:
      translate .32s var(--ease-out),
      overlay .32s allow-discrete,
      display .32s allow-discrete;

    &[open] {
      translate: 0 0;
      @starting-style { translate: 100% 0; }
    }

    &::backdrop {
      background: rgb(4 16 20 / 0);
      backdrop-filter: blur(0);
      transition: background-color .32s, backdrop-filter .32s, overlay .32s allow-discrete, display .32s allow-discrete;
    }
    &[open]::backdrop {
      background: rgb(4 16 20 / .5);
      backdrop-filter: blur(2px);
      @starting-style { background: rgb(4 16 20 / 0); }
    }
  }

  .drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  }

  .drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(var(--header-h) - var(--s-4));
    margin-block-end: var(--s-4);
    & img { height: 34px; width: auto; }
  }

  .drawer__nav {
    & ul { list-style: none; padding: 0; display: grid; }
    & a {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      padding: var(--s-4) 0;
      border-block-end: 1px solid var(--line);
      font-size: var(--step-1);
      font-weight: 600;
      text-decoration: none;
      & .bi { color: var(--brand-strong); font-size: 1.25rem; }
    }
  }

  .drawer__footer {
    margin-block-start: auto;
    display: grid;
    gap: var(--s-3);
    padding-block-start: var(--s-5);
  }

  body:has(.drawer[open]) { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   FORMULÁRIO DE COTAÇÃO
   -------------------------------------------------------------------------- */
@layer components {
  .quote-card {
    position: relative;
    padding: clamp(1.25rem, .9rem + 1.6vw, 2rem);
    border-radius: var(--r-panel);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    overflow: clip;

    /* faixa superior em âmbar: o formulário é o destino de todos os CTA */
    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, var(--brand) 0 50%, var(--signal) 50% 100%);
    }
  }

  .quote-card__head {
    display: grid;
    gap: var(--s-2);
    margin-block-end: var(--s-4);
    & h2 { font-size: var(--step-2); }
    & p  { font-size: .9375rem; color: var(--ink-soft); }
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    & > .field--full,
    & > fieldset { grid-column: 1 / -1; }
  }

  .field {
    display: grid;
    gap: var(--s-1);
    align-content: start;
  }

  .field__label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    & .optional { font-weight: 400; color: var(--ink-soft); }
  }

  .field__control {
    position: relative;
    & > .bi {
      position: absolute;
      inset-inline-start: .875rem;
      inset-block-start: 50%;
      translate: 0 -50%;
      color: var(--ink-soft);
      pointer-events: none;
      font-size: 1.0625rem;
    }
  }

  .input {
    width: 100%;
    min-height: 48px;
    padding: .6875rem .875rem .75rem 2.625rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    background: var(--bg);
    color: var(--ink);
    font-size: 1rem;              /* 16px evita zoom automático no iOS */
    transition: border-color .15s, box-shadow .15s, background-color .15s;

    &::placeholder { color: color-mix(in oklab, var(--ink-soft) 70%, transparent); }
    &:hover { border-color: var(--ink-soft); }
    &:focus {
      outline: none;
      border-color: var(--brand);
      background: var(--surface);
      box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
    }

    /* :user-invalid só dispara depois de o utilizador interagir */
    &:user-invalid {
      border-color: var(--danger);
      box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 14%, transparent);
    }
  }

  .input--plate {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
  }

  .field__error {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    min-height: 0;
    font-size: .8125rem;
    color: var(--danger);
    &:empty { display: none; }
    &::before {
      content: "\F33A";               /* bi-exclamation-circle */
      font-family: "bootstrap-icons";
      font-size: .875rem;
    }
  }

  /* Canal de contacto: controlo segmentado com :has() */
  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    background: var(--bg);

    & label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-2);
      min-height: 40px;
      border-radius: 7px;
      font-size: .9375rem;
      font-weight: 600;
      color: var(--ink-soft);
      cursor: pointer;
      transition: background-color .15s, color .15s;
      &:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(var(--shadow-rgb) / .15); }
      &:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 1px; }
      & input { position: absolute; opacity: 0; pointer-events: none; }
    }
  }

  fieldset { border: 0; padding: 0; min-width: 0; }
  legend   { padding: 0; margin-block-end: var(--s-2); }

  /* Coberturas de interesse: checkboxes em forma de chip */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 38px;
    padding: .375rem .875rem .375rem .625rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background-color .15s, color .15s;

    & input { position: absolute; opacity: 0; pointer-events: none; }
    & .bi-check2 { display: none; }
    & .bi-plus   { font-size: 1rem; }

    &:hover { border-color: var(--ink-soft); color: var(--ink); }
    &:has(input:checked) {
      border-color: var(--brand);
      background: var(--brand-tint);
      color: var(--brand-strong);
      & .bi-check2 { display: inline; }
      & .bi-plus   { display: none; }
    }
    &:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
  }

  .consent {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--s-3);
    align-items: start;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ink-soft);

    & input {
      width: 20px;
      height: 20px;
      margin-block-start: 1px;
      accent-color: var(--brand-strong);
    }
    & input:user-invalid { outline: 2px solid var(--danger); outline-offset: 2px; }
  }

  .form-submit { grid-column: 1 / -1; display: grid; gap: var(--s-3); margin-block-start: var(--s-2); }

  .form-assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-1) var(--s-3);
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    & li { white-space: nowrap; }
    color: var(--ink-soft);
    & li { display: inline-flex; align-items: center; gap: 6px; }
    & .bi { color: var(--brand-strong); }
  }

  /* Honeypot anti-spam */
  .hp { position: absolute !important; inset-inline-start: -9999px; }

  /* Estado de sucesso / erro */
  .form-status {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    padding-block: var(--s-6);
    text-align: center;

    & .form-status__icon {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: color-mix(in oklab, var(--success) 14%, transparent);
      color: var(--success);
      font-size: 2rem;
    }
    & h3 { font-size: var(--step-2); }
    & p  { color: var(--ink-soft); max-width: 34ch; }
  }

  .form-alert {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-control);
    background: color-mix(in oklab, var(--danger) 10%, transparent);
    color: var(--danger);
    font-size: .875rem;
  }

  @container quote (max-width: 300px) {
    .form-grid { grid-template-columns: 1fr; }
  }
  .quote-card { container: quote / inline-size; }
}

/* --------------------------------------------------------------------------
   REVEAL — entrada única e contida; desligada com reduced-motion
   -------------------------------------------------------------------------- */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 0;
      translate: 0 16px;
      transition: opacity .6s var(--ease-out), translate .6s var(--ease-out);
      transition-delay: calc(var(--i, 0) * 90ms);
    }
    .js .reveal.is-visible { opacity: 1; translate: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }

  /* Transição de tema (View Transitions API) */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .35s; }
}