/*
Theme Name: Planner Wedding
Theme URI: https://example.com
Author: AgustDev
Author URI: https://example.com
Description: Custom wedding theme with Tailwind CSS and Alpine.js.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: planner-wedding
*/

/* Basic Reset & Tailwind Utilities will handle most styles. 
   Custom overrides can go here if needed. */
body {
  font-family: "Playfair Display", serif; /* Fallback/Default */
}

/* Offset fixed header when Admin Bar is visible */
body.admin-bar nav.fixed {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar nav.fixed {
    top: 0;
  }
}

/* Smooth Scrolling */
/* Smooth Scrolling - Handled via JS to prevent initial jump */
html {
  /* scroll-behavior: smooth; -> Moved to JS */
}

/* Scroll Offset for Sticky Header */
section {
  scroll-margin-top: 100px; /* Adjust based on header height */
}

/* Alpine.js Cloak */
[x-cloak] {
  display: none !important;
}

/* 
   Pre-define font classes to prevent FOUC (Flash of Unstyled Content) 
   caused by Tailwind CDN delay.
*/
.font-serif {
  font-family: "Playfair Display", serif;
}
.font-great-vibes {
  font-family: "Great Vibes", cursive;
}
.font-allura {
  font-family: "Allura", cursive;
}
.font-pinyon {
  font-family: "Pinyon Script", cursive;
}
.font-sans {
  font-family: "Lato", sans-serif;
}

/* Font Weights */
.font-bold {
  font-weight: 700;
}
.font-normal {
  font-weight: 400;
}
.italic {
  font-style: italic;
}