/*
Theme Name: L-Capitano Restaurant
Theme URI: http://localhost/L-Capitano
Author: L-Capitano
Author URI: http://localhost/L-Capitano
Description: Custom dark restaurant theme with Tailwind CSS, gold accents and AOS animations.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lcapitano
*/

/* ===========================
   CSS CUSTOM PROPERTIES
   =========================== */
:root {
    --gold:        #C4922A;
    --gold-light:  #E8BE6A;
    --gold-dark:   #9A6E1A;
    --dark-900:    #080808;
    --dark-800:    #101010;
    --dark-700:    #181818;
    --dark-600:    #222222;
    --dark-500:    #2E2E2E;
    --dark-400:    #3A3A3A;
    --text-100:    #F5F0E8;
    --text-200:    #C8BEA8;
    --text-300:    #8A8070;
}

/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-900);
    color: var(--text-100);
    overflow-x: hidden;
    line-height: 1.6;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark-800); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }

::selection { background: var(--gold); color: var(--dark-900); }

/* ===========================
   NAVBAR
   =========================== */
#navbar {
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
#navbar.scrolled {
    background-color: rgba(8, 8, 8, 0.97) !important;
    box-shadow: 0 1px 0 rgba(196,146,42,0.2), 0 8px 32px rgba(0,0,0,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nav-link { position: relative; text-decoration: none; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 1px;
    background: var(--gold);
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--gold) !important; }
#primary-menu .current-menu-item > a { color: var(--gold) !important; }
#mobile-menu { border-top: 1px solid rgba(196,146,42,0.12); }

/* ===========================
   HERO
   =========================== */
#home { background-color: var(--dark-900); }
.hero-overlay {
    background: linear-gradient(135deg, rgba(8,8,8,0.93) 0%, rgba(8,8,8,0.65) 60%, rgba(196,146,42,0.06) 100%);
}

@keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
.text-gold-shimmer {
    background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-light) 40%, var(--gold) 60%, var(--gold-dark) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 4s linear infinite;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes caretBounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%       { transform: translateY(8px); opacity: 1; }
}
.scroll-caret { animation: caretBounce 1.8s ease-in-out infinite; }

/* ===========================
   SECTION UTILITIES
   =========================== */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--gold);
}
.section-tag::before,
.section-tag::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
}
.section-divider {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    margin: 14px auto 0;
    border-radius: 2px;
}
.section-divider.left { margin: 14px 0 0; }

/* ===========================
   CARDS
   =========================== */
.menu-card {
    background-color: var(--dark-700);
    border: 1px solid rgba(196,146,42,0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.menu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(196,146,42,0.3);
    border-color: rgba(196,146,42,0.4);
}
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.6s ease; }
.img-zoom:hover img { transform: scale(1.07); }

/* ===========================
   BUTTONS
   =========================== */
.btn-gold {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
    background-size: 200% auto;
    color: var(--dark-900) !important;
    font-weight: 700;
    transition: background-position 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
}
.btn-gold:hover {
    background-position: right center;
    box-shadow: 0 8px 30px rgba(196,146,42,0.5);
    transform: translateY(-2px);
}
.btn-outline-gold {
    border: 1px solid rgba(196,146,42,0.5);
    color: var(--gold);
    transition: all 0.3s ease;
}
.btn-outline-gold:hover {
    background-color: rgba(196,146,42,0.08);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(196,146,42,0.15);
    transform: translateY(-2px);
}

/* ===========================
   FORM INPUTS
   =========================== */
.form-input {
    background-color: var(--dark-700);
    border: 1px solid rgba(196,146,42,0.15);
    color: var(--text-100);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-input::placeholder { color: var(--text-300); }
.form-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(196,146,42,0.12);
    background-color: var(--dark-600);
}
.form-input option { background-color: var(--dark-700); }
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.4);
    cursor: pointer;
}

/* ===========================
   GALLERY
   =========================== */
.gallery-item { position: relative; overflow: hidden; cursor: pointer; }
.gallery-item .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(196,146,42,0.8), rgba(8,8,8,0.7));
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex; align-items: center; justify-content: center;
}
.gallery-item:hover .overlay { opacity: 1; }
.gallery-item img { transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* ===========================
   TESTIMONIALS
   =========================== */
.testimonial-card {
    background-color: var(--dark-700);
    border: 1px solid rgba(196,146,42,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    border-color: rgba(196,146,42,0.3);
}

/* ===========================
   FEATURE CARDS
   =========================== */
.feature-icon {
    border: 1px solid rgba(196,146,42,0.2);
    background: rgba(196,146,42,0.06);
    transition: all 0.35s ease;
}
.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    border-color: var(--gold);
    box-shadow: 0 0 24px rgba(196,146,42,0.35);
}
.feature-card { transition: transform 0.3s ease; }
.feature-card:hover { transform: translateY(-5px); }

/* ===========================
   STARS
   =========================== */
.stars { color: var(--gold); }

/* ===========================
   LOGO
   =========================== */
.site-logo img {
    max-height: 88px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(196,146,42,0.15));
    transition: filter 0.3s ease;
}
.site-logo:hover img { filter: drop-shadow(0 0 18px rgba(196,146,42,0.4)); }

/* ===========================
   BACK TO TOP
   =========================== */
#back-to-top {
    border: 1px solid rgba(196,146,42,0.35);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(196,146,42,0.4);
}

/* ===========================
   GOLD DIVIDER LINE
   =========================== */
.gold-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.4;
}

/* ===========================
   PAGINATION
   =========================== */
.pagination .nav-links { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.pagination .page-numbers {
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(196,146,42,0.25);
    font-family:'Poppins',sans-serif; font-size:0.85rem; font-weight:500;
    color:var(--text-200); text-decoration:none;
    background:var(--dark-700);
    transition: all 0.2s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current { background:var(--gold); border-color:var(--gold); color:var(--dark-900); }

/* ===========================
   PROSE (inner pages)
   =========================== */
.prose { color: var(--text-200); }
.prose h1,.prose h2,.prose h3,.prose h4 { color:var(--text-100); margin:1.4em 0 0.5em; font-family:'Playfair Display',serif; }
.prose p { margin-bottom:1em; line-height:1.85; }
.prose a { color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover { color:var(--gold-light); }
.prose ul,.prose ol { padding-left:1.5rem; margin-bottom:1em; }
.prose li { margin-bottom:0.4em; }
.prose blockquote { border-left:2px solid var(--gold); padding-left:1rem; font-style:italic; color:var(--text-300); }
.prose img { border-radius:0.75rem; margin:1.5em 0; }

/* ===========================
   WP ALIGNMENT
   =========================== */
.aligncenter { margin:0 auto; display:block; }
.alignleft { float:left; margin-right:1rem; }
.alignright { float:right; margin-left:1rem; }

/* ===========================
   PRINT
   =========================== */
@media print {
    #navbar, #back-to-top, footer { display:none !important; }
    body { background:#fff !important; color:#000 !important; }
}