/* =========================================================================
   MVZ Roth — Global Styles overrides
   -------------------------------------------------------------------------
   THIS FILE IS DELIBERATELY UNLAYERED. It is the only one in the theme that
   is, and it is enqueued last.

   Why it has to exist: WordPress emits theme.json's Global Styles as ordinary,
   unlayered CSS — `h1, h2, h3, h4, h5, h6 { color: … }`,
   `:where(a:not(.wp-element-button)) { color: … }` and so on. Unlayered rules
   beat every layered rule no matter how specific, so the moment the rest of the
   theme moved into `@layer`, those element rules started repainting the site's
   own chrome: footer headings turned near-black on a near-black background, and
   the primary call-to-action turned teal on near-black.

   That trade-off is worth keeping. Layering is what lets block content authored
   in the editor look in the front end exactly as it looked in the editor. This
   file is the small, explicit list of places where the theme's own furniture
   must win instead — mostly inverted surfaces, where an inherited dark colour is
   a contrast failure rather than a cosmetic difference.

   Rule of thumb: if you are tempted to add something here, first check whether
   it belongs in theme.json instead. Only chrome the editor never renders
   belongs in this file.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */
.btn,
a.btn { text-decoration: none; }

.btn-primary,
a.btn-primary,
.btn-primary:hover,
a.btn-primary:hover { color: var(--paper); }

.btn-outline,
a.btn-outline { color: var(--ink-deep); }
.btn-outline:hover,
a.btn-outline:hover { color: var(--paper); }

.btn-light,
a.btn-light,
.btn-light:hover,
a.btn-light:hover { color: var(--teal-deep); }

.btn-outline-light,
a.btn-outline-light { color: var(--paper); }

.btn-ghost,
a.btn-ghost { color: var(--teal); }

/* -------------------------------------------------------------------------
   Inverted surfaces — dark backgrounds where an inherited ink colour would be
   unreadable rather than merely wrong.
   ---------------------------------------------------------------------- */

/* Footer */
.site-footer .footer-col-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.75;
    margin-bottom: var(--space-5);
}
.site-footer a:not(.btn) { color: rgba(250, 247, 242, 0.72); }
.site-footer a:not(.btn):hover { color: var(--clay-soft); }
.site-footer p { color: rgba(250, 247, 242, 0.72); }
.site-footer :is(h1, h2, h3, h4, h5, h6) { color: var(--paper); }
.site-footer .footer-widget a:not(.btn) { color: rgba(250, 247, 242, 0.72); }

/* Featured (dark) service tile */
.service-tile.tile-feat,
.service-tile.tile-feat h3,
.service-tile.tile-feat .arrow-link { color: var(--paper); }
.service-tile.tile-feat p { color: rgba(250, 247, 242, 0.78); }

/* Emergency band — a LIGHT surface (alert-soft). Restated here only because
   theme.json's heading colour would otherwise override the deliberate
   type hierarchy inside the cards, not because it is inverted. */
.emergency-section .emergency-header h2 { color: var(--ink-deep); }
.emergency-section .emergency-box h3 {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.emergency-section .emergency-desc,
.emergency-section .emergency-label { color: var(--ink-soft); }
.emergency-section a.emergency-number,
.emergency-section a.emergency-number:hover { color: var(--alert); }

/* First-appointment card — inverted. */
.info-card :is(h1, h2, h3, h4, h5, h6) { color: var(--paper); }
.info-card :is(p, li) { color: rgba(250, 247, 242, 0.82); }
.info-card a:not(.btn) { color: var(--clay-soft); }

/* Floating statistic on the about image */
.about-stat-float,
.about-stat-float .stat-num,
.about-stat-float .stat-label { color: var(--paper); }

/* Subpage call-to-action strip — inverted. */
.subpage-cta :is(h1, h2, h3) { color: var(--paper); }
.subpage-cta h2 em { color: var(--clay-soft); }
.subpage-cta p { color: rgba(250, 247, 242, 0.82); }

/* Cookie banner — inverted. */
.cookie-banner :is(p, h2, h3) { color: var(--paper); }
.cookie-banner a:not(.btn):not([class*="btn-"]) { color: var(--paper); }

/* Scroll-to-top control */
.scroll-top { color: var(--paper); }

/* -------------------------------------------------------------------------
   Chrome headings that are not document headings in the editorial sense
   ---------------------------------------------------------------------- */

/* The mobile panel's group labels are headings for screen-reader navigation,
   but they must read as small kickers, not as display type. */
.mobile-nav h2.sub-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.75;
}

/* The hero headline is larger than the document-wide h1 preset. */
.hero-title { font-size: var(--text-mega); }

/* Section headings keep the editorial scale the layout was designed around. */
.section-title { font-size: var(--text-3xl); }
.team-section-header .section-title { font-size: var(--text-3xl); }
.map-consent h2 { font-size: var(--text-2xl); color: var(--ink-deep); }

