/*
Theme Name: مقهى لبيب
Theme URI: https://labibcafe.com
Author: Labib Café
Author URI: https://labibcafe.com
Description: قالب مقهى لبيب — ثيم داكن عنبري سينمائي بالكامل بالعربية مع دعم RTL
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.5
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: labib-cafe
Tags: rtl-language, arabic, dark, custom-menu, featured-images, one-column
*/

/* =========================================================
   GOOGLE FONTS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* =========================================================
   CSS VARIABLES — Dark Amber Cinematic Theme
   ========================================================= */
:root {
  --background:        hsl(25, 25%, 6%);
  --foreground:        hsl(40, 33%, 90%);
  --card:              hsl(25, 20%, 10%);
  --card-foreground:   hsl(40, 33%, 90%);
  --primary:           hsl(34, 53%, 51%);
  --primary-fg:        hsl(25, 25%, 6%);
  --muted:             hsl(25, 15%, 14%);
  --muted-foreground:  hsl(35, 20%, 65%);
  --border:            hsl(25, 15%, 18%);
  --font:              'Tajawal', sans-serif;
  --radius:            0rem;
  --transition:        0.3s ease;
}

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

html {
  direction: rtl;
  lang: ar;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background-color: var(--background);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

p { margin-bottom: 0; }

/* =========================================================
   UTILITIES
   ========================================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .container { padding: 0 3rem; }
}

.text-primary  { color: var(--primary); }
.text-muted    { color: var(--muted-foreground); }
.border-line   { width: 4rem; height: 1px; background: var(--primary); opacity: 0.5; margin: 1.5rem auto; }
.section-label { display: block; font-size: 1.75rem; font-weight: 700; color: var(--primary); opacity: 0.7; margin-bottom: 1rem; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--primary);
  color: var(--primary-fg);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background var(--transition), opacity var(--transition);
}
.btn-primary:hover { background: hsl(34, 53%, 44%); color: var(--primary-fg); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity var(--transition);
}
.btn-outline:hover { opacity: 0.7; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes slow-zoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}

/* ---- Hero Particle / Bokeh (lantern lights) ---- */
@keyframes float-particle {
  0%   { transform: translateY(0)     translateX(0)      scale(1);    opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-45vh) translateX(12px)   scale(1.15); opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-95vh) translateX(-8px)   scale(0.7);  opacity: 0; }
}
@keyframes sway {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(18px); }
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  bottom: -5%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    hsla(44, 90%, 72%, 0.95) 0%,
    hsla(34, 80%, 58%, 0.6)  40%,
    transparent 72%);
  animation: float-particle linear infinite;
  filter: blur(0.5px);
  will-change: transform, opacity;
}
/* 20 unique particles — size, position, duration, delay, sway */
.p1  { width:8px;  height:8px;  right:12%;  animation-duration:9s;  animation-delay:0s;    opacity:.7; }
.p2  { width:5px;  height:5px;  right:28%;  animation-duration:12s; animation-delay:1.5s;  opacity:.5; }
.p3  { width:12px; height:12px; right:44%;  animation-duration:8s;  animation-delay:3s;    opacity:.8; }
.p4  { width:6px;  height:6px;  right:60%;  animation-duration:14s; animation-delay:0.8s;  opacity:.6; }
.p5  { width:9px;  height:9px;  right:75%;  animation-duration:10s; animation-delay:2.2s;  opacity:.7; }
.p6  { width:4px;  height:4px;  right:88%;  animation-duration:11s; animation-delay:4s;    opacity:.5; }
.p7  { width:14px; height:14px; right:20%;  animation-duration:13s; animation-delay:1s;    opacity:.6; }
.p8  { width:7px;  height:7px;  right:35%;  animation-duration:9.5s;animation-delay:5s;    opacity:.8; }
.p9  { width:10px; height:10px; right:52%;  animation-duration:7s;  animation-delay:2.8s;  opacity:.7; }
.p10 { width:5px;  height:5px;  right:68%;  animation-duration:15s; animation-delay:0.3s;  opacity:.5; }
.p11 { width:8px;  height:8px;  right:80%;  animation-duration:11s; animation-delay:3.5s;  opacity:.6; }
.p12 { width:16px; height:16px; right:6%;   animation-duration:16s; animation-delay:6s;    opacity:.5; }
.p13 { width:6px;  height:6px;  right:92%;  animation-duration:8.5s;animation-delay:1.2s;  opacity:.7; }
.p14 { width:11px; height:11px; right:40%;  animation-duration:12s; animation-delay:7s;    opacity:.6; }
.p15 { width:4px;  height:4px;  right:55%;  animation-duration:10s; animation-delay:4.5s;  opacity:.8; }
.p16 { width:9px;  height:9px;  right:15%;  animation-duration:13s; animation-delay:2s;    opacity:.5; }
.p17 { width:7px;  height:7px;  right:70%;  animation-duration:9s;  animation-delay:8s;    opacity:.7; }
.p18 { width:5px;  height:5px;  right:83%;  animation-duration:11s; animation-delay:3s;    opacity:.6; }
.p19 { width:13px; height:13px; right:30%;  animation-duration:14s; animation-delay:5.5s;  opacity:.5; }
.p20 { width:6px;  height:6px;  right:48%;  animation-duration:8s;  animation-delay:0.6s;  opacity:.8; }

