/* AU Pay Calculator: site-wide styles v1.2.3.
   Enqueued on every front-end page by the plugin. Covers the Kadence
   title band, header polish, content typography, in-content tables,
   FAQ cards, the theme footer blend and the plugin's designed footer
   (.aupay-sitefooter, printed at wp_footer).
   Palette matches assets/style.css: navy #0A2540, green #0E7A3D,
   gold #FFB800, page #F6F8FA, text #1A2B3C, muted #5A6B7C. */

: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-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Stray <br> safety net (v1.2.3) ----------
   Pages imported before AU Site Importer v1.0.4 carried the raw-HTML
   sections (hero, tools grid, steps strip) as plain post_content, and
   wpautop sprinkled <br> elements between and inside the cards at
   render time. Inside a CSS grid every <br> is a grid item, which is
   what threw the tool cards into columns 1 and 3 with every third card
   dropping to a solo centre row. Importer v1.0.4 wraps the raw HTML in
   wp:html blocks so wpautop no longer touches it; these rules hide any
   strays left on pages that have not been re-imported yet, and are
   harmless once the markup is clean. */

.aupay-tools-grid > br,
.aupay-steps > br,
.aupay-tool-card > br,
.aupay-hero > br,
.aupay-more > br {
  display: none;
}

/* ---------- Title band (Kadence .entry-hero) ----------
   Real markup (verified on the live site, 23 Oct 2026):
   section.entry-hero.page-hero-section.entry-hero-layout-standard
     > .entry-hero-container-inner > .hero-section-overlay
       + .hero-container.site-container
         > header.entry-header.page-title > h1.entry-title
   The front page body carries the .home class. */

body.home .entry-hero {
  display: none;
}

.entry-hero {
  background: #EDF2F7;
  border-bottom: 1px solid var(--aupay-border);
}

.entry-hero .entry-hero-container-inner {
  min-height: 0;
}

.entry-hero .hero-container {
  padding-top: 26px;
  padding-bottom: 26px;
}

.entry-hero .entry-header {
  margin: 0;
}

.entry-hero .entry-title {
  margin: 0;
  font-family: var(--aupay-font);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--aupay-navy);
}

.entry-hero + .content-area {
  margin-top: 3rem;
}

body.home .content-area {
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .entry-hero .hero-container {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .entry-hero .entry-title {
    font-size: 27px;
  }

  .entry-hero + .content-area {
    margin-top: 2rem;
  }
}

/* ---------- Header polish (Kadence #masthead) ---------- */

#masthead {
  box-shadow:
    0 1px 0 rgba(10, 37, 64, 0.07),
    0 10px 26px -20px rgba(10, 37, 64, 0.45);
}

#masthead .site-title {
  font-family: var(--aupay-font);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

#masthead .main-navigation .primary-menu-container > ul > li > a,
#masthead .header-menu-container ul > li > a {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 600;
}

/* One-row header menu (v1.2.3). Live Kadence markup:
   header#masthead .site-main-header-inner-wrap (1120px container,
   --global-content-width) > .site-header-main-section-right
   > nav#site-navigation.main-navigation.header-navigation
   > .primary-menu-container.header-menu-container > ul#primary-menu.menu
   > li.menu-item > a. The 200px logo plus all 10 top-level items did not
   fit on one row at the theme's inherited ~17px font with 0.6em side
   padding, so .header-navigation .menu (flex-wrap: wrap) dropped items
   to a second row. Tightening the top-level links to 15px with 10px
   side padding brings the menu to roughly 830px, inside the ~900px the
   row leaves next to the logo. Scoped with Kadence's own selector chain
   so only top-level links change; the #masthead ID outranks the theme's
   inline customizer rule. The mobile drawer (.mobile-menu-container)
   is not matched. */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
  letter-spacing: normal;
}

#masthead .main-navigation .primary-menu-container > ul > li > a::after,
#masthead .header-menu-container ul > li > a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--aupay-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

#masthead .main-navigation .primary-menu-container > ul > li > a:hover::after,
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a::after,
#masthead .header-menu-container ul > li > a:hover::after,
#masthead .header-menu-container ul > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* ---------- Content typography ---------- */

.entry-content {
  font-family: var(--aupay-font);
  color: var(--aupay-ink);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.entry-content p {
  margin: 0 0 1.15em;
}

.entry-content h2 {
  margin: 1.7em 0 0.65em;
  padding-bottom: 10px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--aupay-navy);
  border-bottom: 2px solid var(--aupay-border);
}

.entry-content h2:first-child {
  margin-top: 0.2em;
}

.entry-content h3 {
  position: relative;
  margin: 1.45em 0 0.55em;
  padding-left: 13px;
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--aupay-navy);
}

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

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
}

.entry-content li {
  margin-bottom: 0.4em;
}

.entry-content li::marker {
  color: var(--aupay-green);
  font-weight: 700;
}

