/*
Theme Name: Esfahan Child
Theme URI: https://softtouchdentalcare.com
Description: Accessibility remediation child theme for Soft Touch Dental Care. WCAG 2.1 Level AA compliance.
Author: Deeztek, LLC
Author URI: https://deeztek.com
Template: esfahan
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esfahan-child
*/

/* ==========================================================================
   WCAG 2.1 AA — Accessibility Fixes
   ========================================================================== */

/* --- SW-08: Global focus-visible indicators ---
   Ensures all interactive elements have a visible focus ring
   when navigated via keyboard (not mouse clicks).
   WCAG 2.4.7 Focus Visible (Level AA)
   ========================================== */

*:focus-visible {
    outline: 3px solid #0274b4 !important;
    outline-offset: 2px !important;
}

/* Ensure skip link is visible on focus */
.skip-link:focus,
.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none !important;
    display: block;
    width: auto;
    height: auto;
    padding: 12px 24px;
    background: #0274b4;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    z-index: 100000;
    position: fixed;
    top: 8px;
    left: 8px;
    outline: 2px solid #ffffff;
}

/* --- Contrast fix: entry meta text ---
   Original #a5a5a5 fails AA on white (2.5:1).
   Darkened to #595959 for 7:1 ratio.
   WCAG 1.4.3 Contrast Minimum (Level AA)
   ========================================== */

.entry-meta,
.entry-meta a {
    color: #595959;
}

/* --- Doctor / team-member "card" layout for native-block preview ---
   Image block (clickable lightbox) + a small bottom-right overlay
   sitting ON the photo containing a single-line link "Dr. Name — View
   Bio →". Clicking the link expands a bio panel beneath the photo.
   Photo stays full-color (no dim filter), overlay only covers the
   bottom-right corner.
   ========================================== */

/* The photo wrapper is the positioning context — overlay is absolute
   relative to this, NOT the whole card, so it sits on the photo. */
.stdc-card .stdc-photo-wrap,
.stdc-card .stdc-photo-wrap > .wp-block-group__inner-container {
    position: relative;
}

.stdc-card .wp-block-image {
    margin: 0;
}

.stdc-card .wp-block-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* --- Hero-style 1-per-row treatment for doctor cards ---
   Each photo at full content width inside a fixed-aspect
   container with a near-black backdrop that blends seamlessly
   into the photos' own studio background. No cropping — the
   full portrait is always visible.
   ========================================== */
.stdc-card--hero {
    margin-bottom: 2.5rem;
}

/* Container defines the box shape; background matches studio backdrop */
.stdc-card--hero .wp-block-image {
    width: 100%;
    aspect-ratio: 5 / 4;          /* tuned to ~1080x864 hero portraits */
    background: #0a0a0a;
    position: relative;
    overflow: hidden;
}

/* Photo is contained inside the container (no cropping), centered */
.stdc-card--hero .wp-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;     /* override the default 3/4 */
    object-fit: contain !important;
    object-position: center center;
}

/* Gradient stays only behind the bottom-right link, not over the whole photo */
.stdc-card--hero .stdc-photo-wrap::after {
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
}

.stdc-card--hero .stdc-card-overlay {
    bottom: 28px;
    right: 32px;
}

.stdc-card--hero .stdc-card-overlay a.stdc-bio-link {
    font-size: 1.25em;
    letter-spacing: 0.015em;
}

/* WordPress's native lightbox uses object-fit: cover by default, which
   crops portrait photos. Force contain so the full image is visible. */
.wp-lightbox-overlay img,
.wp-lightbox-overlay .lightbox-image-container img,
.wp-lightbox-overlay .wp-block-image img {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Subtle dark gradient at the bottom of the photo so the overlay
   link reads cleanly against any photo content, without dimming
   the photo overall. */
.stdc-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 50% 0 0 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 200ms ease;
}

/* The bottom-right overlay — single-line clickable name */
.stdc-card-overlay {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 2;
    text-align: right;
}