/* Footer column headings must not inherit the h2 display size. */
.footer-col-title { line-height: 1.4; }

/* -------------------------------------------------------------------------
   Contrast corrections
   ---------------------------------------------------------------------- */

/* The brand alert red is a background colour, not a text colour: at 4.08:1 on
   white it misses AA for the small "*" that marks a required field. This darker
   shade of the same hue clears 6.5:1 while still reading as the same red. */
.required-mark,
.field-error,
.form-feedback.error { color: #9c3520; }

/* Main location card — inverted. */
.location-card.main-loc :is(h1, h2, h3, h4, h5, h6) { color: var(--paper); }
.location-card.main-loc,
.location-card.main-loc .location-detail { color: rgba(250, 247, 242, 0.82); }
.location-card.main-loc a:not(.btn) { color: rgba(250, 247, 242, 0.9); }
.location-card.main-loc a:not(.btn):hover { color: var(--clay-soft); }
.location-card.main-loc .loc-icon { color: var(--clay-soft); }
.location-card:not(.main-loc) a:not(.btn) { color: var(--teal); }

/* The skip link sits on a near-black chip. Global Styles would otherwise paint
   it teal — invisible against that chip at the exact moment it appears, which
   is the one moment it has to be readable (WCAG 2.4.1 + 1.4.3). */
.skip-link,
.skip-link:focus,
.skip-link:hover { color: var(--paper); }

/* -------------------------------------------------------------------------
   Link distinction in running text (WCAG 1.4.1)
   -------------------------------------------------------------------------
   theme.json turns the global link underline off on purpose — it was painting
   navigation, buttons and card links as well, which read as broken. The
   underline belongs wherever a link sits *inside a sentence*, because there
   colour alone is not enough to tell it apart from the words around it (teal on
   ink-soft is 1.31:1, well under the 3:1 the criterion asks for).

   blocks.css covers links inside block content, so the editor shows them the
   same way. This block covers the theme's own prose: consent text, field hints,
   callouts, legal pages and the no-JS fallbacks.
   ---------------------------------------------------------------------- */
.form-consent a,
.field-hint a,
.form-noscript a,
.info-box a,
.content-none a,
.legal-content :is(p, li, dd, td) a,
.content-block :is(p, li, dd, td, blockquote) a:not(.btn),
.entry-content :is(p, li, dd, td, blockquote) a:not(.btn),
.subpage-content :is(p, li, dd) a:not(.btn),
.item-desc a,
.team-bio a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.form-consent a:hover,
.info-box a:hover,
.content-block :is(p, li) a:not(.btn):hover,
.entry-content :is(p, li) a:not(.btn):hover {
    text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
   Footer widget area
   -------------------------------------------------------------------------
   Widget titles are real headings, so Global Styles renders them at display
   size — an "Archive" widget shouted louder than the practice's own name. They
   are labels for a list of links, and should read like the column headings
   beside them.
   ---------------------------------------------------------------------- */
/* Block-based widgets (WordPress 5.8+) ignore `before_title` from
   register_sidebar() and render their own <h2 class="wp-block-heading">, so the
   rule has to match any heading inside the widget area, not just the class the
   theme asked for. */
.site-footer .footer-widget-title,
.site-footer .footer-widget :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.75;
    margin-bottom: var(--space-4);
}
.site-footer .footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-10);
}
.site-footer .footer-widget :is(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer .footer-widget li { margin-bottom: var(--space-2); }
.site-footer .footer-widget :is(li, p) {
    font-size: var(--text-sm);
    color: rgba(250, 247, 242, 0.72);
}

/* -------------------------------------------------------------------------
   Footer bottom row
   -------------------------------------------------------------------------
   The scroll-to-top control is fixed to the bottom-right corner and was sitting
   on top of the Impressum / Datenschutz links — the two links a German site is
   legally required to keep reachable.
   ---------------------------------------------------------------------- */
@media (min-width: 721px) {
    .footer-bottom { padding-inline-end: 72px; }
}

/* Once the footer is on screen there is no content left below, so the control
   steps aside rather than covering it. */
.site-footer { scroll-margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Team edit shortcut (Customizer preview only)
   -------------------------------------------------------------------------
   theme.json's `elements.link` colour is unlayered Global Styles, so it beats
   anything in components.css no matter how the layers are ordered. The pill
   sits on a dark petrol background and needs white text to stay legible, so
   the rule lives here, in the one deliberately unlayered file.
   ---------------------------------------------------------------------- */
.subpage-content .team-card a.team-card-edit,
.subpage-content .team-card a.team-card-edit:hover,
.subpage-content .team-card a.team-card-edit:focus,
.subpage-content .team-card a.team-card-edit:visited {
    color: #fff;
    text-decoration: none;
    text-decoration-line: none;
    text-underline-offset: 0;
}
.team-card .team-card-edit {
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-card .team-card-edit:hover { background: #0d4a5c; }