/* ===================================
   ATAX MASTER THEME - BLOCKS CSS
   Global foundation for all custom blocks
   =================================== */

/* ===================================
   GLOBAL UTILITIES & VARIABLES
   =================================== */
:root {
  /* Color Palette */
  --primary-color: #354477;
  --accent-color: #10A1DC;
  --yellow-color: #FFC845;
  --light-gray: #f4f4f4;
  --blueish-bg-gray: #EDEFF4;
  --white: #ffffff;
  
  /* Layout Dimensions */
  --container-width: 1200px;
  --wide-width: 1280px;
  --hero-image-width: 561px;
  --hero-image-height: 602px;
  --hero-column-gap: 80px;
  
  /* Typography */
  --font-montserrat: 'Montserrat', sans-serif;
  --font-primary: var(--font-montserrat);
}

/* ===================================
   GLOBAL OVERFLOW PREVENTION
   =================================== */
/* Only apply overflow-x hidden to body, not html (to allow admin bar dropdowns) */
html {
  max-width: 100vw; /* Ensure viewport width is not exceeded */
}

body {
  overflow-x: hidden; /* Prevent horizontal scroll on body */
  max-width: 100vw; /* Ensure viewport width is not exceeded */
}

/* ===================================
   WORDPRESS ADMIN BAR FIX
   =================================== */

/* Only fix the overflow issue - let WordPress handle admin bar styling */
#wpadminbar {
  overflow: visible !important; /* Allow admin bar dropdowns to show */
}

