/* AU Pay Calculator: design system v1.2.4.
   All classes are prefixed aupay- so they cannot collide with the theme.
   Palette: deep navy #0A2540, Australian green #0E7A3D, gold #FFB800,
   page #F6F8FA, text #1A2B3C, muted #5A6B7C, borders #E3EAF1.
   The DOM is built by assets/calculators.js and must not change:
   .aupay-calc > .aupay-title, .aupay-form, .aupay-results, .aupay-note,
   .aupay-disclaimer. Headline result rows are targeted per tool via the
   data-aupay-tool attribute plus row position, CSS only.
   v1.2.4 shell: the card is one grid at every width. On desktop the form
   and results share a body row (results panel stretched full height) and
   the note and disclaimer form a full-width footer under both columns;
   below 900px the same areas stack in DOM order. The fields area is a
   wrapping flex row, so paired fields share a row evenly, a field left
   without a partner grows to the full form width instead of stranding a
   half-empty cell, and checkbox rows always span the full width. */

:root {
  --aupay-navy: #0A2540;
  --aupay-navy-soft: #123A63;
  --aupay-green: #0E7A3D;
  --aupay-gold: #FFB800;
  --aupay-page: #F6F8FA;
  --aupay-ink: #1A2B3C;
  --aupay-muted: #5A6B7C;
  --aupay-border: #E3EAF1;
  --aupay-field-border: #C7D3DF;
  --aupay-field-bg: #F9FBFC;
  --aupay-panel-bg: #EFFAF3;
  --aupay-panel-border: #D7EDDF;
  --aupay-panel-line: #B7D8C4;
  --aupay-radius: 16px;
  --aupay-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.aupay-calc,
.aupay-hero,
.aupay-tools,
.aupay-how {
  font-family: var(--aupay-font);
  color: var(--aupay-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Calculator card ---------- */

.aupay-calc {
  max-width: 1060px;
  margin: 1.5em auto;
  padding: 26px 26px 22px;
  background: #ffffff;
  border: 1px solid var(--aupay-border);
  border-radius: var(--aupay-radius);
  box-shadow:
    0 1px 2px rgba(10, 37, 64, 0.05),
    0 16px 36px -16px rgba(10, 37, 64, 0.22);
  font-size: 16px;
  line-height: 1.45;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "form"
    "results"
    "note"
    "disclaimer";
  row-gap: 16px;
}

.aupay-calc *,
.aupay-hero *,
.aupay-tools *,
.aupay-how * {
  box-sizing: border-box;
}

.aupay-title {
  grid-area: title;
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--aupay-navy);
  letter-spacing: -0.01em;
}

.aupay-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--aupay-green), var(--aupay-gold));
}

/* ---------- Form ---------- */

.aupay-form {
  grid-area: form;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-content: start;
}

/* One field per row on narrow screens; from 560px fields pair up at
   half width and a field without a partner grows to the full row, so
   no half-empty orphan rows. Checkbox rows always span full width. */
.aupay-field {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 560px) {
  .aupay-field {
    flex-basis: calc(50% - 8px);
  }

  .aupay-field:has(> .aupay-check) {
    flex-basis: 100%;
  }
}

.aupay-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--aupay-navy);
}

.aupay-field input[type="number"],
.aupay-field select {
  width: 100%;
  height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--aupay-ink);
  background: var(--aupay-field-bg);
  border: 1px solid var(--aupay-field-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.aupay-field input[type="number"]:hover,
.aupay-field select:hover {
  border-color: #A9BED2;
}

.aupay-field input[type="number"]:focus,
.aupay-field select:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--aupay-navy);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.16);
}

.aupay-field input[type="number"]:focus-visible,
.aupay-field select:focus-visible {
  outline: none;
  background: #ffffff;
  border-color: var(--aupay-navy);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.22);
}

.aupay-field .aupay-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 0;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--aupay-ink);
  background: var(--aupay-field-bg);
  border: 1px solid var(--aupay-border);
  border-radius: 10px;
  cursor: pointer;
}

.aupay-field .aupay-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--aupay-green);
  cursor: pointer;
}

.aupay-field .aupay-check input:focus-visible {
  outline: 2px solid var(--aupay-navy);
  outline-offset: 2px;
}

.aupay-field .aupay-check:has(input:focus-visible) {
  border-color: var(--aupay-navy);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.16);
}

/* ---------- Results panel ---------- */

.aupay-results {
  grid-area: results;
  padding: 22px 24px;
  background: var(--aupay-panel-bg);
  border: 1px solid var(--aupay-panel-border);
  border-radius: 14px;
}

.aupay-table {
  width: 100%;
  border-collapse: collapse;
}

.aupay-table th,
.aupay-table td {
  padding: 9px 0;
  border-bottom: 1px dotted var(--aupay-panel-line);
  vertical-align: middle;
}

.aupay-table th {
  padding-right: 12px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: #41607C;
}