/* Hide the duplicate text overlay class but keep markup compat */
.stdc-card-overlay .stdc-name {
    display: none;
}

.stdc-card-overlay a.stdc-bio-link {
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    transition: color 180ms ease, transform 180ms ease;
    display: inline-block;
}

.stdc-card-overlay a.stdc-bio-link:hover,
.stdc-card-overlay a.stdc-bio-link:focus-visible {
    color: #7fc4ed !important;
    transform: translateY(-2px);
}

/* Modern card polish — subtle lift + shadow on hover */
.stdc-card {
    transition: transform 220ms ease, box-shadow 220ms ease;
    border-radius: 6px;
    overflow: visible;
}

.stdc-card:hover .stdc-photo-wrap,
.stdc-card:focus-within .stdc-photo-wrap {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.stdc-card .stdc-photo-wrap {
    border-radius: 6px;
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

/* The bio disclosure below the photo. Summary is sr-only so the
   only visible entry point is the "View Bio →" link on the photo. */
.stdc-card details.stdc-bio-disclosure {
    margin-top: 14px;
}

.stdc-card details.stdc-bio-disclosure > summary {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    list-style: none;
}

.stdc-card details.stdc-bio-disclosure > summary::-webkit-details-marker {
    display: none;
}

.stdc-card details.stdc-bio-disclosure[open] {
    padding: 16px 18px;
    background: #f5f6f8;
    border-left: 3px solid #0274b4;
    border-radius: 0 4px 4px 0;
}

.stdc-card details.stdc-bio-disclosure > p {
    margin: 0;
}

/* --- Contact Us card reorder + hide closed days ---
   Business Profile plugin renders contact blocks in a fixed
   order. Client wants: Name → Address → Phone → Email →
   Hours → Directions → Map. Also hide Sat/Sun "Closed" rows.
   ========================================== */

.bp-contact-card {
    display: flex;
    flex-direction: column;
}

.bp-contact-card .bp-name           { order: 1; }
.bp-contact-card .bp-address        { order: 2; }
.bp-contact-card .bp-phone          { order: 3; }
.bp-contact-card .bp-contact-email,
.bp-contact-card .bp-contact        { order: 4; }
.bp-contact-card .bp-opening-hours  { order: 5; }
.bp-contact-card .bp-directions     { order: 6; }
.bp-contact-card .bp-map,
.bp-contact-card #bp-map-0          { order: 7; }

/* Hide weekday rows for closed days. !important is required because
   the .bp-weekday rule below uses !important to override the plugin's
   own display rule. */
.bp-opening-hours .bp-weekday:has(.bp-weekday-saturday),
.bp-opening-hours .bp-weekday:has(.bp-weekday-sunday) {
    display: none !important;
}

/* Tighten the gap between business name and the address line —
   the BP plugin sets a 15px top margin on the address, plus the
   name's own bottom margin, so we zero out both sides. */
.bp-contact-card .bp-name {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.bp-contact-card .bp-address {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Left-justify the opening-hours title + day-time rows so the whole
   section aligns flush with the address text above. Using margin
   instead of flex gap to avoid whitespace text nodes between spans
   being treated as flex items (which pushed the first child right). */
.bp-opening-hours .bp-title {
    display: block !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.bp-opening-hours .bp-weekday {
    display: block !important;       /* no flex — avoids whitespace-as-flex-item bug */
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bp-opening-hours .bp-weekday-name {
    display: inline-block !important;
    min-width: 110px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.bp-opening-hours .bp-times {
    display: inline !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Mobile menu toggle focus visibility --- */

.mobile-menu-toggle:focus-visible {
    outline: 2px solid #0274b4;
    outline-offset: 2px;
}

/* --- Smart Slider button focus visibility --- */

.n2-ss-slide .n2-ss-button-container a:focus-visible,
.n2-ss-slider .nextend-arrow:focus-visible,
.n2-ss-slider .n2-ss-dot:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}