/**
 * Blocks Global Styles
 * 
 * Shared variables, fonts, and common styles for all block patterns.
 * This file is loaded once and shared across all blocks to avoid duplication.
 * 
 * @package HT_Blue
 * @since 1.0.0
 */

/* ========================================
   GOOGLE FONTS
   ======================================== */

/*
 * Fonts are now loaded via <link> tags in functions.php (PERF-003)
 * This approach is faster than @import and allows for preloading.
 * 
 * Fonts used:
 * - Playfair Display: 400, 600, 700 (headings)
 * - Lora: 400, 500, 600 (body text)
 * 
 * Optimizations applied:
 * - Preconnect hints for faster DNS resolution
 * - font-display: swap to prevent FOIT
 * - Preload critical font files for faster LCP
 */

/* ========================================
   CSS VARIABLES - THEME COLORS
   ======================================== */

:root {
  /* Background Colors */
  --blocks-bg-primary: hsl(0, 0%, 0%);
  --blocks-bg-secondary: hsl(0, 0%, 10%);
  --blocks-panel: hsl(0, 0%, 20%);
  /* Text Colors */
  --blocks-text-primary: hsl(0, 0%, 95%);
  --blocks-text-muted: hsl(0, 0%, 90%);
  --blocks-text-white: hsl(0, 0%, 80%);

  --blocks-button-prominent: hsl(0, 0%, 90%);
  --blocks-button-prominent-bright: hsl(0, 0%, 100%);
  --blocks-button-prominent-text: hsl(0, 0%, 10%);

  /* Accent Colors */
  --blocks-accent-primary-1: hsl(227, 100%, 80%);
  --blocks-accent-primary-2: hsl(227, 100%, 85%);
  --blocks-accent-dark: hsl(0, 0%, 10%); /* Dark color for text on light accent backgrounds */
  
  /* Border & Overlays */
  --blocks-border: hsla(0, 0%, 90%, 0.519);
  --blocks-overlay-light: rgba(255, 255, 255, 0.06);
  --blocks-overlay-medium: rgba(255, 255, 255, 0.12);
  
  /* Gradients */
  --blocks-gradient-hero: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
}

/* ========================================
   TYPOGRAPHY - FONT FAMILIES
   ======================================== */

:root {
  --blocks-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --blocks-font-body: 'Lora', Georgia, 'Times New Roman', serif;
}

/* ========================================
   GLOBAL TYPOGRAPHY RULES
   ======================================== */

.hero-section,
.services-section {
  font-family: var(--blocks-font-body);
}

.hero-section h1,
.hero-section h2,
.hero-section h3,
.services-section h1,
.services-section h2,
.services-section h3,
.hero-heading,
.services-hero h1,
.card h3 {
  font-family: var(--blocks-font-heading);
}

/* ========================================
   SHARED BUTTON STYLES
   ======================================== */

/* Primary CTA Buttons (Hero, Services Header) */
.hero-cta-button .wp-block-button__link,
.services-hero-cta .wp-block-button__link {
  font-family: var(--blocks-font-body);
  transition: transform 0.2s, background-color 0.3s;
}

/* Hover states */
.hero-cta-button .wp-block-button__link:hover {
  transform: translateX(4px);
}

.services-hero-cta .wp-block-button__link:hover {
  transform: translateY(-2px);
}

.services-hero-cta .wp-block-button__link:active {
  transform: translateY(1px);
}

/* ========================================
   RESPONSIVE BREAKPOINTS (Reference)
   ======================================== */

/*
  Standard breakpoints used across all blocks:
  
  - Desktop Large: 1420px+
  - Desktop: 1201px - 1420px
  - Tablet Large: 769px - 1200px
  - Tablet: 481px - 768px
  - Mobile: 480px and below
*/

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Smooth transitions for interactive elements */
.blocks-transition {
  transition: all 0.3s ease;
}

/* Hide elements visually but keep for screen readers */
.blocks-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   INNERBLOCKS - GLOBAL COLOR INHERITANCE
   ======================================== */