/* subtle horizontal sway on odd particles */
.p1,.p3,.p5,.p7,.p9,.p11,.p13,.p15,.p17,.p19 { animation-name: float-particle; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-up { animation: fade-up 0.8s ease forwards; }
.animate-fade-in { animation: fade-in 0.6s ease forwards; }

/* Intersection-observer driven animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* =========================================================
   NAVBAR
   ========================================================= */
#site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  transition: background var(--transition), padding var(--transition), border-color var(--transition);
  padding: 1.5rem 0;
  border-bottom: 1px solid transparent;
}

#site-header.scrolled {
  background: hsla(25, 25%, 6%, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1rem 0;
  border-bottom-color: var(--border);
}

#site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  position: relative;
  z-index: 110;
}
.site-logo:hover { color: var(--primary); }

#main-nav { display: flex; align-items: center; gap: 2rem; }
#main-nav a {
  font-size: 0.9rem;
  color: var(--foreground);
  letter-spacing: 0.03em;
  position: relative;
  padding-bottom: 4px;
}
#main-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: right;
}
#main-nav a:hover,
#main-nav a.active { color: var(--primary); }
#main-nav a:hover::after,
#main-nav a.active::after { transform: scaleX(1); }

/* Hamburger */
#menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--foreground);
  position: relative;
  z-index: 110;
  transition: color var(--transition);
}
#menu-toggle:hover { color: var(--primary); }
#menu-toggle svg { display: block; width: 24px; height: 24px; }

/* Mobile fullscreen menu */
#mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 105;
  background: var(--background);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#mobile-menu.open { opacity: 1; }
#mobile-menu a {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--foreground);
  transition: color var(--transition);
}
#mobile-menu a:hover,
#mobile-menu a.active { color: var(--primary); }

@media (max-width: 767px) {
  #main-nav { display: none; }
  #menu-toggle { display: block; }
}

/* =========================================================
   HOME PAGE
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: slow-zoom 20s ease-in-out infinite alternate;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, hsla(25,25%,6%,0.4) 0%, hsla(25,25%,6%,0.8) 60%, hsl(25,25%,6%) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-logo {
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 700;
  color: var(--primary);
  opacity: 0.85;
  display: block;
  margin-bottom: 1.5rem;
  animation: fade-up 0.8s ease forwards;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  color: var(--foreground);
  margin-bottom: 1.5rem;
  animation: fade-up 0.8s ease 0.15s both;
}

.hero p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--muted-foreground);
  font-weight: 300;
  margin-bottom: 3rem;
  line-height: 1.9;
  animation: fade-up 0.8s ease 0.3s both;
}

.hero .hero-cta {
  animation: fade-up 0.8s ease 0.45s both;
}

/* Featured Section */
.featured {
  padding: 6rem 0 8rem;
  border-top: 1px solid var(--border);
}

