/* Shared mobile/desktop polish. Loaded last by site-controls.js so it can
   fill gaps in per-page <style> blocks without editing each page. */

/* --- Related guides: tool pages paste the blog markup without the CSS --- */
.related-guides {
  margin: 48px 0 8px;
  padding-top: 28px;
  border-top: 2px solid #e2e8f0;
  max-width: 100%;
}
.related-guides h2 {
  margin: 0 0 16px;
  font-size: 1.45rem;
  font-weight: 800;
  color: #7F1D16;
  line-height: 1.25;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
a.related-card,
.related-card {
  display: block;
  background: #fff;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  min-width: 0;
  box-sizing: border-box;
}
a.related-card:hover,
.related-card:hover {
  border-color: #48bb78;
  text-decoration: none;
}
a.related-card h3,
.related-card h3,
a.related-card h4,
.related-card h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #7F1D16;
  margin: 0 0 4px;
  line-height: 1.35;
}
a.related-card p,
.related-card p {
  font-size: 0.875rem;
  color: #4a5568;
  margin: 0;
  line-height: 1.5;
}
/* Next-steps blocks that sit outside .container, flush with the viewport. */
body > section:has(> .related-guides) {
  box-sizing: border-box;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 8px 24px 48px;
}
@media (max-width: 640px) {
  .related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Article gutters: 16px outliers up to the 24px standard; 36px layout cards down to 24px --- */
@media (max-width: 640px) {
  .page-wrap:has(.article-wrap:not(.content)),
  .breadcrumb:has(+ .page-wrap .article-wrap:not(.content)) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width: 800px) {
  main.layout {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  main.layout > .article {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* site-controls pads every header; article titles should share the body gutter. */
  article > header,
  .article > header {
    padding: 0 !important;
  }
}

/* --- Contrast: white on #48bb78 is 2.43:1. #276749 keeps the green and clears 4.5:1 --- */
a.cta-btn:not(.secondary),
button.cta-btn:not(.secondary) {
  background-color: #276749;
  color: #fff;
}
a.cta-btn:not(.secondary):hover,
a.cta-btn:not(.secondary):focus-visible,
button.cta-btn:not(.secondary):hover,
button.cta-btn:not(.secondary):focus-visible {
  background-color: #1c4532;
  color: #fff;
}

/* Grey breadcrumb, meta and comment text was #718096 / #a0aec0 (about 2.2–3.8:1). */
.breadcrumb,
.article-meta,
.page-header p,
article .meta,
.layout .meta,
.image-caption,
.article-figure figcaption,
.sau-comments .subtitle,
.sau-comment-date,
.sau-count,
.sau-reply-btn button,
.sau-no-comments,
.sau-loading,
.sau-comment-form span {
  color: #4a5568;
}

/* Body-ish text that was under 14px: TOC, reading time, comments, tooltips. */
.breadcrumb,
.toc a,
.toc-sidebar .toc a,
.toc-inline a,
.toc-inline ol,
.toc-inline summary,
.article-meta,
.article-meta span,
article .meta,
.layout .meta,
.blog-card .meta,
.image-caption,
.article-figure figcaption,
.disclaimer,
.tooltip-text,
.tt-toggle,
.sau-comments .subtitle,
.sau-comment-date,
.sau-comment-name,
.sau-count,
.sau-reply-btn button,
.sau-no-comments,
.sau-loading,
.sau-delete-btn,
.sau-pending .sau-pending-label,
.sau-comment-form span {
  font-size: 0.875rem;
}
.tooltip-text {
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
/* Comments widget sets a few of these inline. */
.sau-comment-date,
.sau-comments .subtitle,
.sau-count,
.sau-reply-btn button,
.sau-no-comments,
.sau-loading,
.sau-delete-btn,
.sau-pending .sau-pending-label,
.sau-comment-form span {
  font-size: 0.875rem !important;
  color: #4a5568 !important;
}

/* Tap height for source lists and in-article table/list links. Desktop stays put. */
@media (max-width: 640px) {
  ul.sources a,
  .sources a,
  h2[id$="sources"] + ul a,
  h2[id$="sources"] + ol a,
  article li > a,
  .article li > a,
  .article-wrap li > a,
  article td a,
  .article td a,
  .payment-table a,
  .content-table a {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 20px;
    min-height: 44px;
  }
  article li > a.related-card,
  .article li > a.related-card,
  .article-wrap li > a.related-card {
    padding: 16px 18px;
    line-height: 1.35;
    min-height: 44px;
  }
}

/* --- Contrast: darken brand colours just enough for WCAG AA --- */

/* Hub section labels keep their hue. 0.78rem gold/green/grey was about 2.4–4.0:1. */
html:has(link[rel="canonical"][href$="/family"]) .section-label { color: #8a5a00; }
html:has(link[rel="canonical"][href$="/health"]) .section-label { color: #276749; }
html:has(link[rel="canonical"][href$="/visas"]) .section-label { color: #6b46c1; }
html:has(link[rel="canonical"][href$="/settling-in"]) .section-label { color: #4a5568; }

.section-label,
.cross-tag,
.tool-tag,
.pillar-tag,
.coming-badge,
.latest-pillar,
.eb-next-steps .eb-kind,
.source-note,
label small,
.updated,
.muted,
.fine-print,
.gauge-labels,
.pay-day,
.cb-cost {
  font-size: 0.875rem;
}
label small,
.updated,
.muted,
.fine-print,
.reason p,
.gauge-labels,
.pay-day,
.cb-cost,
.score-label,
.section-title p,
.source-note,
.tool-card p,
.cross-card p,
.blog-card p,
.latest-card p,
.image-caption,
.image-caption a,
p.disclaimer {
  color: #4a5568;
}
.tag-family { color: #8a5a00; background: #fffbeb; }
.tag-health { color: #276749; background: #f0fff4; }
.tag-visas { color: #6b46c1; background: #faf5ff; }

.tool-icon[style*="d69e2e"],
.pillar-icon[style*="d69e2e"] { color: #8a5a00 !important; }
.tool-icon[style*="38a169"],
.pillar-icon[style*="38a169"],
.latest-pillar[style*="38a169"],
.pillar-tag[style*="38a169"] { color: #276749 !important; }
.tool-icon[style*="805ad5"],
.pillar-icon[style*="805ad5"],
.latest-pillar[style*="805ad5"],
.pillar-tag[style*="805ad5"] { color: #6b46c1 !important; }
.pillar-icon[style*="e53e3e"],
.latest-pillar[style*="e53e3e"],
.pillar-tag[style*="e53e3e"] { color: #c53030 !important; }
.latest-pillar[style*="dd6b20"],
.pillar-tag[style*="dd6b20"] { color: #9c4221 !important; }

/* Inline #718096 (disclaimers, figcaptions, home intro) is 3.8–4.0:1 on off-white. */
[style*="color:#718096"],
[style*="color: #718096"] {
  color: #4a5568 !important;
}

.blog-card .pillar-tag,
.checkbox-item .cb-cost {
  font-size: 0.875rem;
  color: #4a5568;
}
.blog-card .pillar-tag[style*="38a169"] { color: #276749 !important; }
.blog-card .pillar-tag[style*="805ad5"] { color: #6b46c1 !important; }
.blog-card .pillar-tag[style*="e53e3e"] { color: #c53030 !important; }
.blog-card .pillar-tag[style*="dd6b20"] { color: #9c4221 !important; }

.coming-card,
.pillar-card.coming-soon { opacity: 1; }
.coming-card h3 { color: #2d3748; }
.coming-card p,
.coming-badge,
.pillar-card.coming-soon .pillar-meta { color: #4a5568; }
.coming-badge { background: #e2e8f0; }
.tick { color: #276749; }

/* Hero copy sits on a blue gradient. #F8C9C5 was about 4:1 on the light end. */
.hero p,
.hero-sub,
.hero .breadcrumb { color: #f7fafc; }
.hero-badge,
.hero .badge {
  color: #fff;
  background: rgba(127, 29, 22, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Tool buttons: white text needs a darker fill. Same hue, past 4.5:1. */
html:has(link[rel="canonical"][href$="/family/school-comparison"]) .search-btn {
  background-color: #8a5a00;
  color: #fff;
}
html:has(link[rel="canonical"][href$="/family/school-comparison"]) .search-btn:hover,
html:has(link[rel="canonical"][href$="/family/school-comparison"]) .search-btn:focus-visible {
  background-color: #744210;
  color: #fff;
}
html:has(link[rel="canonical"][href$="/health/health-insurance"]) .search-btn,
html:has(link[rel="canonical"][href$="/health/mental-health"]) .search-btn,
.add-child-btn {
  background-color: #276749;
  color: #fff;
}
html:has(link[rel="canonical"][href$="/health/health-insurance"]) .search-btn:hover,
html:has(link[rel="canonical"][href$="/health/mental-health"]) .search-btn:hover,
.add-child-btn:hover {
  background-color: #22543d;
  color: #fff;
}
html:has(link[rel="canonical"][href$="/health/bulk-billing-finder"]) .search-btn,
.remove-child-btn {
  background-color: #c53030;
  color: #fff;
}
html:has(link[rel="canonical"][href$="/health/bulk-billing-finder"]) .search-btn:hover,
.remove-child-btn:hover {
  background-color: #9b2c2c;
  color: #fff;
}
html:has(link[rel="canonical"][href$="/contact"]) .submit-btn {
  background-color: #276749;
  color: #fff;
}
html:has(link[rel="canonical"][href$="/contact"]) .submit-btn:hover,
html:has(link[rel="canonical"][href$="/contact"]) .submit-btn:focus-visible {
  background-color: #22543d;
  color: #fff;
}

/* Blog filters set category colours inline. Darken each so text and the active fill clear 4.5:1. */
.filter-btn[data-color="#38a169"] { color: #276749 !important; border-color: #276749 !important; }
.filter-btn.active[data-color="#38a169"] { background-color: #276749 !important; border-color: #276749 !important; color: #fff !important; }
.filter-btn[data-color="#805ad5"] { color: #6b46c1 !important; border-color: #6b46c1 !important; }
.filter-btn.active[data-color="#805ad5"] { background-color: #6b46c1 !important; border-color: #6b46c1 !important; color: #fff !important; }
.filter-btn[data-color="#e53e3e"] { color: #c53030 !important; border-color: #c53030 !important; }
.filter-btn.active[data-color="#e53e3e"] { background-color: #c53030 !important; border-color: #c53030 !important; color: #fff !important; }
.filter-btn[data-color="#dd6b20"] { color: #9c4221 !important; border-color: #9c4221 !important; }
.filter-btn.active[data-color="#dd6b20"] { background-color: #9c4221 !important; border-color: #9c4221 !important; color: #fff !important; }

.eb-next-steps .eb-kind { color: #4a5568; }
.eb-ask .eb-cta { background: #9c4221; }
.eb-ask .eb-cta:hover { background: #7b341e; }
.eb-calc .eb-cta { background: #276749; }
.eb-calc .eb-cta:hover { background: #22543d; }

/* Simple layout-template footer: blue links on navy were about 3:1. */
body:has(main.layout) footer a { color: #FDECEA; }

/* Header links inherit the header colour instead of sitting blue-on-navy. */
th a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.tooltip-icon {
  width: 22px;
  height: 22px;
  font-size: 0.875rem;
  line-height: 1;
}

/* The 640px table floor is 4px wider than the visa-cost column at 1280. */
.site-table-scroll table { min-width: 0; }

/* Tap height for link-only paragraphs and controls. Not inline links in a sentence. */
@media (max-width: 900px) {
  a.sau-tap-link {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 44px;
    min-width: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }
  .fast-card > a,
  .filter-btn,
  .add-child-btn,
  .toc summary,
  .toc-inline summary {
    box-sizing: border-box;
    min-height: 44px;
  }
  .fast-card > a {
    display: inline-flex;
    align-items: center;
  }
  .toc summary,
  .toc-inline summary {
    display: flex;
    align-items: center;
  }
}

/* Link visibility: preserve dark-on-light link styles elsewhere. The Centrelink
   introduction and help popups have dark backgrounds in every current template. */
.centrelink-intro a:is(:link, :visited) {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  font-weight: 600;
}
.centrelink-intro a:hover { text-decoration-thickness: 3px; }
.centrelink-intro .payment-finder-actions { margin: 22px 0 18px; }
.centrelink-intro a.payment-finder-cta:is(:link, :visited) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
  padding: 12px 24px;
  border-radius: 10px;
  background: #FDECEA;
  color: #7F1D16 !important;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.centrelink-intro a.payment-finder-cta:hover { background: #fff; }
.tooltip-text a:is(:link, :visited) {
  color: #F8C9C5 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tooltip-text a:hover { color: #fff !important; }

/* Two colours keep the keyboard indicator visible on both light and dark
   surfaces. Outline does not alter layout; the outer navy ring covers light UI. */
a[href]:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #7F1D16 !important;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.centrelink-intro a.payment-finder-cta:focus-visible { border-radius: 10px; }
@media (max-width: 500px) {
  .centrelink-intro a.payment-finder-cta { width: 100%; }
}

/* The shared CTA boxes/sections use navy gradients. Inline prose links need
   their own colour because several pages override them with dark-blue styles. */
.cta-box p a:not(.cta-btn):not(.btn):is(:link, :visited),
.cta-section p a:is(:link, :visited) {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-box p a:not(.cta-btn):not(.btn):hover,
.cta-section p a:hover { text-decoration-thickness: 2px; }

/* Accordion bodies clip outer rings: keep the mobile-menu focus indicator
   inside each full-width link so all four edges remain visible. */
a.site-mobile-sublink[href]:focus-visible {
  outline-offset: -4px !important;
  box-shadow: none !important;
}