/*
Theme Name: Bao Duong Photography
Theme URI: https://baoduongphotography.com
Author: Bao Duong
Author URI: https://baoduongphotography.com
Description: A modern, minimal WordPress Block Theme for Bao Duong Photography — professional wedding, portrait, location, and event photography in Vietnam. Built for Full Site Editing (FSE) with Gutenberg.
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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bao-duong-photography
Tags: full-site-editing, block-patterns, photography, portfolio, one-column, custom-colors, custom-menu, editor-style, featured-images, wide-blocks
*/

/* ==========================================================================
   CUSTOM THEME STYLES
   Supplements theme.json global styles with utilities that cannot be
   expressed through the block editor alone.
   ========================================================================== */

/* ---------- Root Variables (mirrors theme.json for raw CSS usage) ---------- */
:root {
  --bd-color-primary: #0a2b99;
  --bd-color-background: #fbfbfd;
  --bd-color-foreground: #1d1d1f;
  --bd-color-secondary: #86868b;
  --bd-color-dark: #111111;
  --bd-color-white: #ffffff;
  --bd-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --bd-radius-lg: 1.5rem;
  --bd-radius-full: 9999px;
}

/* ---------- Smooth scroll ---------- */
html {
  scroll-behavior: smooth;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--bd-color-foreground);
  color: var(--bd-color-white);
}

/* ---------- Glass Navigation Bar ---------- */
.bd-glass-nav {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(209, 213, 219, 0.5);
}

/* ---------- Hero Cover Overlay ---------- */
.wp-block-cover.bd-hero {
  min-height: 85vh;
}

.wp-block-cover.bd-hero .wp-block-cover__inner-container {
  max-width: 64rem;
  text-align: center;
}

/* ---------- Portfolio Cards ---------- */
.bd-portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--bd-radius-lg);
  height: 400px;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.bd-portfolio-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.bd-portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.bd-portfolio-card:hover img {
  transform: scale(1.1);
}

.bd-portfolio-card .bd-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.bd-portfolio-card .bd-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
  color: var(--bd-color-white);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* ---------- Pricing Card ---------- */
.bd-pricing-card {
  background: var(--bd-color-background);
  border-radius: var(--bd-radius-lg);
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.bd-pricing-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ---------- Rounded Buttons ---------- */
.bd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bd-color-white);
  color: var(--bd-color-foreground);
  padding: 1rem 2rem;
  border-radius: var(--bd-radius-full);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.bd-btn-primary:hover {
  background: #f3f4f6;
  transform: scale(1.05);
}

.bd-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--bd-color-white);
  padding: 1rem 2rem;
  border-radius: var(--bd-radius-full);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--bd-color-white);
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, transform 0.3s ease;
}

.bd-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.bd-btn-book {
  display: block;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border-radius: var(--bd-radius-full);
  border: 2px solid var(--bd-color-foreground);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--bd-color-foreground);
  transition: background 0.3s ease, color 0.3s ease;
}

.bd-btn-book:hover {
  background: var(--bd-color-foreground);
  color: var(--bd-color-white);
}

/* ---------- About Stats Row ---------- */
.bd-stats-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.bd-stats-row .bd-stat {
  display: flex;
  flex-direction: column;
}

.bd-stats-row .bd-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bd-color-foreground);
}

.bd-stats-row .bd-stat-label {
  font-size: 0.75rem;
  color: var(--bd-color-secondary);
  font-family: monospace;
  text-transform: uppercase;
}

.bd-stats-row .bd-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: #e5e7eb;
}

/* ---------- Contact Info Cards ---------- */
.bd-contact-card {
  background: var(--bd-color-white);
  border-radius: var(--bd-radius-lg);
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease;
}

.bd-contact-card:hover {
  border-color: rgba(10, 43, 153, 0.3);
}

/* ---------- Footer ---------- */
.bd-footer {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--bd-color-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.5);
}

/* ---------- Responsive Helpers ---------- */
@media (max-width: 768px) {
  .bd-portfolio-card {
    height: 280px;
  }

  .wp-block-cover.bd-hero {
    min-height: 70vh;
  }
}