/* Site-specific overrides on top of Bootstrap. */

/* =========================================================================
   Design token wiring
   The --font-size-* / --color-* custom properties are emitted per-request by
   includes/header.php from the site_settings table. This block points
   Bootstrap and the visual heading scale at them. Nothing here changes the
   rendered result unless the DB token values differ from Bootstrap's stock
   figures (they currently switch the accent from #0d6efd blue to brand teal).
   ========================================================================= */

/* Base text + heading tokens. Repoint Bootstrap's own variables: `body`
   reads --bs-body-font-size / --bs-body-color, and every h1-h6 reads
   --bs-heading-color (stock default is `inherit`). Token values currently
   equal Bootstrap's stock figures, so this is visually neutral until the DB
   values change. --font-size-h1 is applied to h1/.h1 in the heading-scale
   block below (with RFS), matching the h2-h6 wiring. */
:root {
    --bs-body-font-size: var(--font-size-body);
    --bs-body-color: var(--color-text);
    --bs-heading-color: var(--color-heading);
}

/* --bs-heading-color is now a real value (#212529), not Bootstrap's stock
   `inherit`, so every h1-h6 carries an explicit `color: var(--bs-heading-color)`
   that would otherwise force dark headings even inside a light-on-dark
   container. Where the .text-white / .text-light utilities set the surrounding
   colour, make descendant headings follow it again (footer, services-banner,
   any future dark section). `color: inherit` here overrides the Bootstrap
   heading rule (higher specificity + later) and picks up the utility's colour. */
.text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.text-light :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: inherit;
}

/* Accent colour. Bootstrap 5.3 does NOT funnel every accent through
   --bs-primary: .btn-* bake in their own hex, --bs-link-* are literals, and
   .text-primary/.bg-primary read --bs-primary-rgb (a triplet, not a hex). So
   each surface is repointed explicitly rather than relying on one variable. */
:root {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-primary-text-emphasis: var(--color-primary-shade);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: var(--color-primary-rgb);
    --bs-link-hover-color: var(--color-primary-shade);
    --bs-link-hover-color-rgb: var(--color-primary-shade-rgb);

    /* Readable foreground for text sitting on a --color-primary (teal) fill.
       #053738 is one of the logo's own dark values; ~5.4:1 contrast on the
       teal vs ~2.4:1 for white. Used by .btn-primary, .services-banner, and
       the pagination / nav-pills active state below. */
    --color-on-primary: #053738;
    --bs-pagination-active-color: var(--color-on-primary);
    --bs-nav-pills-link-active-color: var(--color-on-primary);
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-shade);
    --bs-btn-hover-border-color: var(--color-primary-shade);
    --bs-btn-active-bg: var(--color-primary-shade);
    --bs-btn-active-border-color: var(--color-primary-shade);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    /* Dark-teal label instead of white — readable on the teal fill in every state. */
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-disabled-color: var(--color-on-primary);
}

.btn-outline-primary {
    /* Resting label reads as body text, not a coloured link; border stays teal. */
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    /* On hover/active Bootstrap fills the button solid teal; use the dark
       on-primary label there too (Bootstrap's default keeps it white). */
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-active-color: var(--color-on-primary);
    /* Thicker, easier-to-see resting outline (Bootstrap default is 1px). Trim
       padding by the extra 1px per side so — with box-sizing: border-box — the
       outer box stays identical to an adjacent .btn-primary and the label
       position is unchanged. calc() tracks --bs-btn-padding-* so .btn-lg /
       .btn-sm variants stay correct too. */
    --bs-btn-border-width: 2px;
    padding: calc(var(--bs-btn-padding-y) - 1px) calc(var(--bs-btn-padding-x) - 1px);
}

/* Button size tiers. The default/medium tier is bumped up from Bootstrap's
   stock (0.375rem / 0.75rem padding, 1rem text) so it reads as comfortably
   sized — it's what almost every button on the site uses. .btn-sm is no longer
   used anywhere. The .btn-lg re-assert below is required: this .btn rule loads
   after Bootstrap, so with equal specificity it would otherwise also win on
   .btn-lg and shrink the booking CTAs. .btn-lg is nudged a little past its
   Bootstrap stock so the gap to the medium tier stays obvious (booking CTAs
   should read as the most prominent buttons). */
.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.0625rem;
}

.btn-lg {
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1.25rem;
}

/* In the collapsed mobile menu (navbar-expand-lg collapses below 992px) the
   booking CTA gets the large-tier treatment so it reads as a real call to
   action, not just another menu row. The desktop navbar button keeps the
   default tier. */