/* WordPress core blocks overflow prevention */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-buttons,
.wp-block-button,
.wp-block-image,
.wp-block-media-text,
.wp-block-cover,
.wp-block-paragraph,
.wp-block-heading {
  max-width: 100% !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Theme containers overflow prevention */
.container,
.container-wide,
.wp-block-group.alignwide,
.wp-block-group.alignfull {
  max-width: 100% !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ===================================
   ACF BLOCK CSS ISOLATION (MINIMAL & NON-INTERFERING)
   =================================== */

/* Ensure ACF blocks maintain their own CSS context without interference */
.wp-block-acf-atax-service-intro-one,
.wp-block-acf-atax-service-text-grid,
.wp-block-acf-atax-hero-section {
  /* Only essential isolation - let ACF handle the rest */
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

/* Prevent any global CSS from interfering with ACF block layouts */
.wp-block-acf-atax-service-intro-one *,
.wp-block-acf-atax-service-text-grid *,
.wp-block-acf-atax-hero-section * {
  box-sizing: border-box;
}

/* ===================================
   RESPONSIVE CONTAINER SCALING - GOLDEN STANDARD
   =================================== */

/* Ensure all containers are responsive */
@media (max-width: 1600px) {
  .container,
  .container-wide {
    max-width: 100%;
    padding: 0 20px; /* Maintain desktop side padding */
  }
}

@media (max-width: 1150px) {
  .container,
  .container-wide {
    max-width: 100%;
    padding: 0 20px; /* Maintain desktop side padding */
  }
}

@media (max-width: 767px) {
  .container,
  .container-wide {
    max-width: 100%;
    padding: 0 16px; /* Mobile side padding */
  }
}

/* ===================================
   TEXT OVERFLOW PROTECTION
   =================================== */

/* Global text overflow prevention */
p, h1, h2, h3, h4, h5, h6, span, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ===================================
   FLEXBOX OVERFLOW PROTECTION
   =================================== */

/* Ensure flex containers don't cause overflow */
[class*="wp-block-"] {
  min-width: 0; /* Allow flex items to shrink */
  flex-shrink: 1; /* Enable shrinking */
}

/* Fix specific WordPress block issues */
.wp-block-columns {
  gap: 20px; /* Ensure reasonable gap */
}

.wp-block-column {
  flex: 1; /* Allow columns to be flexible */
  min-width: 0; /* Allow shrinking */
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

/* ===================================
   GLOBAL ATAX BUTTON COMPONENT
   =================================== */

/* Base button styling - consistent across all blocks */
.atax-button {
    display: inline-block;
    padding: 12px 32px; /* Updated: 12px vertical, 32px horizontal as per design */
    background: var(--yellow-color, #FFC845); /* Updated: yellow background as per design */
    color: var(--primary-color, #354477); /* Updated: primary blue text as per design */
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700; /* Updated: Bold weight as per design */
    font-size: 16px; /* Updated: 16px as per design */
    text-transform: none;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: none; /* Updated: no shadow as per design */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    white-space: nowrap;
    box-sizing: border-box;
    text-align: center;
    border: none;
    cursor: pointer;
    line-height: 1.2;
    min-height: 44px; /* Updated: adjusted for new padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
}

/* Phone button icon styling */
.atax-button-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0; /* Don't shrink icon */
}

.atax-button-text {
    color: inherit;
    font-weight: inherit;
}

/* Ensure button content is properly aligned when icon is present */
.atax-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Button hover effects */
.atax-button:hover {
    transform: translateY(-2px);
    box-shadow: none; /* Updated: no shadow on hover */
    color: var(--primary-color, #354477); /* Maintain primary blue text on hover */
    text-decoration: none;
    background: #FFD700; /* Updated: slightly lighter yellow on hover */
}

/* Button active state */
.atax-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(255, 200, 69, 0.3);
}

/* Button focus state for accessibility */
/* Focus state removed for cleaner design - can be re-added later if needed */

/* Button size variations */
.atax-button.atax-button-small {
    padding: 8px 24px; /* Updated: scaled down from 12px 32px */
    font-size: 14px;
    min-height: 36px; /* Updated: adjusted for new padding */
}

.atax-button.atax-button-large {
    padding: 16px 40px; /* Updated: scaled up from 12px 32px */
    font-size: 18px;
    min-height: 52px; /* Updated: adjusted for new padding */
}

/* Button color variations */
.atax-button.atax-button-primary {
    background: var(--primary-color, #354477);
    color: white;
}

.atax-button.atax-button-primary:hover {
    background: #2a365f;
    color: white;
}

.atax-button.atax-button-accent {
    background: var(--accent-color, #10A1DC);
    color: white;
}

.atax-button.atax-button-accent:hover {
    background: #0d8bc7;
    color: white;
}

/* Yellow button variation (original design) */
.atax-button.atax-button-yellow {
    background: var(--yellow-color, #FFC845);
    color: #333;
    box-shadow: none; /* Updated: no shadow for consistency */
}

.atax-button.atax-button-yellow:hover {
    background: #FFD700; /* Updated: slightly lighter yellow on hover */
    color: #333;
    box-shadow: none; /* Updated: no shadow on hover */
}

/* Blue button variation */
.atax-button.atax-button-blue {
    background: var(--primary-color, #354477);
    color: white;
    box-shadow: none;
}

.atax-button.atax-button-blue:hover {
    background: #2a365f; /* Slightly darker blue on hover */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(53, 68, 119, 0.3);
}

.atax-button.atax-button-blue:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(53, 68, 119, 0.2);
}

/* Button with icon support */
.atax-button.atax-button-with-icon {
    gap: 8px;
}

.atax-button.atax-button-with-icon::before,
.atax-button.atax-button-with-icon::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Responsive button sizing */
@media (max-width: 768px) {
    .atax-button {
        padding: 10px 28px; /* Updated: scaled down from 12px 32px for tablet */
        font-size: 15px;
        min-height: 40px; /* Updated: adjusted for new padding */
    }
    
    .atax-button.atax-button-small {
        padding: 7px 20px; /* Updated: scaled down proportionally */
        font-size: 13px;
        min-height: 32px; /* Updated: adjusted for new padding */
    }
    
    .atax-button.atax-button-large {
        padding: 14px 36px; /* Updated: scaled down proportionally */
        font-size: 16px;
        min-height: 48px; /* Updated: adjusted for new padding */
    }
}

@media (max-width: 480px) {
    .atax-button {
        padding: 8px 24px; /* Updated: scaled down from 12px 32px for mobile */
        font-size: 14px;
        min-height: 36px; /* Updated: adjusted for new padding */
        width: 100%;
        max-width: 300px;
    }
    
    .atax-button.atax-button-small {
        padding: 6px 18px; /* Updated: scaled down proportionally */
        font-size: 12px;
        min-height: 28px; /* Updated: adjusted for new padding */
    }
    
    .atax-button.atax-button-large {
        padding: 12px 32px; /* Updated: scaled down proportionally */
        font-size: 15px;
        min-height: 44px; /* Updated: adjusted for new padding */
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .atax-button {
        border: 2px solid var(--primary-color, #354477);
    }
}

/* Override WordPress core margin for wp-site-blocks children */
:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}