/*
Theme Name: Lebanon Consulate LA
Theme URI: https://lebanonconsulatela.org
Author: Converted from React/Vite app
Description: Official website theme for the Consulate General of Lebanon in Los Angeles. Converted from a React + Vite single-page application into a classic WordPress theme. Brand colors, Playfair Display / Inter typography, and Tailwind utility classes are preserved.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.5
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: lebanon-consulate
*/

/* ----------------------------------------------------------------
   Fonts (also enqueued via wp_head, kept here as a fallback)
----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@400;600;700&display=swap');

/* ----------------------------------------------------------------
   Base — mirrors the React app's body styling
----------------------------------------------------------------- */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --color-lebanon-red: #ED1C24;
  --color-lebanon-green: #00A651;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: #fafaf9; /* stone-50 */
  color: #1c1917;            /* stone-900 */
}

/* Map the Tailwind theme tokens used throughout the markup so the
   CDN build resolves bg-lebanon-red, text-lebanon-green, font-serif, etc. */
.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans); }

/* Lebanon brand color utility classes (CDN Tailwind won't know these custom names) */
.text-lebanon-red   { color: var(--color-lebanon-red); }
.text-lebanon-green { color: var(--color-lebanon-green); }
.bg-lebanon-red     { background-color: var(--color-lebanon-red); }
.bg-lebanon-green   { background-color: var(--color-lebanon-green); }
.border-lebanon-red   { border-color: var(--color-lebanon-red); }
.border-lebanon-green { border-color: var(--color-lebanon-green); }
.hover\:text-lebanon-red:hover     { color: var(--color-lebanon-red); }
.hover\:border-lebanon-red:hover   { border-color: var(--color-lebanon-red); }
.focus\:ring-lebanon-red:focus     { --tw-ring-color: var(--color-lebanon-red); }
.focus\:border-lebanon-red:focus   { border-color: var(--color-lebanon-red); }
.bg-lebanon-red\/10   { background-color: rgba(237, 28, 36, 0.1); }
.hover\:border-lebanon-red\/30:hover { border-color: rgba(237, 28, 36, 0.3); }

/* Prose tweaks (the React app used @tailwindcss/typography's prose class) */
.prose h3 { font-weight: 700; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose li { margin: 0.25rem 0; }

/* Simple fade-in used by the Services tab content (replaces framer-motion) */
@keyframes lc-fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-animate-in { animation: lc-fade-in 0.5s ease both; }

/* Reveal-on-scroll (replaces motion whileInView) */
.lc-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.lc-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* WordPress core alignment / caption helpers so editor content behaves */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.alignleft   { float: left;  margin: 0 1.5rem 1rem 0; }
.wp-caption-text { font-size: 0.85rem; color: #78716c; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}