/* RatePad.ca Currency Converter — styles
   Brand tokens from the brand sheet v1.0. 8px spacing system, system fonts only. */

:root {
  --color-navy: #17324D;
  --color-red: #C62835;
  --color-arctic-white: #F5F7F9;
  --color-cool-grey: #E6EBF0;
  --color-white: #FFFFFF;
  --color-slate: #536579;
  --color-success: #177245;

  --border-strong: #7D8C9C; /* control outlines: Cool Grey alone is below 3:1 against white */
  --color-red-dark: #A9212D;  /* hover/pressed state for red controls */
  --line-on-navy: rgba(255, 255, 255, 0.14);
  --surface-on-navy: rgba(255, 255, 255, 0.05); /* subtle raised panel on navy */
  --color-border-on-navy: #8A9BAD;              /* control outlines on navy (≥ 3:1) */
  --color-red-on-navy: #E2464F; /* lighter Canadian Red tint for small red text on navy */

  --space-1: 0.5rem;  /* 8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */
  --space-5: 2.5rem;  /* 40px */
  --space-6: 3rem;    /* 48px */

  --radius-control: 8px;
  --radius-panel: 12px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --content-width: 46rem;

  color-scheme: light dark;

  /* Theme: light (default). Page-level colours only; the converter panel and
     the ad frame always use their own light styling. */
  --page-bg: var(--color-arctic-white);
  --page-text: var(--color-navy);
  --page-heading: var(--color-navy);
  --page-muted: var(--color-slate);
  --page-link: var(--color-navy);
  --page-link-hover: var(--color-red);
  --page-focus: var(--color-navy);
  --chip-text: var(--color-navy);
  --chip-bg: var(--color-white);
  --chip-border: var(--border-strong);
  --chip-hover-text: var(--color-white);
  --chip-hover-bg: var(--color-navy);
  --panel-bg: var(--color-white);
  --panel-border: var(--color-cool-grey);
  --ad-frame-bg: var(--color-white);
  --band-bg: var(--color-navy);
  --band-border: transparent;
}

/* Navy theme values. Used by the always-navy regions in light mode and by the
   whole page in dark mode. Keep the two lists below identical. */
.hero-band,
.band,
.site-footer {
  --page-text: var(--color-cool-grey);
  --page-heading: var(--color-white);
  --page-muted: var(--color-cool-grey);
  --page-link: var(--color-white);
  --page-link-hover: var(--color-cool-grey);
  --page-focus: var(--color-white);
  --chip-text: var(--color-white);
  --chip-bg: transparent;
  --chip-border: var(--color-border-on-navy);
  --chip-hover-text: var(--color-navy);
  --chip-hover-bg: var(--color-white);
  --panel-bg: var(--surface-on-navy);
  --panel-border: var(--line-on-navy);
  color: var(--page-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: var(--color-navy);
    --page-text: var(--color-cool-grey);
    --page-heading: var(--color-white);
    --page-muted: var(--color-cool-grey);
    --page-link: var(--color-white);
    --page-link-hover: var(--color-cool-grey);
    --page-focus: var(--color-white);
    --chip-text: var(--color-white);
    --chip-bg: transparent;
    --chip-border: var(--color-border-on-navy);
    --chip-hover-text: var(--color-navy);
    --chip-hover-bg: var(--color-white);
    --panel-bg: var(--surface-on-navy);
    --panel-border: var(--line-on-navy);
    --ad-frame-bg: var(--color-arctic-white); /* keeps ads distinct from navy content */
    --band-bg: var(--surface-on-navy);        /* band reads as a raised strip on navy */
    --band-border: var(--line-on-navy);
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--page-text);
  background: var(--page-bg);
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--page-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--page-link-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--page-focus);
  outline-offset: 2px;
}

/* Light surfaces always get navy focus rings, whatever the theme */
.site-header :focus-visible,
.converter :focus-visible,
.ad-slot :focus-visible,
.skip-link:focus-visible {
  outline-color: var(--color-navy);
}

