/*
Theme Name: Pushkaraj MUA Theme
Theme URI: https://yourmua.com
Author: Your Mua
Author URI: https://yourmua.com
Description: A custom Block Theme for YourMua converted from HTML5.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
*/

/* Reset & Base Styles are handled by theme.json and WordPress, 
   but we include our custom styles here for specific overrides. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* Main CSS content will be appended or enqueued separately *//* 
   Theme: Mocha Mousse & Espresso (Dark Mode)
   Fonts: Playfair Display (Variable), Inter
   Aesthetic: High-end 2025 Editorial
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  /* Premium 2025 Palette - "Gilded Noir & Cashmere" */
  --bg-body: #F9F7F5;
  /* Cashmere White */
  --bg-surface: #FFFFFF;
  --text-main: #2A2623;
  /* Deep Charcoal */
  --text-muted: #847C75;
  /* Warm Grey */

  --primary: #967E76;
  /* Taupe / Mousse */
  --primary-dark: #5C4B45;
  --accent-pop: #C04A3A;
  /* Venetian Red (Subtle pop) */
  --accent-gold: #D4AF37;
  /* Metallic Gold */

  --border: #E8E2DC;
  --shadow: 0 20px 60px rgba(42, 38, 35, 0.06);

  /* Typography - Expressive */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* Ultra smooth */
}

/* Dark Mode (Midnight Velvet) */
body.dark-mode {
  --bg-body: #12100E;
  /* Nearly Black */
  --bg-surface: #1C1917;
  --text-main: #F2ECE9;
  --text-muted: #9D9691;

  --primary: #BCAAA4;
  --primary-dark: #D7CCC8;
  --accent-pop: #D85D4E;
  --border: #332E2B;

  --shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
  --accent-gold: #C5A028;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--bg-body);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

section {
  padding: 100px 20px;
}

.container {
  max-width: 1400px;
  /* Editorial width */
  margin: 0 auto;
  padding: 0 20px;
}

/* Typography - Expressive & Variable */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  color: var(--text-main);
  margin-bottom: 20px;
  font-weight: 600;
}

h1 {
  font-size: clamp(3.5rem, 8vw, 6rem);
  /* Responsive typography */
  font-weight: 500;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  margin-bottom: 60px;
  font-weight: 400;
}

.subtitle {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  color: var(--primary);
  display: block;
  margin-bottom: 15px;
  text-align: center;
}

/* Buttons & CTA */
.btn {
  display: inline-block;
  padding: 16px 40px;
  background: var(--text-main);
  color: var(--bg-body);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--text-main);
  z-index: -1;
  transition: var(--transition);
}

.btn:hover {
  background: transparent;
  color: var(--text-main);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--text-main);
  color: var(--text-main);
}

.btn-outline:hover {
  background: var(--text-main);
  color: var(--bg-body);
}

/* Social Buttons (Pop Colors) */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.social-btn.whatsapp {
  background: #25D366;
}

.social-btn.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-btn.facebook {
  background: #1877F2;
}

/* SVG/Image Background Accents (Abstract Lipstick Strokes) */
.bg-stroke {
  position: absolute;
  z-index: -1;
  opacity: 0.08;
  /* Minimalist default */
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body.dark-mode .bg-stroke {
  opacity: 0.05;
  filter: invert(1);
}

/* Specific Accent Positioning & Sizing */
.hero-accent {
  top: 50%;
  left: 45%;
  width: 400px;
  transform: translate(-50%, -50%) rotate(-15deg);
  opacity: 0.12;
  /* Slightly more visible for hero */
}

.portfolio-accent {
  bottom: 10%;
  left: 0;
  width: 400px;
  transform: rotate(-10deg);
}

.blog-accent {
  bottom: 10%;
  right: 5%;
  width: 300px;
  opacity: 0.1;
  transform: rotate(5deg);
}

.menu-bg-accent {
  position: absolute;
  bottom: 10%;
  right: 10%;
  opacity: 0.05;
  z-index: -1;
  transform: rotate(-10deg);
  pointer-events: none;
  width: 50vw;
  max-width: 600px;
}

/* Header */
header {
  background: var(--bg-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 15px 0;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-main);
}

.logo span {
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}

.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-links a {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--text-main);
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Theme Toggle Button */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-main);
  padding: 10px;
  transition: transform 0.3s ease;
}

.theme-toggle:hover {
  transform: rotate(15deg);
}