.aupay-table td {
  padding-left: 12px;
  text-align: right;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--aupay-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.aupay-table tr:last-child th,
.aupay-table tr:last-child td {
  border-bottom: none;
}

/* Headline figure: last row is the summary on these tools. */
.aupay-calc[data-aupay-tool="sick_leave"] .aupay-table tr:last-child th,
.aupay-calc[data-aupay-tool="annual_leave"] .aupay-table tr:last-child th,
.aupay-calc[data-aupay-tool="superannuation"] .aupay-table tr:last-child th,
.aupay-calc[data-aupay-tool="salary"] .aupay-table tr:last-child th,
.aupay-calc[data-aupay-tool="payg"] .aupay-table tr:last-child th,
.aupay-calc[data-aupay-tool="wage"] .aupay-table tr:last-child th {
  font-weight: 700;
  color: var(--aupay-navy);
  border-top: 2px solid rgba(10, 37, 64, 0.55);
  padding-top: 13px;
}

.aupay-calc[data-aupay-tool="sick_leave"] .aupay-table tr:last-child td,
.aupay-calc[data-aupay-tool="annual_leave"] .aupay-table tr:last-child td,
.aupay-calc[data-aupay-tool="superannuation"] .aupay-table tr:last-child td,
.aupay-calc[data-aupay-tool="salary"] .aupay-table tr:last-child td,
.aupay-calc[data-aupay-tool="payg"] .aupay-table tr:last-child td,
.aupay-calc[data-aupay-tool="wage"] .aupay-table tr:last-child td {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  border-top: 2px solid rgba(10, 37, 64, 0.55);
  padding-top: 13px;
}

/* Headline figure mid-table on these tools:
   income tax row 4 = income after tax, bonus tax row 3 = bonus after tax,
   pay calculator row 6 = take-home pay per year. */
.aupay-calc[data-aupay-tool="income_tax"] .aupay-table tr:nth-child(4) th,
.aupay-calc[data-aupay-tool="bonus_tax"] .aupay-table tr:nth-child(3) th,
.aupay-calc[data-aupay-tool="pay_calculator"] .aupay-table tr:nth-child(6) th {
  font-weight: 700;
  color: var(--aupay-navy);
}

.aupay-calc[data-aupay-tool="income_tax"] .aupay-table tr:nth-child(4) td,
.aupay-calc[data-aupay-tool="bonus_tax"] .aupay-table tr:nth-child(3) td,
.aupay-calc[data-aupay-tool="pay_calculator"] .aupay-table tr:nth-child(6) td {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Card footer: the per-tool note and the standing disclaimer sit in
   full-width rows under the form/results body, separated from it by a
   hairline on the note. */
.aupay-note {
  grid-area: note;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid var(--aupay-border);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--aupay-muted);
}

.aupay-disclaimer {
  grid-area: disclaimer;
  margin: -8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--aupay-muted);
}

/* When a tool returns no note, the JS hides .aupay-note with an inline
   display:none; the disclaimer then carries the footer hairline. */
.aupay-calc:has(> .aupay-note[style*="display: none"]) .aupay-disclaimer {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--aupay-border);
}

/* Desktop shell: form and results share one body row at roughly
   1fr / 1.05fr with a 28px gap; the results panel stretches to the
   full height of the row while its table stays at the top. The title,
   note and disclaimer areas are declared on the base rules above. */
@media (min-width: 900px) {
  .aupay-calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      "title title"
      "form results"
      "note note"
      "disclaimer disclaimer";
    column-gap: 28px;
    padding: 28px 30px 24px;
  }

  .aupay-results {
    align-self: stretch;
  }
}

@media (max-width: 480px) {
  .aupay-calc {
    padding: 20px 18px 16px;
  }

  .aupay-results {
    padding: 18px;
  }

  .aupay-table td {
    white-space: normal;
  }

  .aupay-calc[data-aupay-tool="sick_leave"] .aupay-table tr:last-child td,
  .aupay-calc[data-aupay-tool="annual_leave"] .aupay-table tr:last-child td,
  .aupay-calc[data-aupay-tool="superannuation"] .aupay-table tr:last-child td,
  .aupay-calc[data-aupay-tool="salary"] .aupay-table tr:last-child td,
  .aupay-calc[data-aupay-tool="payg"] .aupay-table tr:last-child td,
  .aupay-calc[data-aupay-tool="wage"] .aupay-table tr:last-child td,
  .aupay-calc[data-aupay-tool="income_tax"] .aupay-table tr:nth-child(4) td,
  .aupay-calc[data-aupay-tool="bonus_tax"] .aupay-table tr:nth-child(3) td,
  .aupay-calc[data-aupay-tool="pay_calculator"] .aupay-table tr:nth-child(6) td {
    font-size: 25px;
  }
}

/* ---------- Buttons (content blocks and future use) ---------- */

.aupay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: var(--aupay-navy);
  border: 1px solid var(--aupay-navy);
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.aupay-btn:hover {
  background: var(--aupay-navy-soft);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(10, 37, 64, 0.5);
}

