/*
Theme Name: Brokers of Good
Theme URI: https://brokersofgood.com
Description: Custom child theme for BrokersOfGood.com, built on Blocksy.
Author: BrokersOfGood
Author URI: https://brokersofgood.com
Template: blocksy
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brokers-of-good
*/

/* ==========================================================================
   Brokers of Good — Fluid Responsive Design System
   Mobile-first, clamp()-based scaling from 320px → 1200px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLUID TYPOGRAPHY
   All sizes scale smoothly between mobile and desktop.
   Formula: clamp(min, preferred, max)
   Preferred uses viewport-relative calc for fluid interpolation.
   -------------------------------------------------------------------------- */

:root {
   /* --- Fluid Type Scale --- */
   --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
   /* 12px → 14px  */
   --font-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
   /* 13px → 15px  */
   --font-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
   /* 15px → 16px  */
   --font-md: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
   /* 17px → 20px  */
   --font-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
   /* 20px → 24px  */
   --font-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
   /* 24px → 32px  */
   --font-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
   /* 28px → 36px  */
   --font-3xl: clamp(2rem, 1.3rem + 2.5vw, 2.75rem);
   /* 32px → 44px  */
   --font-4xl: clamp(2.25rem, 1.4rem + 3vw, 3.4375rem);
   /* 36px → 55px  */

   /* --- Fluid Spacing Scale --- */
   --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
   /* 4px  → 8px   */
   --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
   /* 8px  → 12px  */
   --space-md: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
   /* 12px → 24px  */
   --space-lg: clamp(1rem, 0.5rem + 2vw, 2rem);
   /* 16px → 32px  */
   --space-xl: clamp(1.5rem, 0.75rem + 3vw, 3rem);
   /* 24px → 48px  */
   --space-2xl: clamp(2rem, 1rem + 4vw, 4rem);
   /* 32px → 64px  */
   --space-3xl: clamp(3rem, 1.5rem + 5vw, 6rem);
   /* 48px → 96px  */

   /* --- Container --- */
   --container-max: 1200px;
   --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);
   /* 16px → 32px  */

   /* --- UI Elements --- */
   --border-radius-base: 6px;
   /* Global slightly-rounded corner for buttons, cards, etc. */
}


/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY — Fluid application
   -------------------------------------------------------------------------- */

body {
   font-size: var(--font-base) !important;
   line-height: 1.65;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
}

h1,
.h1,
h1.wp-block-heading,
.page-title {
   font-size: var(--font-4xl) !important;
   line-height: 1.15;
}

h2,
.h2,
h2.wp-block-heading {
   font-size: var(--font-3xl) !important;
   line-height: 1.2;
}

h3,
.h3,
h3.wp-block-heading {
   font-size: var(--font-2xl) !important;
   line-height: 1.25;
}

h4,
.h4,
h4.wp-block-heading {
   font-size: var(--font-xl) !important;
   line-height: 1.3;
}

h5,
.h5,
h5.wp-block-heading {
   font-size: var(--font-lg) !important;
   line-height: 1.35;
}

h6,
.h6,
h6.wp-block-heading {
   font-size: var(--font-md) !important;
   line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   overflow-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
}