.hamburger {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-main);
}

/* Hero Section - Premium Split Layout */
.hero {
  min-height: 100vh;
  /* Full viewport height */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0;
  /* Remove padding to let video touch edges */
}

.hero .container {
  grid-column: 1 / 2;
  padding: 0 5vw;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hero-content {
  max-width: 650px;
}

.hero-media-wrapper {
  position: absolute;
  /* Using absolute to control the layer fully */
  top: 0;
  right: 0;
  width: 55%;
  /* Slightly more than half overlap */
  height: 100%;
  z-index: 1;
  /* Organic Masking for "Smart Video" */
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero:hover .hero-media-wrapper {
  /* Subtle interaction */
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 5% 100%);
}

.hero-media-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Typography refinements for Hero */
.hero h1 {
  font-size: clamp(4rem, 10vw, 7.5rem);
  line-height: 0.95;
  margin-bottom: 30px;
  letter-spacing: -0.04em;
  color: var(--text-main);
}

.hero .subtitle {
  font-size: 1rem;
  letter-spacing: 0.3em;
  margin-bottom: 20px;
  color: var(--accent-gold);
}

.hero p {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Mobile Responsive For Hero */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 100px;
  }

  .hero .container {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
  }

  .hero-media-wrapper {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    clip-path: none;
    /* Full background on mobile */
    opacity: 0.25;
    /* Fade it out so text is readable */
    z-index: 0;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero h1 {
    font-size: 3.5rem;
  }

  .hero p {
    margin: 0 auto 30px auto;
  }
}

/* --- Bento Grid System --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Default 4 cols for flexibility */
  grid-auto-rows: 300px;
  /* Fixed rough height or min-height */
  gap: 30px;
}

#services .bento-grid {
  grid-template-columns: repeat(3, 1fr);
  /* Override for Services */
  grid-auto-rows: auto;
}

.bento-item {
  position: relative;
  border-radius: 4px;
  /* Slight rounding */
  overflow: hidden;
}

/* Item Sizing */
.bento-large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-wide {
  grid-column: span 2;
  grid-row: span 1;
}

.bento-tall {
  grid-column: span 1;
  grid-row: span 2;
}

.bento-medium,
.bento-small {
  grid-column: span 1;
  grid-row: span 1;
}

/* Portfolio Specifics */
#portfolio .bento-item {
  cursor: pointer;
}

#portfolio .bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

#portfolio .bento-item:hover img {
  transform: scale(1.05);
}

/* Contact Section - Edge to Edge Mobile */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

.map-container {
  height: 100%;
  min-height: 400px;
  position: relative;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  /* Fill the container */
  border: 0;
  filter: grayscale(1) invert(0.1);
  /* Subtle artistic map style */
  transition: filter 0.3s ease;
}

.map-container:hover iframe {
  filter: grayscale(0);
}

/* Media Queries for these specific grids */
@media (max-width: 900px) {
  /* ... Portfolio resets are handled in the main media query block ... */

  /* Contact Mobile Breakout */
  .contact-container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-info {
    padding: 40px 20px;
  }

  .map-container {
    width: 100vw;
    margin-left: -20px;
    /* Assuming container padding is 20px */
    margin-right: -20px;
    /* Break out of container */
    height: 350px;
  }
}

/* Mobile Responsive General */
@media (max-width: 900px) {
  .hero-media-wrapper {
    /* Ensuring this overrides correctly */
    width: 100%;
    clip-path: none;
    opacity: 0.25;
    /* Reverted to user preference */
  }

  .hero {
    min-height: 100svh;
    /* use safe viewport height */
  }

  /* ... Keep existing Portfolio adjustments ... */
  #portfolio .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  #services .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-large,
  .bento-medium,
  .bento-tall {
    grid-column: span 1 !important;
  }

  /* Explicit fixes for Portfolio Items to stay 1x1 */
  #portfolio .bento-item {
    aspect-ratio: 1 / 1;
    /* Square cells */
    min-height: auto;
    /* Let aspect ratio drive height */
    grid-column: span 1 !important;
    /* Force single column width per item */
    grid-row: span 1 !important;
  }

  #portfolio .bento-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  /* Trial Session Card in Services - Special handling */
  .bento-item[style*="grid-column: span 8"] {
    grid-column: 1 / -1 !important;
  }

  /* Contact Alignment fixes */
  .contact-container {
    grid-template-columns: 1fr !important;
  }

  .contact-info {
    text-align: center;
    padding: 30px;
  }

  .contact-item {
    flex-direction: column;
    text-align: center;
  }

  .contact-item i {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .social-links {
    justify-content: center;
    flex-wrap: wrap;
  }

  .map-container iframe {
    height: 300px;
  }
}


