/* YourDoc F Care - additions made with the move to React (31 Oct 2026). ADDITIVE ONLY: no rule of styles.css, home.css or pages.css is changed;
   everything here styles something new (the footer's social icons, the Help & support page, the forms' result panels) and uses the
   same colours, radii and type as the rest of the site. Loaded after the page's own stylesheet by every page. */

/* ---------- small helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[data-island] [hidden] { display: none !important; } /* a .form is a grid, which would otherwise win over the hidden attribute */

/* ---------- footer: the row of social icons (brand column) ---------- */
.site-footer .footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.site-footer .footer-social li { margin: 0; }
.site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: var(--navy-700); background: rgba(255, 255, 255, .72); border: 1px solid #cfe2f1; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.site-footer .footer-social a:hover { color: #fff; background: var(--teal); border-color: var(--teal); transform: translateY(-2px); }
.site-footer .footer-social a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.site-footer .footer-social .i { width: 20px; height: 20px; }

/* ---------- forms: the list of what to fix, shown above a form after a failed send ---------- */
.form-summary { padding: 14px 18px; border: 1px solid #f4c2c7; border-radius: var(--radius-sm); background: #fff0f1; color: #7d1822; }
.form-summary:focus { outline: 3px solid rgba(198, 45, 59, .35); outline-offset: 2px; }
.form-summary h3 { margin: 0 0 6px; font-size: 1rem; color: #7d1822; }
.form-summary ul { margin: 0; padding-left: 1.2em; }
.form-summary li { margin: 0 0 3px; }
.form-summary a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---------- forms: the panel that replaces a form once the server has the request ---------- */
.deletion-done .ref-box, .ticket-done .ref-box { display: grid; justify-items: center; gap: 6px; width: 100%; max-width: 30em; padding: 16px 18px; border: 1px dashed #9fd7de; border-radius: var(--radius-sm); background: #fff; }
.ref-label { margin: 0; font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ref-number { margin: 0; font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: .06em; color: var(--navy-900); font-variant-numeric: tabular-nums; word-break: break-all; }
.ref-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.copy-note { font-size: .9rem; font-weight: 600; color: var(--ok); }
.ref-keep { margin: 0; font-size: .95rem; color: var(--muted); }
.deletion-done .promises, .ticket-done .promises { margin: 0; padding-left: 1.2em; max-width: 34em; text-align: left; color: var(--ink); }
.deletion-done .promises li, .ticket-done .promises li { margin-bottom: .45em; }
.promises-note { max-width: 34em; color: var(--muted); }

/* ---------- help.html: the topic cards, the steps, the ticket-status box ---------- */
.help-card { display: block; color: inherit; text-decoration: none; }
.help-card:hover { color: inherit; }
.help-card:focus-visible { outline: 3px solid rgba(8, 168, 184, .5); outline-offset: 3px; }
.help-card .icon { margin-bottom: 14px; }
.help-card h3 { margin: 0 0 6px; font-size: 1.08rem; }
.help-card p { font-size: .95rem; line-height: 1.5; }
.help-card.is-selected { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 168, 184, .2), var(--shadow-sm); }
.help-steps { margin: 1.1em 0 1.2em; padding-left: 1.3em; color: var(--ink); }
.help-steps li { margin-bottom: .55em; }
.status-box { max-width: 780px; margin: 0 auto; }
.form-status.is-ok { background: #eafaf4; border-color: #b4e8d2; color: #0b5a3c; }
.ticket-done h4 { margin: 6px 0 0; font-size: 1.05rem; }
.ticket-done .promises a { font-weight: 700; }

/* ---------- contact.html: the line under the form that points to the help page ---------- */
/* whole pixels (24 px lines, a 16 px gap): the content below the form then moves by a whole number of pixels, so every picture and line of text under it is drawn exactly as before */
.contact-help-line { margin: 16px 4px 0; font-size: .95rem; line-height: 24px; color: var(--muted); }
.contact-help-line a { font-weight: 700; }

/* ---------- home: the hero headline "Your health, our priority" ----------
   A split headline puts each word in a box that clips what slides up (styles.css: [data-split] .w, overflow hidden), and the gradient of the last
   word is painted inside the word's own inline box (.grad-text, background-clip: text), which ends at the line's height. The old words (Ask.
   Connect. Heal.) have no letter that hangs below the line; "priority" has two (p, y). Both boxes are made taller below the word and pulled back
   by the same amount, which leaves the line height exactly as it was. */
h1.hero-tagline[data-split] .w { padding-bottom: .3em; margin-bottom: -.3em; }
h1.hero-tagline[data-split] .w > .grad-text { padding-bottom: .3em; margin-bottom: -.3em; }