/*
  Payment portal adjustments.

  trident-site.css is a straight copy of the main website stylesheet
  (tridentasset.com/assets/site.css). This file only adapts the portal's
  template content (forms, buttons, alerts, headings) so it reads as part of
  the same website. It sits in the "pay" layer, above both the template and
  the main stylesheet.
*/
@layer pay {
  /* Match the main site: override the legacy template's smaller desktop and mobile root sizes. */
  html { font-size: 100%; }
  /* Typography and color follow the main site, not the template. */
  body { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 1rem; line-height: 1.68; color: var(--ink); background: var(--white); }
  .body-inner { background: var(--white); }
  /* The template sets its own font on text elements; use the main site's font everywhere except icon glyphs. */
  p, .lead, li, a, span, small, strong, label, address, td, th, dt, dd, blockquote,
  input, select, textarea, button, .btn, .form-control, .alert { font-family: inherit; }
  main h1, main h2, main h3, main h4, main h5, main h6,
  main .h1, main .h2, main .h3, main .h4, main .h5, main .h6 { font-family: inherit; color: var(--ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
  main h1, main .h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); }
  main h2, main .h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); margin-bottom: .6em; }
  main h3, main .h3 { font-size: 1.3rem; margin-bottom: .5em; }
  main h4, main .h4 { font-size: 1.1rem; }
  main h5, main .h5, main h6, main .h6 { font-size: 1rem; }
  main p, main .paragraph, main li, main label, main td, main th { color: var(--muted); }
  main strong, main label, main th { color: var(--ink); }
  main a:not(.btn):not(.button) { color: var(--blue); }
  main a:not(.btn):not(.button):hover { color: var(--blue-bright); }
  main section:not(.page-hero) { padding-block: 64px; }

  /* Portal page header: the main site's page hero, compact for task pages. */
  .portal-hero { padding: 30px 0 44px; }
  .portal-hero .breadcrumbs { flex-wrap: wrap; margin-bottom: 28px; }
  main .portal-hero .breadcrumbs a { color: var(--muted); }
  main .portal-hero .breadcrumbs a:hover { color: var(--blue-bright); }
  .portal-hero h1 { margin: 0; font-family: inherit; color: var(--ink); font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
  .portal-hero .lead { color: var(--muted); }

  /* Buttons match the main site's primary button. */
  main .btn { border-radius: 3px; font-family: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; }
  main .btn-primary, main .btn-primary:not(:disabled):not(.disabled) { background: var(--blue); border-color: var(--blue); color: var(--white); }
  main .btn-primary:hover, main .btn-primary:focus, main .btn-primary:active { background: var(--navy); border-color: var(--navy); color: var(--white); }
  main .btn-outline, main .btn-light, main .btn-secondary { border-color: var(--blue); color: var(--blue); background: var(--white); }

  /* Form fields. */
  main .form-control, main .form-select, main .input-group-text { border-color: var(--line); border-radius: 3px; color: var(--ink); font-family: inherit; }
  main .form-control:focus, main .form-select:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(26, 105, 174, .18); }
  main .input-group-text { background: var(--light); color: var(--muted); }
  main .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
  main .text-primary { color: var(--blue) !important; }
  main .text-muted { color: var(--muted) !important; }

  /* Cards, tables and alerts. */
  main .card { border-color: var(--line); border-radius: 4px; }
  main .card-header { background: var(--light); border-color: var(--line); }
  main .table { color: var(--ink); }
  main .table thead th { border-color: var(--line); background: var(--light); }
  main .alert { border-radius: 3px; }

  /* Footer: the portal adds its payment refund statement under the collector notice. */
  .collector-notice .refund-notice { display: block; margin-top: 10px; }
}