/* --- Header Transition --- */
header {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* --- Header Controls --- */
.header-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-main);
  padding: 5px;
  transition: transform 0.3s ease;
}

.header-theme-toggle:hover {
  transform: rotate(15deg) scale(1.1);
}

/* --- Floating Menu Button --- */
.floating-menu-btn,
.floating-theme-btn {
  position: fixed;
  right: 10px;
  /* Aligned vertically */
  z-index: 1001;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: var(--text-main);
  color: var(--bg-body);
  border: 1px solid var(--text-main);
  border-radius: 50%;
  /* Circular */
  font-size: 1.2rem;
  cursor: pointer;

  /* Scroll Animation Base States */
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.floating-menu-btn {
  top: 25px;
}

.floating-theme-btn {
  top: 85px;
  /* Directly below: 25px (top) + 50px (height) + 10px (gap) */
}

/* Services Specific Styling to ensure "Blocks" are visible */
#services .bento-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  /* Subtle shadow for depth */
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

#services .bento-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}

.service-icon-wrapper {
  height: 150px;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-sketch {
  max-height: 100%;
  mix-blend-mode: multiply;
  /* Blends white background into container */
  transition: transform 0.6s ease;
}

body.dark-mode .service-sketch {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* New Service Styles */
.service-main-icon {
  font-size: 3rem;
  color: var(--primary);
  transition: transform 0.3s ease;
}

.service-bg-sketch {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 180px;
  height: auto;
  opacity: 0.06;
  transform: rotate(-10deg);
  pointer-events: none;
  transition: transform 0.5s ease;
}

body.dark-mode .service-bg-sketch {
  filter: invert(1);
  opacity: 0.05;
}

#services .bento-item:hover .service-main-icon {
  transform: scale(1.1);
}

#services .bento-item:hover .service-bg-sketch {
  transform: rotate(0deg) scale(1.1);
  opacity: 0.1;
}

/* Trial Card Special Layout */
.trial-card {
  display: flex;
  align-items: center;
  background: var(--primary-dark) !important;
  /* Standout background */
  color: #fff;
  border: none !important;
}

.trial-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.trial-text h3,
.trial-text p {
  color: #fff;
  text-align: left;
}

.trial-icon {
  width: 100px;
  height: 100px;
  margin: 0;
}

.trial-link {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.3s ease;
}

.trial-link:hover {
  background: #fff;
  color: var(--primary-dark);
}

.floating-menu-btn.visible,
.floating-theme-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-menu-btn:hover,
.floating-theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* --- Full Screen Overlay Menu --- */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-surface);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  visibility: hidden;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.close-menu-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  background: none;
  border: none;
  font-size: 3rem;
  color: var(--text-main);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.close-menu-btn:hover {
  transform: rotate(90deg);
}

.overlay-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
}

.overlay-link {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--text-main);
  text-decoration: none;
  opacity: 0;
  /* Handled by JS animation */
  transform: translateY(20px);
  transition: color 0.3s ease;
  font-weight: 400;
}

.overlay-link:hover {
  color: var(--primary);
  font-style: italic;
}

/* Specific Style for Contact in Overlay */
.overlay-link.contact-highlight {
  font-family: var(--font-heading);
  /* Matched to other links */
  font-size: clamp(2.5rem, 6vw, 5rem);
  /* Same size scaling */
  text-transform: none;
  /* Reset uppercase if others aren't */
  font-weight: 400;
  /* Match weight */
  letter-spacing: normal;
  border: 1px solid var(--text-main);
  padding: 10px 40px;
  border-radius: 50px;
  margin-top: 20px;
}

.overlay-link.contact-highlight:hover {
  background: var(--text-main);
  color: var(--bg-body);
  font-style: italic;
  /* Consistency with others */
}

/* Overlay Theme Toggle */
.overlay-theme-toggle {
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: color 0.3s ease;
}

.overlay-theme-toggle:hover {
  color: var(--primary);
  font-style: italic;
}

@keyframes slideUpFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Mobile / Desktop Refinements --- */