code {
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

.currency-amount {
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  color: var(--color-navy);
  background: var(--color-white);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-control);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-1);
}

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

/* ---------- Header ---------- */

/* The header is always white so the logo keeps its own colours in both themes. */
.site-header {
  color-scheme: light;
  background: var(--color-white);
  border-top: 4px solid var(--color-red);
  color: var(--color-navy);
}

.header-inner {
  display: flex;
  flex-wrap: wrap; /* on the narrowest phones the links drop below the logo */
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: 4rem;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.logo img {
  display: block;
  width: auto;
  height: 2.25rem;
}

.site-nav {
  display: flex;
  margin-left: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

/* Links also in the footer; shown in the header only on wider screens */
.site-nav .nav-secondary {
  display: none;
}

.site-nav a:hover {
  color: var(--color-red);
  text-decoration: underline;
}

/* ---------- Hero ---------- */

.hero-band {
  background: var(--color-navy);
  color: var(--color-white);
  padding-bottom: var(--space-6); /* the converter overlaps this space */
}

.hero {
  padding: var(--space-3) 0 var(--space-2);
}

.hero h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.hero h1::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: var(--space-2);
  background: var(--color-red);
  border-radius: 2px;
}

.lead {
  margin-top: var(--space-1);
  color: var(--color-cool-grey);
  font-size: 1.0625rem;
  max-width: 36rem;
}

/* ---------- Converter panel ---------- */

.converter {
  position: relative;
  margin-top: calc(-1 * var(--space-6) + var(--space-1));
  color-scheme: light;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-cool-grey);
  border-radius: var(--radius-panel);
}

.converter-inputs {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
}

.field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.field label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.label-note {
  font-weight: 400;
  color: var(--color-slate);
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: var(--color-navy);
  background-color: var(--color-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  transition: border-color 0.12s ease;
}

input[type="text"]:hover,
input[type="date"]:hover,
select:hover {
  border-color: var(--color-slate);
}

input[type="text"]:focus,
input[type="date"]:focus,
select:focus {
  border-color: var(--color-navy);
  outline: 2px solid var(--color-navy);
  outline-offset: 0;
}

#amount {
  font-size: 1.375rem;
  font-weight: 600;
}

#amount[aria-invalid="true"] {
  border-color: var(--color-red);
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2317324D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* Currency pair: stacked on phones, side by side on wider screens */

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  justify-items: stretch;
}

.swap {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--color-white);
  background: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.swap:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
}

.swap:active {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.swap-icon {
  /* Vertical arrows when stacked */
  transform: rotate(90deg);
}

.date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.date-row input[type="date"] {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
  flex: 0 1 auto;
}

.hint {
  font-size: 0.875rem;
  color: var(--color-slate);
}

.hint.is-error {
  color: var(--color-red);
  font-weight: 500;
}

.btn-text {
  min-height: 44px;
  padding: 0 var(--space-1);
  font: inherit;
  font-weight: 500;
  color: var(--color-navy);
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.btn-text:hover {
  color: var(--color-red);
}

.btn-secondary {
  min-height: 44px;
  padding: 0 var(--space-2);
  font: inherit;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
}

.btn-secondary[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* Result */

.result {
  position: relative;
  padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 12px);
  background: var(--color-arctic-white);
  border-top: 1px solid var(--color-cool-grey);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

.result::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  bottom: var(--space-2);
  width: 4px;
  background: var(--color-red);
  border-radius: 2px;
}

.result:focus {
  outline: none;
}

.result:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: -3px;
}

.result-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-slate);
  overflow-wrap: anywhere;
}

.result-value {
  margin-top: 0.25rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 1.2em;
  overflow-wrap: anywhere;
}

.result[aria-busy="true"] .result-value {
  color: var(--color-slate);
}

.result-rate {
  margin-top: var(--space-1);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.result-meta {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-slate);
}

.result-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: 1.5rem;
  margin-top: var(--space-1);
  font-size: 0.875rem;
}

.result-status:empty {
  margin-top: 0;
}

.status-text:empty {
  display: none;
}