@media (max-width: 991.98px) {
    .site-header .navbar-nav .btn-primary {
        --bs-btn-padding-y: 0.625rem;
        --bs-btn-padding-x: 1.5rem;
        --bs-btn-font-size: 1.25rem;
    }
}

/* Phone / email links in page content (the Contact blocks on index.php and
   contact.php) read as plain body text, not a teal link — they're still
   clickable. Scoped to <main> so the dark footer's tel:/mailto: links (which
   use .text-light) and the .btn phone CTA are untouched. */
main a[href^="tel:"]:not(.btn),
main a[href^="mailto:"]:not(.btn) {
    color: var(--color-text);
}

/* Form controls bake the blue focus ring in as a literal too. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Visual heading scale. On this site the section headings and sub-headings
   are sized via Bootstrap's .h3 / .h4 / .h5 / .h6 downshift utilities (e.g.
   <h2 class="h3">, <h2 class="h4">, <h3 class="h5">, <h3 class="h6">). Drive
   those sizes from the tokens instead, keeping Bootstrap's RFS ramp below the
   1200px breakpoint. Each fluid calc() is Bootstrap's own output for the
   matching stock size (h3 -> 1.75rem, h4 -> 1.5rem), and the token values
   equal those stock sizes, so today's rendering is unchanged at every width.
   .h5- and .h6-size headings get no RFS reduction in Bootstrap, so they need
   no media query. Note the token NAMES track this site's visual hierarchy,
   not the HTML tag: --font-size-h2 feeds .h3, --font-size-h3 feeds .h5, etc.
   h1/.h1 is wired straight to --font-size-h1 (no name shift) — currently only
   the visually-hidden <h1> on index.php plus visible <h1>s on contact.php /
   servicii.php use it. */
h1,
.h1 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
    h1,
    .h1 {
        font-size: var(--font-size-h1);
    }
}

h3,
.h3 {
    font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
    h3,
    .h3 {
        font-size: var(--font-size-h2);
    }
}

h4,
.h4 {
    font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
    h4,
    .h4 {
        font-size: var(--font-size-h4);
    }
}

h5,
.h5 {
    font-size: var(--font-size-h3);
}

h6,
.h6 {
    font-size: var(--font-size-h6);
}

/* Brand-tinted background for a "highlighted" section. Reusable site-wide;
   currently applied to the "Despre noi" section on index.php. */
.section-highlight {
    background-color: var(--color-section-bg);
}

/* Navbar uses .fixed-top (position: fixed), which takes it out of normal
   document flow. Push page content down by the navbar's rendered height
   so the hero section doesn't start underneath it. */
body {
    padding-top: 90px;
}

/* Fixed navbar vertical padding. Kept tight (~10px each side) so the enlarged
   brand lockup fills the bar without pushing its height up. Bootstrap's own
   .navbar-brand padding is zeroed so the icon/wordmark height alone sets the
   margin. Keep body padding-top above in sync with the rendered height. */
.site-header .navbar {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.site-header .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

/* Mobile navbar toggler shows the word "MENIU" instead of the default
   hamburger icon. Sized as a comfortable tap target and given the same 2px
   teal outline as .btn-outline-primary so it reads as part of the same
   button family. */
.navbar-toggler-text {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: rgba(0, 0, 0, 0.65);
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-primary);
}

.navbar-toggler-text:focus {
    box-shadow: none;
}

/* Footer background photo, darkened with a gradient overlay so the
   white (text-light) footer text stays readable on top of it. */
.site-footer {
    background-image: linear-gradient(rgba(15, 20, 26, 0.82), rgba(15, 20, 26, 0.82)), url('/assets/img/footer.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Mobile nav dropdown only (below Bootstrap's lg breakpoint, where
   .navbar-collapse becomes the toggleable panel). Desktop keeps the
   default white navbar untouched. Dark navy = footer's dark tone
   (rgb(15, 20, 26)) tinted slightly toward the primary blue used by the
   "Programează-te chiar acum" button, so menu/footer/CTA read as one palette. */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #0f223c;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 1rem 0.75rem;
    }

    .navbar-collapse .nav-link {
        color: rgba(255, 255, 255, 0.85);
    }

    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link:focus {
        color: #ffffff;
    }

    /* Close ("X") button shown inside the open mobile menu, top-right. */
    .navbar-close-btn {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.75rem;
        line-height: 1;
        padding: 0 0.25rem;
        margin-bottom: 0.5rem;
    }

    .navbar-close-btn:hover,
    .navbar-close-btn:focus {
        color: #ffffff;
    }
}

/* "Built by NRFBIZ" footer credit. Kept small and understated to match the
   copyright line above it; mirrors how nrfbiz.com shows the same lockup
   (muted text, small size, centered). The SVG is white and sits on the
   dark footer. */