.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .featured-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
}

.featured-text h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.featured-text p {
  color: var(--muted-foreground);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.9;
  margin-bottom: 2rem;
}

.featured-card {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.featured-card::before { content: ''; position: absolute; inset: 0; background: hsla(34,53%,51%,0.05); opacity: 0.5; }
.featured-card .corner-tl {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 4rem;
  height: 4rem;
  border-top: 2px solid hsla(34,53%,51%,0.3);
  border-right: 2px solid hsla(34,53%,51%,0.3);
}
.featured-card .corner-br {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  border-bottom: 2px solid hsla(34,53%,51%,0.3);
  border-left: 2px solid hsla(34,53%,51%,0.3);
}
.featured-card-inner {
  position: relative;
  z-index: 1;
  padding: 2rem;
  background: var(--background);
  border: 1px solid var(--border);
  text-align: center;
}
.featured-card-inner .featured-title {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.featured-card-inner p {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  font-weight: 300;
  margin-bottom: 1rem;
}
.featured-card-inner span {
  font-size: 0.75rem;
  color: hsla(40,33%,90%,0.5);
  font-weight: 500;
}

/* =========================================================
   MENU PAGE
   ========================================================= */
.page-menu {
  padding: 8rem 0 6rem;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 5rem;
}
.page-header h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.menu-section { margin-bottom: 6rem; }

.menu-section-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.menu-section-header h2 {
  font-size: 1.75rem;
  color: var(--primary);
  white-space: nowrap;
}
.menu-section-header .divider {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 3rem;
}
@media (min-width: 768px) {
  .menu-grid { grid-template-columns: 1fr 1fr; }
}

.menu-item { display: flex; flex-direction: column; }
.menu-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.menu-item-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}
.menu-item-name.highlight { color: var(--primary); }
.menu-item-dots {
  flex: 1;
  border-bottom: 1px dashed hsla(40,33%,90%,0.2);
  margin: 0 0.5rem 0.3rem;
  transition: border-color var(--transition);
}
.menu-item:hover .menu-item-dots { border-color: hsla(34,53%,51%,0.3); }
.menu-item-price {
  font-size: 0.85rem;
  color: var(--foreground);
  font-weight: 500;
  direction: ltr;
  white-space: nowrap;
}
.menu-item-desc {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  font-weight: 300;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.page-about {
  padding: 8rem 0 6rem;
  min-height: 100vh;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
}

.about-text { order: 2; }
@media (min-width: 1024px) { .about-text { order: 1; } }

.about-text h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 2rem;
  line-height: 1.2;
}
.about-text .story-paras { display: flex; flex-direction: column; gap: 1.5rem; }
.about-text .story-paras p {
  font-size: 1.1rem;
  color: var(--muted-foreground);
  font-weight: 300;
  line-height: 1.9;
}

.about-image-wrap {
  position: relative;
  order: 1;
}
@media (min-width: 1024px) { .about-image-wrap { order: 2; } }

.about-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-image::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 16px solid hsla(25,25%,6%,0.2);
  pointer-events: none;
}

.about-badge {
  position: absolute;
  bottom: -2.5rem;
  right: -2.5rem;
  width: 8rem;
  height: 8rem;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.about-badge span {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.8;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.page-contact {
  padding: 8rem 0 6rem;
  min-height: 100vh;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
}

.contact-info h2 {
  font-size: 1.75rem;
  margin-bottom: 2rem;
}
.contact-info-blocks { display: flex; flex-direction: column; gap: 2rem; }
.info-block h3 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.info-block p, .info-block a {
  font-size: 1.05rem;
  color: var(--muted-foreground);
  font-weight: 300;
  line-height: 1.8;
  display: block;
}
.info-block a:hover { color: var(--primary); }

.hours-list { display: flex; flex-direction: column; gap: 0.5rem; }
.hours-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
  color: var(--muted-foreground);
  font-weight: 300;
}
.hours-row span:last-child { direction: ltr; }

/* Contact Form */
.contact-form-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2.5rem;
}
@media (min-width: 768px) { .contact-form-wrap { padding: 3rem; } }

