/* site.css - dhan.com's own rules for the new pages (30 Oct 2026), loaded after dhan-look.css, public-base.css and
   public-d.css by each page (resources/views/public/d/pages/parts/meta). Not shared with smsfaudits.com: the shared look
   stays in the shared files. Everything here uses the look's own tokens; no new colours, no purple, nothing fetched.
   30 Oct 2026: the rules both sites need (the white page head, the trail's 44px links, the sticky box's height, the
   footer's logo, the facts strip on the narrowest phones, "On this page", "Reviewed by", the quiet quote, reading text,
   the Contact door) are in public-d.css now, so the two sites look the same; what is left here is dhan.com's own. */

/* ---------- touch targets: standalone links and buttons in the page at least 44px (inline links in sentences are exempt) ---------- */
.pub main a.link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pub main a.link-button .icon { width: 16px; height: 16px; }
.pub main .btn { min-height: 44px; }
.pub main .btn-sm { padding-top: 8px; padding-bottom: 8px; }

/* a link inside a sentence is underlined, so it is never known by colour alone (WCAG 1.4.1) */
.pub main p a:not([class]), .pub main li a:not([class]), .pub main dd a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; }

/* ---------- reading ---------- */
.readable.is-lead { font-size: var(--fs-read); line-height: 1.65; }
.readable.is-lead p + p { margin-top: 14px; }
.sub-title { font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.svc-section { padding-top: 56px; }
.svc-main .intro { color: var(--text); }
.list-table tbody th { width: 38%; font-weight: 600; }

/* the questions and the steps in a reading column */
.steps.is-vertical { grid-template-columns: 1fr; gap: 20px; }
.steps.is-vertical li { padding-left: 48px; }
.steps.is-vertical li::before { position: absolute; left: 0; top: 0; }
.steps.is-vertical li:not(:last-child)::after { top: 40px; bottom: -14px; left: 15px; right: auto; width: 2px; height: auto; }
.steps.is-vertical h3 { margin-top: 3px; }
.points.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* "On this page" (parts/toc) under the "At a glance" card */
.toc-nav .toc-title { margin-top: 22px; }
.glance.is-toc-only .toc-nav .toc-title { margin-top: 0; }

/* ---------- people ---------- */
/* no photos yet: a card shows the initials beside the words (a real photo, once each person agrees, takes the same place) */
.person { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.person .photo { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--border); }
.person .photo-initials { width: 72px; height: 72px; font-size: 24px; }
.check-grid { display: grid; gap: 18px; }
.photo { position: relative; }
.photo-initials { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--initials);
    color: var(--initials-text); font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.person-line { margin-bottom: 8px; color: var(--muted); }
.team-group + .team-group { margin-top: 32px; }
.team-group-title { margin-bottom: 12px; font-size: var(--fs-h3-public); font-weight: 600; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; list-style: none; }
.member { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; }
.member .initials { width: 44px; height: 44px; font-size: 14px; }
.member b { display: block; font-weight: 600; line-height: 1.3; }
.member b + span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }

/* chips that jump to a part of the page (or a topic) - each 44px tall */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chips .chip { height: auto; min-height: 44px; padding: 0 16px; color: var(--text); font-weight: 600; }
.chips .chip:hover { text-decoration: none; }
.chips .chip[aria-current="page"] { background: var(--look-top); border-color: var(--look-top); color: #fff; }

/* a profile */
.profile-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; }
.profile-photo .photo { border: 1px solid var(--look-line); border-radius: var(--radius); }
.profile-role { margin-top: 6px; color: var(--muted); font-size: 17px; font-weight: 600; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.profile-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.profile-links .btn { white-space: normal; text-align: left; }

/* ---------- parts of the pages ---------- */
/* 30 Oct 2026 (the owner's answers): the home hero's tax agent number links to the TPB register - in the facts' own
   colour, underlined, a 44px target (no offices or time zones any more: their rules are gone) */
.hero-facts a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: inherit; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero-facts a:hover { color: #fff; }

/* rows that go somewhere (Read next, public guides) */
.link-rows { display: grid; gap: 0; list-style: none; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.link-rows li + li { border-top: 1px solid var(--border); }
.link-rows a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 14px 20px; color: var(--text); }
.link-rows a:hover { background: var(--look-soft); color: var(--text); text-decoration: none; }
.link-rows b { display: block; font-weight: 600; }
.link-rows b + span { display: block; color: var(--muted); font-size: 14px; }
.link-rows .go { color: var(--muted); }

/* the samples' rows: what each is, then type, size and date */
.dl-row .dl-about, .dl-row .dl-meta { display: block; }
.dl-row .dl-about { color: var(--text); font-size: 14.5px; }
.samples-note { margin-bottom: 18px; }

/* the door's "what happens next" */
.door-next-title { margin-bottom: 4px; color: var(--door-names); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.p-close-brand .next { margin-top: 12px; }

/* SMSF audit: the separate firm's card */
.audit-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; }
.audit-legal { margin-top: 12px; color: var(--muted); font-size: 13.5px; }

/* For trustees: three short cards */
.trustee-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trustee-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.trustee-card h3 { font-size: var(--fs-h3-public); font-weight: 600; }
.trustee-card > p { color: var(--muted); }

/* Insights */
.empty-card .card-body { display: grid; gap: 14px; justify-items: start; padding: 28px; }
.empty-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.article-main { min-width: 0; }
.article-note { display: flex; gap: 10px; align-items: flex-start; max-width: var(--measure); margin-top: 32px; padding: 14px 16px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--surface-2); color: var(--muted); font-size: 14.5px; }
.article-note .icon { margin-top: 2px; color: var(--look-text); }
.author-card h2 { font-size: 16px; font-weight: 700; }
.author-line { display: flex; align-items: center; gap: 12px; }
.author-line .initials { width: 44px; height: 44px; font-size: 14px; }
.author-line b, .author-line .u-muted { display: block; }

/* Thank you and not found: the door's white panel */
.msg-page { min-height: min(52vh, 560px); }
.msg { max-width: 680px; margin: 0 auto; padding: 44px 40px 40px; }
.msg-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 13px;
    background: var(--initials); color: var(--initials-text); }
