/**
 * Front Page v2 Styles
 *
 * Accessibility and custom styles for front page layouts.
 *
 * @package understrap
 * @since 2.0.0
 */

/* ========================================
   ACCESSIBILITY - Screen Reader Only
   ======================================== */

/**
 * Screen reader only class - hides content visually but keeps it accessible to screen readers.
 * Used for headings and labels that provide context for assistive technology.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   BUTTON STYLES - Accessibility Fix
   ======================================== */

/**
 * Fix for <a><button> pattern - buttons inside links are invalid HTML.
 * These styles ensure .red-button works as <a class="red-button"> without nested button.
 */
a.red-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background-color: #e74c3c;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

a.red-button:hover,
a.red-button:focus {
    background-color: #c0392b;
    color: #fff;
    text-decoration: none;
}

a.red-button:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Glovo button variant */
a.red-button.glovo-button {
    background-color: #FFC244 !important;
}

a.red-button.glovo-button:hover,
a.red-button.glovo-button:focus {
    background-color: #e6af3d !important;
}

/* ========================================
   NAVIGATION TOGGLE - Button Accessibility
   ======================================== */

/**
 * Nav toggle changed from <div> to <button> for semantic HTML.
 * These styles ensure visual appearance remains identical.
 */
button.nav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

button.nav-toggle:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ========================================
   SEMANTIC HTML - Section Styles
   ======================================== */

/**
 * Ensure section elements maintain proper spacing and layout.
 */
section.products-slider,
section.food-gallery,
section.about-us {
    /* Inherit existing styles - no visual changes needed */
}

/**
 * H2 styled as H3 - maintains visual hierarchy while improving semantic HTML.
 */
h2.h3 {
    font-size: 1.75rem;
    font-weight: 600;
}

/* ========================================
   VIDEO POPUP - Dialog Accessibility
   ======================================== */

/**
 * Hidden attribute for dialog when closed.
 */
.video-popup[hidden] {
    display: none !important;
}

/**
 * Close button accessibility improvements.
 */
.video-popup .close-btn {
    cursor: pointer;
}

.video-popup .close-btn:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ========================================
   FOCUS VISIBLE - Keyboard Navigation
   ======================================== */

/**
 * Ensure focus indicators are visible for keyboard navigation.
 * Override any :focus { outline: none; } that might exist.
 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    /* outline: 2px solid currentColor;
    outline-offset: 2px; */
}

/* Exception for Slick slider controls - they have their own focus styles */
.slick-prev:focus,
.slick-next:focus,
.slick-dots button:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ========================================
   MEDIA QUERIES - Responsive Accessibility
   ======================================== */

@media (max-width: 768px) {
    /* Ensure buttons are touch-friendly (minimum 44x44px) */
    a.red-button,
    button.nav-toggle,
    .video-popup .close-btn {
        min-width: 44px;
        min-height: 44px;
    }
}