.contact-form-wrap h2 {
  font-size: 1.75rem;
  margin-bottom: 2rem;
}

.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-family: var(--font);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition);
  border-radius: 0;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted-foreground); opacity: 0.6; }

.contact-submit {
  width: 100%;
  padding: 0.85rem;
  background: var(--primary);
  color: var(--primary-fg);
  border: none;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition);
  border-radius: 0;
}
.contact-submit:hover { background: hsl(34, 53%, 44%); }

.form-notice {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  border-radius: 0;
}
.form-notice.success { background: hsla(34,53%,51%,0.15); border: 1px solid var(--primary); color: var(--primary); }
.form-notice.error   { background: hsla(0,63%,30%,0.2); border: 1px solid hsl(0,63%,40%); color: hsl(0,70%,70%); }

/* Field validation styles */
.form-group input.invalid,
.form-group textarea.invalid { border-color: hsl(0,63%,40%); }
.field-error { display: none; font-size: 0.8rem; color: hsl(0,70%,70%); margin-top: 0.35rem; }
.form-group.has-error .field-error { display: block; }

/* =========================================================
   FOOTER
   ========================================================= */
#site-footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 5rem 0 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.footer-brand .brand-logo {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
  display: block;
  margin-bottom: 1rem;
}
.footer-brand p {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  font-weight: 300;
  line-height: 1.8;
  max-width: 240px;
}

.footer-col h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 1rem; }
.footer-col ul a {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  font-weight: 300;
}
.footer-col ul a:hover { color: var(--primary); }

.footer-contact-list { display: flex; flex-direction: column; gap: 1rem; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.footer-contact-item svg {
  width: 16px; height: 16px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 3px;
}
.footer-contact-item span,
.footer-contact-item a {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  font-weight: 300;
  line-height: 1.6;
}
.footer-contact-item a:hover { color: var(--primary); }

.footer-hours-list { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-hours-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted-foreground);
  font-weight: 300;
}
.footer-hours-row span:last-child { direction: ltr; }

.social-links { display: flex; gap: 1rem; margin-top: 2rem; }
.social-links a {
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--foreground);
  transition: color var(--transition), border-color var(--transition);
}
.social-links a:hover               { color: var(--primary); border-color: var(--primary); }
.social-links a.social-instagram:hover { color: #E1306C; border-color: #E1306C; }
.social-links a.social-facebook:hover  { color: #1877F2; border-color: #1877F2; }
.social-links a.social-twitter:hover   { color: #1DA1F2; border-color: #1DA1F2; }
.social-links a.social-tiktok:hover    { color: #69C9D0; border-color: #69C9D0; }
.social-links a.social-whatsapp:hover  { color: #25D366; border-color: #25D366; }
.social-links a.social-youtube:hover   { color: #FF0000; border-color: #FF0000; }
.social-links a.social-snapchat:hover  { color: #FFFC00; border-color: #FFFC00; }
.social-links a.social-linkedin:hover  { color: #0A66C2; border-color: #0A66C2; }
.social-links svg { width: 16px; height: 16px; }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; text-align: right; }
}
.footer-bottom p {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 300;
}
.footer-bottom .footer-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

/* =========================================================
   WORDPRESS CORE OVERRIDES
   ========================================================= */
.wp-caption { max-width: 100%; }
.aligncenter { margin: 0 auto; display: block; }
.sticky { /* WordPress sticky post */ }
.bypostauthor { /* WordPress by-author */ }