.entry-content a {
  color: var(--aupay-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(14, 122, 61, 0.45);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.entry-content a:hover {
  color: var(--aupay-navy);
  text-decoration-color: var(--aupay-navy);
}

.entry-content strong {
  color: var(--aupay-navy);
}

.entry-content blockquote {
  margin: 1.4em 0;
  padding: 16px 20px;
  background: #F9FBFC;
  border-left: 4px solid var(--aupay-gold);
  border-radius: 0 10px 10px 0;
  color: var(--aupay-ink);
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- Content tables ---------- */

.aupay-tablewrap {
  margin: 1.3em 0 1.5em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border: 1px solid var(--aupay-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04);
}

.aupay-tablewrap table {
  width: 100%;
  min-width: 480px;
  margin: 0;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}

.aupay-tablewrap thead th {
  padding: 11px 14px;
  background: var(--aupay-navy);
  color: #ffffff;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.aupay-tablewrap tbody th,
.aupay-tablewrap tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--aupay-border);
  text-align: left;
  vertical-align: top;
}

.aupay-tablewrap tbody tr:nth-child(even) {
  background: #F7FAFC;
}

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

/* First column is the row label on every content table on this site;
   the remaining columns carry figures, so they right-align. */
.aupay-tablewrap th:not(:first-child),
.aupay-tablewrap td:not(:first-child) {
  text-align: right;
}

.aupay-tablewrap td {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .aupay-tablewrap table {
    font-size: 13.5px;
  }

  .aupay-tablewrap thead th,
  .aupay-tablewrap tbody th,
  .aupay-tablewrap tbody td {
    padding: 8px 11px;
  }
}

/* ---------- FAQ cards (.aupay-faq wrapper added by the content filter) ---------- */

.aupay-faq h3 {
  margin: 20px 0 0;
  padding: 15px 18px 6px;
  background: #ffffff;
  border: 1px solid var(--aupay-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font-size: 17px;
}

.aupay-faq h3::before {
  display: none;
}

.aupay-faq h3 + p {
  margin: 0;
  padding: 0 18px 16px;
  background: #ffffff;
  border: 1px solid var(--aupay-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: #33475C;
}

.aupay-faq > p {
  margin-top: 1.15em;
}

/* ---------- Theme footer blend (Kadence .site-footer) ----------
   The plugin prints its own designed footer (.aupay-sitefooter) at
   wp_footer. The Kadence footer row above it (the assigned Footer
   menu) is styled into the same navy band so the two read as one
   footer, instead of hiding theme markup we cannot inspect safely. */

.site-footer {
  background: var(--aupay-navy);
  color: #C9D6E4;
  font-family: var(--aupay-font);
  font-size: 14px;
}

.site-footer a {
  color: #E7EEF5;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--aupay-gold);
}

.site-footer .menu,
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .site-footer-row {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ---------- Designed site footer (.aupay-sitefooter) ---------- */

.aupay-sitefooter {
  background:
    radial-gradient(620px 300px at 92% -20%, rgba(255, 184, 0, 0.10), rgba(255, 184, 0, 0) 60%),
    linear-gradient(180deg, #0C2C4E 0%, var(--aupay-navy) 90px);
  color: #C9D6E4;
  font-family: var(--aupay-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.aupay-footer-inner {
  max-width: 1290px;
  margin: 0 auto;
  padding: 48px 24px 0;
}

.aupay-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  padding-bottom: 38px;
}

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

@media (min-width: 1024px) {
  .aupay-footer-grid {
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 40px;
  }
}

.aupay-footer-brandline {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
}

.aupay-footer-logo {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
}

.aupay-footer-wordmark {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #ffffff;
}

.aupay-footer-au {
  color: var(--aupay-gold);
}

.aupay-footer-about {
  margin: 0 0 14px;
  max-width: 340px;
  color: #B9CBDC;
}

.aupay-footer-mail {
  margin: 0;
}

.aupay-footer-mail a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--aupay-gold);
  padding-bottom: 1px;
}

.aupay-footer-mail a:hover {
  color: var(--aupay-gold);
}

.aupay-footer-heading {
  margin: 2px 0 13px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
}

.aupay-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aupay-footer-links li {
  margin-bottom: 8px;
}

.aupay-footer-links a {
  color: #C9D6E4;
  text-decoration: none;
  transition: color 0.15s ease;
}

.aupay-footer-links a:hover {
  color: var(--aupay-gold);
}

.aupay-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.aupay-footer-copy {
  margin: 0;
  font-size: 13.5px;
  color: #9FB4C8;
}

.aupay-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aupay-footer-legal a {
  font-size: 13.5px;
  font-weight: 600;
  color: #E7EEF5;
  text-decoration: none;
}

.aupay-footer-legal a:hover {
  color: var(--aupay-gold);
}

@media (max-width: 639px) {
  .aupay-footer-inner {
    padding: 38px 20px 0;
  }

  .aupay-footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  #masthead .main-navigation .primary-menu-container > ul > li > a::after,
  #masthead .header-menu-container ul > li > a::after,
  .aupay-footer-links a,
  .entry-content a {
    transition: none;
  }
}

/* ---------- Homepage tools grid measure (v1.2.1) ----------
   The tools and how-it-works sections sit in the homepage content,
   outside the calculator card, and the hero above them is a full-width
   panel by design. On wide screens the sections used to stretch with
   the fullwidth page layout, so the grid cards ballooned to about
   600px with big empty gaps. Both sections are now held to the same
   1120px measure as the rest of the site, centred, with 20px side
   padding for small screens. Selectors are scoped under .aupay-tools
   and .aupay-how so they beat the base rules in assets/style.css
   (specificity 0-2-0 against 0-1-0) and the theme's underlined
   in-content links (.entry-content a, 0-1-1), whatever order the
   stylesheets load in. Grid items stretch by default, so cards in a
   row are equal height, and the card's ::after affordance is pinned
   to the bottom with margin-top: auto. */

.aupay-tools,
.aupay-how {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}

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

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

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

.aupay-tools .aupay-tool-card {
  padding: 22px;
  text-decoration: none;
}

.aupay-tools .aupay-tool-card .aupay-tool-name,
.aupay-tools .aupay-tool-card .aupay-tool-desc {
  text-decoration: none;
}

.aupay-tools .aupay-tool-card::after {
  content: "Open calculator \2192";
  margin-top: auto;
  padding-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--aupay-green);
}

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

.aupay-tools .aupay-tool-icon {
  width: 48px;
  height: 48px;
}