/*
 * Ensure all WordPress core blocks used within custom blocks
 * inherit the theme's global text colors instead of WordPress defaults.
 * This applies to InnerBlocks content in all HT-Blue blocks.
 */

/* Paragraphs - use theme text color */
.wp-block-ht-white-sections-hero-section p,
.wp-block-ht-white-sections-cta-section p,
.wp-block-ht-white-sections-service-section p,
.wp-block-ht-white-sections-footer-section p,
.wp-block-ht-white-sections-process-section p,
.wp-block-ht-white-sections-our-team p,
.wp-block-ht-white-sections-stats-section p,
.wp-block-ht-white-sections-featured-blog-post-section p,
.wp-block-ht-white-sections-blog-post-list-section p,
.wp-block-ht-white-sections-single-post-content p,
.wp-block-ht-white-sections-contact-info-section p,
.wp-block-ht-white-sections-calcom-booking-section p,
.wp-block-ht-white-sections-service-overview p,
.wp-block-ht-white-sections-faq-section p {
  color: var(--blocks-text-muted, #e5e5e5);
}

/* Headings - use theme text color */
.wp-block-ht-white-sections-hero-section h1,
.wp-block-ht-white-sections-hero-section h2,
.wp-block-ht-white-sections-hero-section h3,
.wp-block-ht-white-sections-hero-section h4,
.wp-block-ht-white-sections-hero-section h5,
.wp-block-ht-white-sections-hero-section h6,
.wp-block-ht-white-sections-cta-section h1,
.wp-block-ht-white-sections-cta-section h2,
.wp-block-ht-white-sections-cta-section h3,
.wp-block-ht-white-sections-cta-section h4,
.wp-block-ht-white-sections-cta-section h5,
.wp-block-ht-white-sections-cta-section h6,
.wp-block-ht-white-sections-service-section h1,
.wp-block-ht-white-sections-service-section h2,
.wp-block-ht-white-sections-service-section h3,
.wp-block-ht-white-sections-service-section h4,
.wp-block-ht-white-sections-service-section h5,
.wp-block-ht-white-sections-service-section h6,
.wp-block-ht-white-sections-footer-section h1,
.wp-block-ht-white-sections-footer-section h2,
.wp-block-ht-white-sections-footer-section h3,
.wp-block-ht-white-sections-footer-section h4,
.wp-block-ht-white-sections-footer-section h5,
.wp-block-ht-white-sections-footer-section h6,
.wp-block-ht-white-sections-process-section h1,
.wp-block-ht-white-sections-process-section h2,
.wp-block-ht-white-sections-process-section h3,
.wp-block-ht-white-sections-process-section h4,
.wp-block-ht-white-sections-process-section h5,
.wp-block-ht-white-sections-process-section h6,
.wp-block-ht-white-sections-our-team h1,
.wp-block-ht-white-sections-our-team h2,
.wp-block-ht-white-sections-our-team h3,
.wp-block-ht-white-sections-our-team h4,
.wp-block-ht-white-sections-our-team h5,
.wp-block-ht-white-sections-our-team h6,
.wp-block-ht-white-sections-stats-section h1,
.wp-block-ht-white-sections-stats-section h2,
.wp-block-ht-white-sections-stats-section h3,
.wp-block-ht-white-sections-stats-section h4,
.wp-block-ht-white-sections-stats-section h5,
.wp-block-ht-white-sections-stats-section h6,
.wp-block-ht-white-sections-featured-blog-post-section h1,
.wp-block-ht-white-sections-featured-blog-post-section h2,
.wp-block-ht-white-sections-featured-blog-post-section h3,
.wp-block-ht-white-sections-featured-blog-post-section h4,
.wp-block-ht-white-sections-featured-blog-post-section h5,
.wp-block-ht-white-sections-featured-blog-post-section h6,
.wp-block-ht-white-sections-blog-post-list-section h1,
.wp-block-ht-white-sections-blog-post-list-section h2,
.wp-block-ht-white-sections-blog-post-list-section h3,
.wp-block-ht-white-sections-blog-post-list-section h4,
.wp-block-ht-white-sections-blog-post-list-section h5,
.wp-block-ht-white-sections-blog-post-list-section h6,
.wp-block-ht-white-sections-single-post-content h1,
.wp-block-ht-white-sections-single-post-content h2,
.wp-block-ht-white-sections-single-post-content h3,
.wp-block-ht-white-sections-single-post-content h4,
.wp-block-ht-white-sections-single-post-content h5,
.wp-block-ht-white-sections-single-post-content h6,
.wp-block-ht-white-sections-contact-info-section h1,
.wp-block-ht-white-sections-contact-info-section h2,
.wp-block-ht-white-sections-contact-info-section h3,
.wp-block-ht-white-sections-contact-info-section h4,
.wp-block-ht-white-sections-contact-info-section h5,
.wp-block-ht-white-sections-contact-info-section h6,
.wp-block-ht-white-sections-calcom-booking-section h1,
.wp-block-ht-white-sections-calcom-booking-section h2,
.wp-block-ht-white-sections-calcom-booking-section h3,
.wp-block-ht-white-sections-calcom-booking-section h4,
.wp-block-ht-white-sections-calcom-booking-section h5,
.wp-block-ht-white-sections-calcom-booking-section h6,
.wp-block-ht-white-sections-service-overview h1,
.wp-block-ht-white-sections-service-overview h2,
.wp-block-ht-white-sections-service-overview h3,
.wp-block-ht-white-sections-service-overview h4,
.wp-block-ht-white-sections-service-overview h5,
.wp-block-ht-white-sections-service-overview h6,
.wp-block-ht-white-sections-faq-section h1,
.wp-block-ht-white-sections-faq-section h2,
.wp-block-ht-white-sections-faq-section h3,
.wp-block-ht-white-sections-faq-section h4,
.wp-block-ht-white-sections-faq-section h5,
.wp-block-ht-white-sections-faq-section h6 {
  color: var(--blocks-text-muted, #e5e5e5);
}

/* Lists - use theme text color */
.wp-block-ht-white-sections-hero-section ul,
.wp-block-ht-white-sections-hero-section ol,
.wp-block-ht-white-sections-cta-section ul,
.wp-block-ht-white-sections-cta-section ol,
.wp-block-ht-white-sections-service-section ul,
.wp-block-ht-white-sections-service-section ol,
.wp-block-ht-white-sections-footer-section ul,
.wp-block-ht-white-sections-footer-section ol,
.wp-block-ht-white-sections-process-section ul,
.wp-block-ht-white-sections-process-section ol,
.wp-block-ht-white-sections-our-team ul,
.wp-block-ht-white-sections-our-team ol,
.wp-block-ht-white-sections-stats-section ul,
.wp-block-ht-white-sections-stats-section ol,
.wp-block-ht-white-sections-featured-blog-post-section ul,
.wp-block-ht-white-sections-featured-blog-post-section ol,
.wp-block-ht-white-sections-blog-post-list-section ul,
.wp-block-ht-white-sections-blog-post-list-section ol,
.wp-block-ht-white-sections-single-post-content ul,
.wp-block-ht-white-sections-single-post-content ol,
.wp-block-ht-white-sections-contact-info-section ul,
.wp-block-ht-white-sections-contact-info-section ol,
.wp-block-ht-white-sections-calcom-booking-section ul,
.wp-block-ht-white-sections-calcom-booking-section ol,
.wp-block-ht-white-sections-service-overview ul,
.wp-block-ht-white-sections-service-overview ol,
.wp-block-ht-white-sections-faq-section ul,
.wp-block-ht-white-sections-faq-section ol {
  color: var(--blocks-text-muted, #e5e5e5);
}

/* Blockquotes - use theme text color */
.wp-block-ht-white-sections-hero-section blockquote,
.wp-block-ht-white-sections-cta-section blockquote,
.wp-block-ht-white-sections-service-section blockquote,
.wp-block-ht-white-sections-footer-section blockquote,
.wp-block-ht-white-sections-process-section blockquote,
.wp-block-ht-white-sections-our-team blockquote,
.wp-block-ht-white-sections-stats-section blockquote,
.wp-block-ht-white-sections-featured-blog-post-section blockquote,
.wp-block-ht-white-sections-blog-post-list-section blockquote,
.wp-block-ht-white-sections-single-post-content blockquote,
.wp-block-ht-white-sections-contact-info-section blockquote,
.wp-block-ht-white-sections-calcom-booking-section blockquote,
.wp-block-ht-white-sections-service-overview blockquote,
.wp-block-ht-white-sections-faq-section blockquote {
  color: var(--blocks-text-muted, #e5e5e5);
}

/* Links - keep accent color for visibility */
.wp-block-ht-white-sections-hero-section a,
.wp-block-ht-white-sections-cta-section a,
.wp-block-ht-white-sections-service-section a,
.wp-block-ht-white-sections-footer-section a,
.wp-block-ht-white-sections-process-section a,
.wp-block-ht-white-sections-our-team a,
.wp-block-ht-white-sections-stats-section a,
.wp-block-ht-white-sections-featured-blog-post-section a,
.wp-block-ht-white-sections-blog-post-list-section a,
.wp-block-ht-white-sections-single-post-content a,
.wp-block-ht-white-sections-contact-info-section a,
.wp-block-ht-white-sections-calcom-booking-section a,
.wp-block-ht-white-sections-service-overview a,
.wp-block-ht-white-sections-faq-section a {
  color: var(--blocks-accent-primary-1, #B8CCFF);
}

.wp-block-ht-white-sections-hero-section a:hover,
.wp-block-ht-white-sections-cta-section a:hover,
.wp-block-ht-white-sections-service-section a:hover,
.wp-block-ht-white-sections-footer-section a:hover,
.wp-block-ht-white-sections-process-section a:hover,
.wp-block-ht-white-sections-our-team a:hover,
.wp-block-ht-white-sections-stats-section a:hover,
.wp-block-ht-white-sections-featured-blog-post-section a:hover,
.wp-block-ht-white-sections-blog-post-list-section a:hover,
.wp-block-ht-white-sections-single-post-content a:hover,
.wp-block-ht-white-sections-contact-info-section a:hover,
.wp-block-ht-white-sections-calcom-booking-section a:hover,
.wp-block-ht-white-sections-service-overview a:hover,
.wp-block-ht-white-sections-faq-section a:hover {
  color: var(--blocks-accent-primary-2, #D4E0FF);
}

/* Container for contact page two-column layout - matches navbar width */
.wp-block-group.is-layout-flex:has(.contact-info-block) {
  width: 1400px !important; /* Force navbar width */
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important; /* Override any negative margins */
  padding-top: 210px !important; /* Navbar clearance: 76px header + 100px parent offset + 34px breathing room */
  padding-bottom: 3rem !important;
  padding-left: 0 !important; /* No extra padding - blocks handle their own */
  padding-right: 0 !important;
  align-items: flex-start !important; /* Align to top, not bottom */
  gap: 2rem !important; /* Space between columns */
}

/* Responsive: Stack on tablets and mobile */
@media (max-width: 1200px) {
  .wp-block-group.is-layout-flex:has(.contact-info-block) {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    margin-top: 0 !important; /* Override negative margin */
    padding-top: 180px !important; /* Navbar clearance for tablet (76px navbar + 70px offset + 34px breathing room) */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    gap: 2rem !important;
  }
}

@media (max-width: 768px) {
  .wp-block-group.is-layout-flex:has(.contact-info-block) {
    margin-top: 0 !important; /* Override negative margin */
    padding-top: 160px !important; /* Navbar clearance on mobile */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 1.5rem !important;
  }
}