.nrfbiz-credit-logo {
    height: 2em;          /* ~2x the "Built by" text height, sits inline with it */
    width: auto;
    aspect-ratio: 1 / 1;  /* logo viewBox is square; keep it square if a browser
                             ignores the intrinsic ratio of a viewBox-only SVG */
    flex: 0 0 auto;       /* it's a flex item of the .d-inline-flex link */
    min-width: 0;         /* don't let the SVG's intrinsic size set a min-width */
}

.footer-credit-link:hover,
.footer-credit-link:focus {
    color: #ffffff !important;
}

/* Brief loading indicator over a service image while a newly selected tab's
   image is still downloading. Tab images are preloaded on page load, so this
   only ever shows on slow connections. */
.image-tabs-spinner {
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Service subcategory tabs: full content panels swapped by top-level pills
   (see includes/service-images.php). Offset the scroll target so the fixed
   navbar doesn't cover the tab bar when a panel is switched. */
.subcategory-tabs {
    scroll-margin-top: 90px;
}

/* Head/face icon + stacked "Reconstruct / Maxillodent" wordmark that
   together form the navbar brand lockup. */
/* Icon + wordmark scaled up together (same 42:40 ratio as before) so the
   lockup fills most of the navbar's height with only a small margin top/bottom.
   The brand is the tallest navbar element, so its height drives the rendered
   navbar height (~80px) — keep body padding-top below in sync. */
.navbar-brand-icon {
    height: 60px;
    width: auto;
}

.navbar-brand-wordmark {
    height: 57px;
    width: auto;
}

/* servicii.php header banner: brand-teal strip with a subtle, low-opacity
   repeating pattern of clinical Bootstrap Icons (plus-lg / capsule / check-circle)
   behind centered heading + intro text. */
.services-banner {
    position: relative;
    background-color: var(--bs-primary);
    overflow: hidden;
}

/* The banner markup carries .text-white; swap it for the dark-teal on-primary
   colour so the heading/intro are readable on the teal fill (~5.4:1 vs ~2.4:1). */
.services-banner.text-white {
    color: var(--color-on-primary) !important;
}

.services-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%20fill%3D%22%23ffffff%22%3E%3Cg%20transform%3D%22translate(12%2C14)%20scale(2.2)%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M8%202a.5.5%200%200%201%20.5.5v5h5a.5.5%200%200%201%200%201h-5v5a.5.5%200%200%201-1%200v-5h-5a.5.5%200%200%201%200-1h5v-5A.5.5%200%200%201%208%202%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(96%2C18)%20scale(1.9)%22%3E%3Cpath%20d%3D%22M1.828%208.9%208.9%201.827a4%204%200%201%201%205.657%205.657l-7.07%207.071A4%204%200%201%201%201.827%208.9Zm9.128.771%202.893-2.893a3%203%200%201%200-4.243-4.242L6.713%205.429z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(44%2C90)%20scale(1.8)%22%3E%3Cpath%20d%3D%22M8%2015A7%207%200%201%201%208%201a7%207%200%200%201%200%2014m0%201A8%208%200%201%200%208%200a8%208%200%200%200%200%2016%22%2F%3E%3Cpath%20d%3D%22m10.97%204.97-.02.022-3.473%204.425-2.093-2.094a.75.75%200%200%200-1.06%201.06L6.97%2011.03a.75.75%200%200%200%201.079-.02l3.992-4.99a.75.75%200%200%200-1.071-1.05%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(110%2C102)%20scale(1.7)%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M8%202a.5.5%200%200%201%20.5.5v5h5a.5.5%200%200%201%200%201h-5v5a.5.5%200%200%201-1%200v-5h-5a.5.5%200%200%201%200-1h5v-5A.5.5%200%200%201%208%202%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: repeat;
    background-size: 150px 150px;
    opacity: 0.13;
    pointer-events: none;
}

.services-banner > .container {
    position: relative;
}

/* Floating "back to top" button — shown after scrolling down (main.js adds
   .is-visible). Small circular button, fixed bottom-right, site-wide. */
#back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Photo gallery (galerie.php): uniform 4:3 thumbnails in a responsive grid;
   clicking one opens the full image in a Bootstrap modal (see main.js). */
.gallery-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #f8f9fa;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    cursor: pointer;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-thumb:hover img,
.gallery-thumb:focus-visible img {
    transform: scale(1.05);
}

/* Discount promo callout on index.php (sits just before "Despre noi").
   Deliberately OUTSIDE the teal/white .section-highlight rhythm: a soft tint of
   the logo's gold accent (#d29a57) so it reads as a distinct announcement while
   staying on-brand and not clashing with the teal used elsewhere. */