.aupay-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.35);
}

/* ---------- Homepage hero ---------- */

.aupay-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 30px;
  padding: clamp(30px, 5vw, 52px);
  border-radius: 20px;
  color: #ffffff;
  background-color: var(--aupay-navy);
  background-image:
    radial-gradient(640px 320px at 88% -10%, rgba(255, 184, 0, 0.20), rgba(255, 184, 0, 0) 60%),
    radial-gradient(760px 420px at -12% 115%, rgba(14, 122, 61, 0.50), rgba(14, 122, 61, 0) 62%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(255, 255, 255, 0) 2px 16px),
    linear-gradient(135deg, #0A2540 0%, #0D3157 58%, #0A2540 100%);
  box-shadow: 0 24px 44px -20px rgba(10, 37, 64, 0.55);
}

.aupay-hero-badge {
  display: inline-block;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aupay-navy);
  background: var(--aupay-gold);
  border-radius: 999px;
}

.aupay-hero .aupay-hero-title {
  margin: 20px 0 12px;
  max-width: 640px;
  font-size: clamp(30px, 4.6vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
}

.aupay-hero .aupay-hero-sub {
  margin: 0 0 24px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(235, 242, 248, 0.92);
}

.aupay-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aupay-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.aupay-chip::before {
  content: "\2713";
  font-weight: 800;
  color: var(--aupay-gold);
}

/* ---------- Tools grid ---------- */

.aupay-tools .aupay-section-title,
.aupay-how .aupay-section-title {
  margin: 42px 0 18px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--aupay-navy);
}

.aupay-tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .aupay-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .aupay-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.aupay-tool-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #D8E2EC;
  border-radius: var(--aupay-radius);
  box-shadow: 0 1px 3px rgba(10, 37, 64, 0.05);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* Designed hover state (v1.2.6): green tint wash, brand-green border,
   an inset green accent bar across the top, a deeper lift, the icon
   chip inverts to solid green and the title turns green. The same
   treatment serves keyboard focus, with a focus ring added. */
.aupay-tool-card:hover,
.aupay-tool-card:focus-visible {
  transform: translateY(-4px);
  background-color: #F2FAF5;
  background-image: linear-gradient(180deg, #ffffff 0%, #EFFAF3 100%);
  border-color: #0E7A3D;
  box-shadow: inset 0 3px 0 #0E7A3D, 0 16px 30px -14px rgba(10, 37, 64, 0.28);
}

.aupay-tool-card:focus-visible {
  outline: none;
  box-shadow: inset 0 3px 0 #0E7A3D, 0 16px 30px -14px rgba(10, 37, 64, 0.28), 0 0 0 3px rgba(14, 122, 61, 0.35);
}

.aupay-tool-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 7px;
  color: var(--aupay-green);
  background: var(--aupay-panel-bg);
  border-radius: 12px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.aupay-tool-card:hover .aupay-tool-icon,
.aupay-tool-card:focus-visible .aupay-tool-icon {
  background: #0E7A3D;
  color: #FFFFFF;
}

.aupay-tool-icon svg {
  width: 24px;
  height: 24px;
}

.aupay-tool-name {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--aupay-navy);
}

.aupay-tool-card:hover .aupay-tool-name,
.aupay-tool-card:focus-visible .aupay-tool-name {
  color: var(--aupay-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aupay-tool-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--aupay-muted);
}

/* ---------- How it works strip ---------- */

.aupay-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}

@media (min-width: 860px) {
  .aupay-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.aupay-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--aupay-border);
  border-radius: var(--aupay-radius);
}

.aupay-step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  font-weight: 800;
  color: var(--aupay-navy);
  background: var(--aupay-gold);
  border-radius: 50%;
}

.aupay-step .aupay-step-text {
  margin: 0;
  padding-top: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--aupay-ink);
}

@media (prefers-reduced-motion: reduce) {
  .aupay-tool-card,
  .aupay-btn,
  .aupay-field input[type="number"],
  .aupay-field select {
    transition: none;
  }

  .aupay-tool-card:hover,
  .aupay-btn:hover {
    transform: none;
  }
}

/* ---------- More calculators strip (v1.2.0) ----------
   Printed by the shortcode renderer under every calculator except the
   homepage flagship, whose page already carries the full tools grid. */

.aupay-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  max-width: 1060px;
  margin: 4px auto 30px;
  font-family: var(--aupay-font);
  color: var(--aupay-ink);
  -webkit-font-smoothing: antialiased;
}

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

.aupay-more-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aupay-muted);
}

.aupay-more-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aupay-more-link {
  display: inline-block;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--aupay-navy);
  background: #ffffff;
  border: 1px solid var(--aupay-border);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.aupay-more-link:hover {
  color: #ffffff;
  background: var(--aupay-navy);
  border-color: var(--aupay-navy);
}

.aupay-more-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.30);
}