.msg-icon .icon { width: 26px; height: 26px; }
.msg h1 { font-family: var(--serif); font-size: var(--fs-door); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.msg-lead { margin-top: 14px; color: var(--muted); font-size: var(--fs-lead); }
.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- smsfoutsourcing.com: prices (12 Nov 2026) ---------- */
/* structured data only (microdata holders): never drawn */
.sd { display: none; }
/* a package tile's price line (home) */
.p-tile .p-price { color: var(--text); font-size: 15px; }
.p-tile .p-price b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the packages table's third column */
.list-table.has-price tbody th { width: 28%; }
.list-table .price-cell { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
/* the fees card: the second figure smaller than the first; the extras' amounts kept on one line */
.price-figure.is-second { margin-top: 18px; }
.price-figure.is-second b { font-size: 40px; }
.extra b { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .list-table .price-cell { white-space: normal; }
    .extra { flex-wrap: wrap; }
    .price-figure.is-second b { font-size: 34px; }
}

/* ---------- widths ---------- */
@media (max-width: 1000px) {
    .trustee-cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .glance.is-toc-only { display: none; }
    .profile-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
    .points.is-two { grid-template-columns: 1fr; }
    .points.is-two { gap: 0; }
    .points.is-two .point { padding: 20px 0; }
    .points.is-two .point + .point { border-top: 1px solid var(--border); }
    .profile-grid { grid-template-columns: 1fr; gap: 20px; }
    .profile-photo { max-width: 200px; }
    .link-rows a { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; }
    .link-rows a > .go { display: none; }
    .audit-card { padding: 24px 20px; }
    .audit-card .btn { width: 100%; white-space: normal; }
    .msg { padding: 32px 20px 28px; }
    .msg-actions .btn { flex: 1 1 100%; white-space: normal; }
    .register-row .btn, .dl-row .btn { white-space: normal; text-align: left; }
}
@media (max-width: 600px) {
    .phead h1, .msg h1 { font-size: 32px; }
    .svc-section { padding-top: 40px; }
    .photo-initials { width: 72px; height: 72px; font-size: 24px; }
    .chips .chip { padding: 0 14px; }
}
@media (max-width: 380px) {
    .phead h1, .msg h1 { font-size: 28px; }
    .team-grid { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
    .photo-initials, .msg-icon, .member .initials { border: 1px solid CanvasText; }
}

/* 12 Nov 2026 (smsfoutsourcing.com): menu names stay on one line ("Accounting Outsourcing" wrapped in two at 1366px) */
.pnav-link { white-space: nowrap; }
/* 12 Nov 2026: the bar here carries the site name and a longer menu than dhan.com's, so from 1101px the phone shows as its
   icon only (the number stays its link's name for screen readers, and is written out in the page, the door and the footer).
   Measured: the bar then fits its 1236px column at every width. */
@media (min-width: 1101px) { .pbar-phone { width: 44px; justify-content: center; padding: 0; gap: 0; font-size: 0; }
    .pbar-phone .icon { width: 18px; height: 18px; } }