.promo-reduceri-card {
    background-color: #f8f1e6;
    border: 1px solid #e7d3b6;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(210, 154, 87, 0.12);
}

/* Small, subtle brand-gold check mark next to the heading. */
.promo-reduceri-icon {
    color: #c0813c;
    font-size: 0.9em;
}

/* Only the {timeframe} span is bold within the heading sentence. */
.promo-reduceri-card h2 strong {
    font-weight: 700;
}

/* preturi.php — full-width category divider rows inside the (single,
   continuous) price table. !important overrides Bootstrap's .table-striped
   zebra background (applied per-cell via box-shadow), so the tint is
   consistent whether the row lands on an odd or even index. Strong teal
   fill using the same var(--color-primary)/var(--color-on-primary) pairing
   as the "Programează-te chiar acum" buttons, so each category boundary is
   unmistakable at a glance (not just a pale tint blending into the zebra
   stripes). */
.price-table .price-category-row > td {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    box-shadow: none !important;
    font-weight: 700;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* A visible white gap above every category divider except the first, so
   groups read as distinct sections instead of one continuous list. */
.price-table .price-category-row:not(:first-child) > td {
    border-top: 12px solid #fff;
}

/* Per-category "Tratament" / "Preț" header row, repeated right below each
   divider (the table has no single page-wide <thead> — each category owns
   its own header row so they stay grouped). Same box-shadow/!important
   override as the divider row, kept visually distinct from it (light
   neutral tint, not teal) and from the zebra-striped price rows below. */
.price-table .price-header-row > th {
    background-color: #f4f6f7 !important;
    box-shadow: none !important;
    font-weight: 700;
}

/* Treatment name cells: words wrap normally at spaces, never mid-word.
   (Doesn't by itself stop a break at an existing hyphen — see
   pr_wrap_hyphen_compounds() in preturi.php for that part.) */
.price-table td.price-treatment-cell {
    overflow-wrap: normal;
    word-break: normal;
}

/* Footnote row directly under "All-on-6 premium *", applying (via its
   leading "*") to the 4-row All-on-4/All-on-6 group above it — their
   treatment names now carry a matching "*" (added in the admin panel).
   Italic (the <em> in the markup) but otherwise same size/color as the
   regular price rows, on purpose — not a typical small/muted footnote —
   so it stays legible and the asterisk pairing reads clearly. No
   card-white background override needed beyond killing the zebra tint
   and the divider's extra top gap. */
.price-table .price-note-row > td {
    background-color: #fff !important;
    box-shadow: none !important;
    padding-top: 0.4rem;
    padding-bottom: 0.85rem;
}

/* Contact email links (shared footer includes/footer.php, plus the
   "Telefon & Email" card on index.php) — the address is one long unbroken
   token (no space or hyphen), so the browser has no default break
   opportunity and was forcing the whole page wider than the viewport on
   narrow screens (<=360px). overflow-wrap: anywhere lets it wrap (and,
   unlike overflow-wrap: break-word, reliably shrinks the ancestor's
   min-content width too, which is what actually stops the page overflow —
   word-break is a legacy-browser fallback). */
.contact-email-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* preturi.php — shrink the "Preț" column to fit its content instead of
   splitting evenly with "Tratament". width:1% is the standard auto-layout
   trick: it tells the browser to give this column no more than its
   content needs, so the leftover space (most of the table) goes to the
   unconstrained Tratament column.
   Deliberately NOT white-space:nowrap: forcing every price onto one line
   made the column hug its single WIDEST entry table-wide (e.g.
   "15000-16000 lei") — on a narrow phone that, plus Tratament's own
   unavoidable minimum width, no longer fit and reintroduced horizontal
   overflow at ~320px. Left free to wrap at a space, the column instead
   settles near the width of a typical "1800-3000 lei" entry — most
   prices still render on one line, a few (mostly the 4-5 digit ranges)
   wrap onto two, which reads as normal table content, not cramping — and
   it never overflows. The one real outlier, "300-500 lei / Hemiarcadă",
   gets an intentional <br> in pr_format_price() so it breaks at a clean
   point (after "lei") instead of an awkward orphaned "/" on its own
   line. */
.price-table .price-value-col {
    width: 1%;
}

/* Desktop only (matches this file's existing lg breakpoint, e.g. line 123):
   the content-fit 1% width above is correctly tight on a phone, but on a
   wide desktop table that same ~130px column reads as squeezed against a
   lot of spare room. Give it a comfortable middle-ground share instead of
   full mobile (content-fit) or the old 50/50 split — Tratament still gets
   the clear majority. */
@media (min-width: 992px) {
    .price-table .price-value-col {
        width: 22%;
    }
}