/*
Theme Name: WooOrder Pro
Theme URI: https://wooorder.pro
Author: WooOrder Team
Author URI: https://wooorder.pro
Description: Professional dark-themed restaurant ordering system for WooCommerce. Features automatic menu generation from product categories, variation popup support, working hours management, holiday mode, customizable header with page management, and fully responsive design optimized for Swiss restaurants.
Version: 2.1.13.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wooorder-pro
Tags: woocommerce, restaurant, food-ordering, e-commerce, dark-theme, responsive, mobile-friendly

WooOrder Pro - Restaurant Ordering Theme
Copyright (C) 2024 WooOrder Team

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/

/*
 * FILE INDEX: style.css
 * PURPOSE: Theme header + shared base styles (do not move theme header comment).
 *
 * INDEX (keep updated when editing):
 *   [SEC] Global Reset
 *   [SEC] Typography
 *   [SEC] Buttons
 *   [SEC] Images
 *   [SEC] Forms
 *   [SEC] Accessibility
 *   [SEC] Skip Link
 *   [SEC] Clearfix
 *   [SEC] Additional Styles imported from layout.css
 */
/* ============================================
   CSS Variables (Modern Approach)
   ============================================ */
:root {
    --color-primary: #e74c3c;
    --color-primary-dark: #c0392b;
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
    --color-text-muted: #b3b3b3;
    --border-radius: 25px;
    --transition: all 0.3s ease;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Global Reset
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--color-primary-dark);
}

/* ============================================
   Buttons
   ============================================ */
button,
.btn {
    cursor: pointer;
    border: none;
    outline: none;
    transition: var(--transition);
}

button:disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Focus States (Accessibility) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Images
   ============================================ */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Forms
   ============================================ */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* ============================================
   Accessibility
   ============================================ */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ============================================
   Skip Link
   ============================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 2.5em;
    z-index: 999999999;
    text-decoration: underline;
}

.skip-link:focus {
    display: block;
    left: 6px;
    top: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: normal;
    padding: 15px 23px 14px;
    z-index: 100000;
    right: auto;
}

/* ============================================
   Clearfix
   ============================================ */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   Additional Styles imported from layout.css
   ============================================ */
/* Main layout styles are in assets/css/layout.css */