/* Force Side-by-Side Contact on Desktop */
.contact-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  /* Explicitly 2 columns */
  gap: 50px;
  align-items: start;
}

.contact-info,
.map-container {
  width: 100%;
}

/* Mobile Responsive Adjustments */
@media (max-width: 900px) {

  /* Contact stacks on mobile */
  .contact-container {
    grid-template-columns: 1fr !important;
    /* Force single column */
  }

  /* Bento Grid Fix - Resetting Spans for Mobile */
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .bento-item,
  .bento-large,
  .bento-medium,
  .bento-small,
  .bento-tall {
    grid-column: 1 / -1;
    /* Take full width */
    grid-row: auto;
    /* Auto height */
    min-height: 250px;
    /* Ensure visibility */
  }

  /* Ensure Trial session (span 8 in inline style) also resets */
  .bento-item[style*="grid-column: span 8"] {
    grid-column: 1 / -1 !important;
  }

  /* Ensure side feature (span 2 row inline) resets */
  .bento-item[style*="grid-row: span 2"] {
    grid-row: auto !important;
  }

  /* Hide default nav links */
  .nav-links {
    display: none;
    /* We use overlay now */
  }

  /* Show Hamburger in Header for Mobile */
  .hamburger {
    display: block;
    margin-left: 15px;
    /* Spacing from theme toggle */
  }
}

/* Utilities */
.u-text-center {
  text-align: center;
}

.u-mb-small {
  margin-bottom: 20px;
}
/* --- WP Block Core Compatibility Fixes --- */

/* Site Title as Logo */
.wp-block-site-title a {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-main);
    text-decoration: none;
}
.wp-block-site-title a:hover {
    text-decoration: none;
    color: var(--text-main);
}

/* Button Block Styles */
.wp-block-button__link {
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    background-color: var(--text-main);
    color: var(--bg-body);
    padding: 16px 40px !important;
    transition: var(--transition);
}
.wp-block-button__link:hover {
    background-color: transparent !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 0 0 1px var(--text-main);
}
.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 1px solid var(--text-main);
    color: var(--text-main);
}
.is-style-outline .wp-block-button__link:hover {
    background-color: var(--text-main) !important;
    color: var(--bg-body) !important;
}

/* Service Area Buttons (Pills) */
#service-area .wp-block-button__link {
    border-radius: 50px !important;
    padding: 10px 25px !important;
}

/* Navigation Block */
.wp-block-navigation-item__content {
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-main);
    position: relative;
    padding: 10px 15px;
}
.wp-block-navigation-item__content:hover {
    text-decoration: none; 
}

/* Cover Block for Hero */
.hero-media-wrapper-block {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
/* Ensure half-width clip path applies if using cover block in split layout? 
   Actually, converting to Cover Block meant we likely want full width video, 
   OR we need to re-apply the clip-path to the cover block container.
   User asked for "Video option not seen", implying they want to edit the video.
   A standard full-width cover block is safer for user editing than the complex split.
   But to keep the design, we can try to apply the clip path to the cover block if not on mobile.
*/
@media (min-width: 1025px) {
    .hero-media-wrapper-block video.wp-block-cover__video-background {
        /* The video is inside the cover block. 
           In the original design, the video WRAPPER had the clip path. 
           Here the Cover block IS the background. 
           We might accept full width as a "WordPress-y" compromise or apply clip-path to the block.
           Let's leave it full width for better usability unless requested. */
    }
}

/* Bento Item Group Wrapper */
.bento-item {
    display: flex; /* Ensure inner blocks stack */
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* Fix for Images inside Bento Grid */
.bento-item figure.wp-block-image {
    margin: 0;
    width: 100%;
}
.bento-item figure.wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Fix Service Icon Wrapper Group */
.service-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Trial Card Content Group */
.trial-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.trial-text h3 {
    text-align: left; 
    margin: 0;
    font-size: 1.5rem;
}
.trial-text p {
    text-align: left;
    margin: 0;
}

/* Social Links Buttons Group */
.social-links .wp-block-button {
    margin-right: 10px;
    margin-bottom: 10px;
}
.social-btn.whatsapp .wp-block-button__link { background-color: #25D366; color: #fff; border:none; }
.social-btn.instagram .wp-block-button__link { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; border:none; }
.social-btn.facebook .wp-block-button__link { background-color: #1877F2; color: #fff; border:none; }