p,
li,
blockquote {
   max-width: 70ch;
   /* Optimal reading width */
   overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   3. RESPONSIVE IMAGES & MEDIA
   -------------------------------------------------------------------------- */

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

/* Fluid Site Logo Sizing */
.site-logo-container img,
.site-logo img,
.custom-logo-link img {
   max-width: clamp(60px, 7vw + 20px, 85px) !important;
   height: auto !important;
   width: auto !important;
}

/* Header Vertical Rhythm & Padding Sync */
[data-row="middle"] {
   min-height: auto !important;
   padding-block: clamp(5px, 1vw + 4px, 12px) !important;
}

[data-row="middle"] .ct-container {
   align-items: center !important;
}

figure {
   margin: 0;
   max-width: 100%;
}


/* --------------------------------------------------------------------------
   4. FLUID LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

/* Fluid section spacing */
.entry-content>*:not(.alignfull),
.wp-block-group>*:not(.alignfull) {
   margin-block-start: var(--space-lg);
   margin-block-end: var(--space-lg);
}

/* Ensure full-width layout blocks sit flush against each other */
.entry-content>.alignfull,
.wp-block-group>.alignfull {
   margin-block-start: 0;
   margin-block-end: 0;
}

/* Fluid container padding */
.site-content,
.entry-content,
.ct-container {
   padding-inline: var(--container-padding);
}


/* --------------------------------------------------------------------------
   5. TOUCH-FRIENDLY TARGETS (WCAG / Mobile)
   Minimum 44×44px tap targets for all interactive elements
   -------------------------------------------------------------------------- */

a,
button,
input,
select,
textarea,
[role="button"],
summary {
   min-height: 44px;
   min-width: 44px;
}

/* Ensure inline links don't get oversized — only block-level targets */
p a,
li a,
span a,
.entry-content p a,
.entry-content li a {
   min-height: unset;
   min-width: unset;
}

nav a,
.ct-menu a,
button,
input[type="submit"],
.wp-block-button a {
   min-height: 44px;
   display: inline-flex;
   align-items: center;
}


/* --------------------------------------------------------------------------
   6. RESPONSIVE TABLES
   -------------------------------------------------------------------------- */

table {
   width: 100%;
   border-collapse: collapse;
   overflow-x: auto;
   display: block;
}

@media (min-width: 768px) {
   table {
      display: table;
   }
}


/* --------------------------------------------------------------------------
   7. PERFORMANCE & ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

/* Smooth scrolling for all others */
@media (prefers-reduced-motion: no-preference) {
   html {
      scroll-behavior: smooth;
   }
}

/* Focus visible for keyboard navigation */
:focus-visible {
   outline: 3px solid var(--theme-palette-color-1, #E80055);
   outline-offset: 2px;
   border-radius: 2px;
}

/* Hidden focus ring for mouse users */
:focus:not(:focus-visible) {
   outline: none;
}


/* --------------------------------------------------------------------------
   8. MOBILE-SPECIFIC REFINEMENTS
   -------------------------------------------------------------------------- */

@media (max-width: 689px) {

   /* Tighter spacing on small screens */
   .entry-content>*+* {
      margin-block-start: var(--space-md);
   }

   /* Stack columns */
   .wp-block-columns {
      flex-direction: column !important;
   }

   .wp-block-column {
      flex-basis: 100% !important;
      width: 100% !important;
   }

   /* Full-bleed images on mobile */
   .wp-block-image.alignwide,
   .wp-block-image.alignfull {
      margin-inline: calc(-1 * var(--container-padding));
      width: calc(100% + 2 * var(--container-padding));
      max-width: none;
   }

   /* Utility: Reverse column order on mobile */
   .wp-block-columns.reverse-mobile {
      display: flex !important;
      flex-direction: column-reverse !important;
   }
}

/* Utility: Force 3-column grid on desktop for GenerateBlocks */
@media (min-width: 1025px) {

   .gb-grid-wrapper.force-3col-desktop>.gb-grid-column,
   .force-3col-desktop>.gb-grid-column {
      width: 33.3333% !important;
   }
}

/* Utility: Custom Card Interaction (.bog-card) */
.bog-card {
   transition: transform 0.3s ease, box-shadow 0.3s ease !important;
   height: 100% !important;
   display: flex;
   flex-direction: column;
}

.bog-card:hover {
   transform: translateY(-4px) !important;
   box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Card Hover: Title Underline Animation */
.bog-card>.gb-headline:first-child .gb-headline-text {
   position: relative;
   display: inline-block;
}

.bog-card>.gb-headline:first-child .gb-headline-text::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 100%;
   height: 2px;
   background-color: var(--theme-palette-color-1, #E80055);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease-out;
}

.bog-card:hover>.gb-headline:first-child .gb-headline-text::after {
   transform: scaleX(1);
}

/* Force GenerateBlocks alignfull containers to break out of theme bounds and manage fluid padding */
.gb-container.alignfull {
   margin-left: calc(50% - 50vw) !important;
   margin-right: calc(50% - 50vw) !important;
   max-width: 100vw !important;
   width: 100vw !important;
   padding-left: var(--container-padding, 20px) !important;
   padding-right: var(--container-padding, 20px) !important;
   box-sizing: border-box !important;
}

/* Ensure standalone non-full-width GenerateBlocks sections get fluid layout padding on mobile without shrinking desktop width */
@media (max-width: 1140px) {
   .entry-content>.gb-container:not(.alignfull) {
      padding-left: var(--container-padding, 20px) !important;
      padding-right: var(--container-padding, 20px) !important;
      box-sizing: border-box !important;
   }
}

/* Ensure all multi-column GenerateBlocks grids stack natively on tablet/mobile for readability */
@media (max-width: 1024px) {
   .entry-content .gb-grid-wrapper {
      flex-direction: column !important;
   }

   .entry-content .gb-grid-column {
      width: 100% !important;
      padding-bottom: 2rem !important;
      /* Space between elements when stacked */
   }
}

/* Custom Checkmark List Style */
ul.is-style-checkmark {
   list-style: none;
   padding-left: 0;
}

ul.is-style-checkmark li {
   position: relative;
   padding-left: 32px;
   margin-bottom: 12px;
}

ul.is-style-checkmark li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 4px;
   width: 20px;
   height: 20px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E80055'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   9. FOOTER STYLING
   -------------------------------------------------------------------------- */

footer.ct-footer,
.ct-footer {
   background-color: #1A1A1A !important;
   color: #FFFFFF !important;
}

.ct-footer a {
   color: #E80055 !important;
}

.ct-footer a:hover {
   color: #FFFFFF !important;
}

.ct-footer .ct-container {
   padding-block: var(--space-lg);
}


/* --------------------------------------------------------------------------
   10. GLOBAL BUTTON STYLING
   -------------------------------------------------------------------------- */

button:not(#wpadminbar *):not(.components-button):not(.ct-toggle-dropdown-desktop-ghost):not(.ct-search-btn):not(.ct-toggle):not(.ct-toggle-close),
input[type="submit"]:not(#wpadminbar *):not(.components-button),
input[type="button"]:not(#wpadminbar *):not(.components-button),
input[type="reset"]:not(#wpadminbar *):not(.components-button),
.wp-block-button__link,
a.button,
button.button,
a.btn,
button.btn,
a.ct-button,
button.ct-button {
   /* Fluid Typography & Padding */
   font-size: var(--font-base) !important;
   font-weight: 600 !important;
   padding: clamp(0.75rem, 1vw + 0.5rem, 1rem) clamp(1.5rem, 3vw + 1rem, 2.5rem) !important;
   line-height: 1.4 !important;
   min-height: 48px !important;
   /* Touch target */

   /* Premium UI Aesthetics */
   background-color: var(--theme-palette-color-1, #E80055) !important;
   color: #FFFFFF !important;
   border: 2px solid transparent !important;
   border-radius: var(--border-radius-base) !important;
   /* Global rounded corner */
   box-shadow: 0 4px 6px -1px rgba(232, 0, 85, 0.2), 0 2px 4px -1px rgba(232, 0, 85, 0.1) !important;

   /* Interactive & Layout */
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   text-align: center !important;
   text-decoration: none !important;
   cursor: pointer !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover & Focus States */
button:not(#wpadminbar *):not(.components-button):not(.ct-toggle-dropdown-desktop-ghost):not(.ct-search-btn):not(.ct-toggle):not(.ct-toggle-close):hover,
input[type="submit"]:not(#wpadminbar *):not(.components-button):hover,
input[type="button"]:not(#wpadminbar *):not(.components-button):hover,
.wp-block-button__link:hover,
a.button:hover,
button.button:hover,
a.btn:hover,
button.btn:hover,
a.ct-button:hover,
button.ct-button:hover,
button:not(#wpadminbar *):not(.components-button):not(.ct-toggle-dropdown-desktop-ghost):not(.ct-search-btn):not(.ct-toggle):not(.ct-toggle-close):focus-visible,
input[type="submit"]:not(#wpadminbar *):not(.components-button):focus-visible,
.wp-block-button__link:focus-visible {
   background-color: #C20047 !important;
   /* Darker shade of brand color */
   color: #FFFFFF !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 10px 15px -3px rgba(232, 0, 85, 0.3), 0 4px 6px -2px rgba(232, 0, 85, 0.15) !important;
}

/* Active State (Click) */
button:not(#wpadminbar *):not(.components-button):not(.ct-toggle-dropdown-desktop-ghost):not(.ct-search-btn):not(.ct-toggle):not(.ct-toggle-close):active,
input[type="submit"]:not(#wpadminbar *):not(.components-button):active,
.wp-block-button__link:active,
a.button:active,
button.button:active,
a.btn:active,
button.btn:active {
   transform: translateY(0) !important;
   box-shadow: 0 2px 4px -1px rgba(232, 0, 85, 0.2) !important;
}

/* Outline/Ghost Button Variant (Optional utility class) */
.btn.btn-outline,
.btn-outline>.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
   background-color: transparent !important;
   color: var(--theme-palette-color-1, #E80055) !important;
   border: 2px solid var(--theme-palette-color-1, #E80055) !important;
   box-shadow: none !important;
}

.btn.btn-outline:hover,
.btn-outline>.wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
   background-color: var(--theme-palette-color-1, #E80055) !important;
   color: #FFFFFF !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 10px 15px -3px rgba(232, 0, 85, 0.3) !important;
}


/* --------------------------------------------------------------------------
   11. PRINT STYLES (lightweight)
   -------------------------------------------------------------------------- */

@media print {
   body {
      font-size: 12pt;
      line-height: 1.5;
   }

   nav,
   .site-footer,
   .ct-header,
   .comments-area {
      display: none;
   }

   a[href]::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
   }
}

/* --------------------------------------------------------------------------
   11. SEO & SEMANTIC UTILITIES
   Allows swapping H tags while maintaining visual design fidelity.
   -------------------------------------------------------------------------- */

/* Forces H1 to look like a small vibrant Uppercase Eyebrow */
.is-style-seo-eyebrow-h1 {
   font-size: 1rem !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 2px !important;
   color: #E10051 !important;
   margin-bottom: 15px !important;
   display: block !important;
}

/* Forces H2 to look like the Large Hero Headline */
.is-style-hero-display-h2 {
   font-size: clamp(2.25rem, 6vw, 3.25rem) !important;
   font-weight: 800 !important;
   line-height: 1.15 !important;
   letter-spacing: -0.02em !important;
   color: #1a1a1a !important;
   margin-bottom: 20px !important;
   display: block !important;
}

/* --------------------------------------------------------------------------
   12. TYPOGRAPHY BEHAVIOR FIXES
   Prevents awkward hyphenations (e.g., part-nership) and mid-word breaks
   -------------------------------------------------------------------------- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
.wp-block-heading {
   -webkit-hyphens: none !important;
   -ms-hyphens: none !important;
   hyphens: none !important;
   word-break: normal !important;
   overflow-wrap: break-word !important;
}

/* --------------------------------------------------------------------------
   13. SCROLL REVEAL ANIMATIONS
   Adds simple Elementor-style entrance animations to blocks.
   -------------------------------------------------------------------------- */

/* Base class triggers the observer and hides the element initially */
.reveal {
   opacity: 0;
   visibility: hidden;
   /* A smooth, slightly springy cubic bezier for a premium feel. Increased to 1.2s for slower reveal */
   transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
   will-change: opacity, transform;
}

/* The observer adds this class when the element enters the viewport */
.reveal.is-revealed {
   opacity: 1;
   visibility: visible;
   transform: translate(0, 0) scale(1) !important;
}

/* Specific Animation Variations */
.reveal.fade-left {
   transform: translateX(-250px);
}

.reveal.fade-right {
   transform: translateX(250px);
}

.reveal.fade-up {
   transform: translateY(250px);
}

.reveal.zoom-in {
   transform: scale(0.95);
}

/* Optional Delays for staggered lists/columns (e.g. .reveal.delay-200) */
.reveal.delay-100 {
   transition-delay: 100ms;
}

.reveal.delay-200 {
   transition-delay: 200ms;
}

.reveal.delay-300 {
   transition-delay: 300ms;
}

.reveal.delay-400 {
   transition-delay: 400ms;
}

/* --------------------------------------------------------------------------
   14. FOOTER REFINEMENTS
   Subtle styling updates for footer navigation links.
   -------------------------------------------------------------------------- */

/* Target links within the footer text areas (Helpful Links, Resources, Legal) and footer menus */
.ct-footer .ct-header-text .entry-content a,
.ct-footer [data-id^="menu"] ul li a,
.ct-footer .widget_nav_menu ul li a {
   text-decoration: none !important;
   display: inline-block;
   margin-bottom: 8px;
   /* Adds vertical breathing room */
   transition: color 0.2s ease;
   box-shadow: none !important;
   /* Forces off any custom box-shadow underlines */
}

/* Hover state for footer links to maintain interactivity without underlines */
.ct-footer .ct-header-text .entry-content a:hover,
.ct-footer [data-id^="menu"] ul li a:hover,
.ct-footer .widget_nav_menu ul li a:hover {
   color: #ffffff !important;
   text-decoration: none !important;
}

/* Reset margin/padding on list items in footer menus so the 8px margin on links dictates spacing uniformly */
.ct-footer [data-id^="menu"] ul,
.ct-footer .widget_nav_menu ul {
   margin: 0 !important;
   padding: 0 !important;
   list-style: none !important;
}

.ct-footer [data-id^="menu"] ul li,
.ct-footer .widget_nav_menu ul li {
   margin: 0 !important;
   padding: 0 !important;
}

/* Fix footer columns staggered vertical alignment caused by Blocksy's default 'center' flex alignment */
.ct-footer [data-row="top"]>.ct-container,
.ct-footer [data-row="top"] [data-column] {
   align-items: flex-start !important;
   justify-content: flex-start !important;
}

/* --------------------------------------------------------------------------
   15. FAQ ACCORDION (Rank Math Pro Integration)
   -------------------------------------------------------------------------- */

.wp-block-rank-math-faq-block {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   max-width: 900px;
   margin: 0 auto;
}

.rank-math-faq-item {
   background-color: #ffffff;
   border-radius: var(--border-radius-base);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
   border: 1px solid rgba(0, 0, 0, 0.03);
   overflow: hidden;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   margin-bottom: var(--space-md);
   /* Fallback margin */
}

.rank-math-faq-item:hover {
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
}

.rank-math-question {
   font-size: var(--font-md) !important;
   font-weight: 600 !important;
   color: #1a1a1a;
   padding: var(--space-md) var(--space-lg);
   cursor: pointer;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: color 0.2s ease, background-color 0.2s ease;
   margin: 0 !important;
   /* Override theme headings margin */
}

/* Custom animated plus/minus icon */
.rank-math-question::after {
   content: '+';
   font-size: 1.5rem;
   font-weight: 400;
   color: var(--theme-palette-color-1, #E80055);
   transition: transform 0.3s ease;
   line-height: 1;
   margin-left: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
}

/* Style when open */
.rank-math-faq-item.faq-is-open .rank-math-question {
   color: var(--theme-palette-color-1, #E80055);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.rank-math-faq-item.faq-is-open .rank-math-question::after {
   content: '−';
   /* Minus sign */
   transform: rotate(180deg);
}

.rank-math-answer {
   padding: var(--space-md) var(--space-lg);
   color: #4a4a4a;
   font-size: var(--font-base);
   line-height: 1.65;
   animation: rm-faq-slide-down 0.4s ease-out forwards;
}

.rank-math-answer p:last-child {
   margin-bottom: 0;
}

@keyframes rm-faq-slide-down {
   0% {
      opacity: 0;
      transform: translateY(-10px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/* --------------------------------------------------------------------------
   16. TERMS & POLICY LAYOUT (GenerateBlocks Integration)
   Responsive 2-column stacking grid for legal pages without custom HTML
   -------------------------------------------------------------------------- */

/* Target the main container holding a policy section */
.bog-policy-section {
   margin-bottom: var(--space-3xl);
}

/* 
   How to use in GenerateBlocks:
   1. Add a Grid block with 2 columns (e.g. 33% / 66%)
   2. Add the class "bog-policy-row" to the GRID block (not the container, the grid wrapper itself)
*/

.gb-grid-wrapper.bog-policy-row {
   padding-bottom: var(--space-lg) !important;
   margin-bottom: var(--space-lg) !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
   row-gap: var(--space-sm) !important;
   /* Mobile gap between stacked columns */
}

/* Remove bottom border from the last grid in a section */
.gb-grid-wrapper.bog-policy-row:last-child {
   border-bottom: none !important;
   padding-bottom: 0 !important;
   margin-bottom: 0 !important;
}

/* 
   Targeting the specific columns within that Grid 
*/
.gb-grid-wrapper.bog-policy-row>.gb-grid-column:first-child {
   /* Left Column: Title */
   font-weight: 700 !important;
   font-size: var(--font-md) !important;
   color: #1a1a1a !important;
}

.gb-grid-wrapper.bog-policy-row>.gb-grid-column:last-child {
   /* Right Column: Content */
   color: #4a4a4a !important;
   font-size: var(--font-base) !important;
}

/* Ensure paragraph spacing at the bottom of the right column is tight */
.gb-grid-wrapper.bog-policy-row>.gb-grid-column:last-child p:last-child {
   margin-bottom: 0 !important;
}

/* Desktop Desktop layout enforced natively by GB, just adding larger gap */
@media (min-width: 768px) {
   .gb-grid-wrapper.bog-policy-row {
      column-gap: var(--space-2xl) !important;
   }
}

/* --------------------------------------------------------------------------
   17. FOOTER ALIGNMENT FIX
   Ensures inner text columns align perfectly at their top edge.
   -------------------------------------------------------------------------- */
.ct-footer [data-row="top"] [data-column] {
   margin-top: 0 !important;
   padding-top: 0 !important;
}

.ct-footer [data-row="top"] .ct-header-text .entry-content>p:first-child {
   margin-top: 0 !important;
   padding-top: 0 !important;
   line-height: inherit !important;
}

/* --------------------------------------------------------------------------
   18. FOOTER WIDGET STYLES
   Customizations for widget menus added to the footer columns
   -------------------------------------------------------------------------- */
.ct-footer .widget-title {
   font-size: 20px !important;
   font-weight: 700 !important;
   margin-bottom: 20px !important;
   color: #FFFFFF !important;
}