.status-text.is-loading {
  color: var(--color-slate);
}

.status-text.is-loading::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.5em;
  vertical-align: -0.05em;
  border: 2px solid var(--color-cool-grey);
  border-top-color: var(--color-navy);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.status-text.is-error {
  color: var(--color-red);
  font-weight: 500;
}

.status-text.is-warning {
  color: var(--color-navy);
  font-weight: 500;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.rate-notes {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  color: var(--page-muted);
}

.browser-time {
  margin: var(--space-3) 0 0;
  font-size: 0.875rem;
  color: var(--page-muted);
}

.browser-time time {
  color: var(--page-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Advertising slot (see index.html) ---------- */
/* A light frame keeps paid placements visually distinct from editorial content in both themes. */

.ad-slot {
  margin: var(--space-4) 0 0;
  padding: var(--space-1) var(--space-2) var(--space-2);
  color-scheme: light;
  background: var(--ad-frame-bg);
  border: 1px solid var(--color-cool-grey);
  border-radius: var(--radius-panel);
  text-align: center;
}

.ad-label {
  margin-bottom: var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.ad-link {
  display: inline-block;
  max-width: 100%;
  vertical-align: top; /* no text-baseline gap under the creative */
}

.ad-link img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Editorial content ---------- */

.band {
  margin-top: var(--space-5);
  padding: var(--space-5) 0;
  background: var(--band-bg);
  border-block: 1px solid var(--band-border);
}

.content {
  padding: var(--space-5) 0 var(--space-4);
}

.content section + section {
  margin-top: var(--space-5);
}

.content h2,
.content h3,
.content strong,
.band h2,
.band strong {
  color: var(--page-heading);
}

.content h2,
.band h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.content h2::after,
.band h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-top: 0.625rem;
  background: var(--color-red);
  border-radius: 2px;
}

.content p + p,
.band p + p {
  margin-top: var(--space-2);
}

.popular-intro {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--page-heading);
}

.pair-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.pair-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-control);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.pair-links a:hover {
  color: var(--chip-hover-text);
  background: var(--chip-hover-bg);
  border-color: var(--chip-hover-bg);
}

.faq {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  padding: var(--space-1) var(--space-2) var(--space-2);
}

.faq h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  padding-top: var(--space-2);
}

.faq h3:not(:first-child) {
  margin-top: var(--space-2);
  border-top: 1px solid var(--panel-border);
}

.faq p {
  margin-top: var(--space-1);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-navy);
  border-top: 1px solid var(--line-on-navy);
  font-size: 0.875rem;
  color: var(--color-cool-grey);
}

.footer-inner {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.footer-inner a {
  display: inline-block;
  padding: 0.5rem 0;
}

.footer-small {
  font-size: 0.8125rem;
}

/* ---------- Wider screens ---------- */

/* Taller header with a larger logo once there's room; phones keep a compact
   header so the converter result stays near the top of the screen. The logo
   file is 96px tall, so 48px (3rem) is the largest it can be shown while
   staying sharp at 2x. */
@media (min-width: 48em) {
  .header-inner {
    min-height: 5.5rem;
    gap: 0 var(--space-1);
  }

  .site-nav a {
    padding: 0 var(--space-1);
    font-size: 1rem;
  }

  .site-nav .nav-secondary {
    display: inline-flex;
  }

  .logo img {
    height: 3rem;
  }
}

@media (min-width: 40em) {
  .wrap {
    padding: 0 var(--space-3);
  }

  .hero {
    padding: var(--space-5) 0 var(--space-4);
  }

  .hero-band {
    padding-bottom: calc(var(--space-6) + var(--space-2));
  }

  .converter {
    margin-top: calc(-1 * var(--space-6));
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .converter-inputs {
    padding: var(--space-3);
  }

  .result {
    padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 16px);
  }

  .result::before {
    left: var(--space-3);
    top: var(--space-3);
    bottom: var(--space-3);
  }

  .pair {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2);
  }

  .swap-icon {
    transform: none;
  }

  .result-value {
    font-size: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}