/*
Theme Name: strata theme
Theme URI: 
Author: Paul Sheppard
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ollie
Text Domain: strata-theme
Tags: 
*/


/* ==========================================================================
   TABLE OF CONTENTS
   1. Buttons
      1a. WP Block Buttons — Transition & Hover
      1b. WP Block Buttons — Arrow Icon (::after)
   2. Forminator Forms
      2a. Submit Button — Base Style
      2b. Submit Button — Hover
      2c. Home Page Form — Overrides
   3. Layout & Sections
      3a. Section Padding & Margin
      3b. Centre Grid Overflow Fix (768px–1024px)
   4. Hero Section
      4a. Offer Column — Desktop & Responsive
      4b. Mobile Offer Tab
   5. Cards
      5a. Card Border & Shadow
      5b. Card Table Height
   6. Typography
      6a. Pre-Header Paragraph
   7. Navigation & Z-Index
      7a. Special Bar
      7b. High / Low Z-Index Utilities
   8. Scrolling
      8a. Smooth Scroll
   9. Footer
      9a. Footer Contacts Border Radius (Mobile)
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1a. WP Block Buttons — Transition & Hover
   -------------------------------------------------------------------------- */

.wp-block-button__link,
a.wp-block-button__link.wp-element-button {
    transition: background-color 0.2s ease !important;
}

.wp-block-button__link:hover,
a.wp-block-button__link.wp-element-button:hover {
    background-color: var(--wp--preset--color--main) !important;
}

/* -- END 1a. WP Block Buttons — Transition & Hover -- */


/* --------------------------------------------------------------------------
   1b. WP Block Buttons — Arrow Icon (::after)
   -------------------------------------------------------------------------- */

.wp-block-button__link::after {
  content: '';
  display: inline-block;
  width: 35px !important;
  height: 35px !important;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 19.84 18.88'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B filter: url(%23drop-shadow-1); %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B fill: %239a1036; %7D .cls-4 %7B fill: %23ff2232; %7D .cls-5 %7B fill: %2315bfcc; %7D %3C/style%3E%3Cfilter id='drop-shadow-1' x='-1.13' y='1.49' width='23' height='20' filterUnits='userSpaceOnUse'%3E%3CfeOffset dx='0' dy='.88'/%3E%3CfeGaussianBlur result='blur' stdDeviation='.28'/%3E%3CfeFlood flood-color='%23000' flood-opacity='.25'/%3E%3CfeComposite in2='blur' operator='in'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Ccircle class='cls-2' cx='11.13' cy='8.72' r='8.71'/%3E%3Cg class='cls-1'%3E%3Cpolygon class='cls-5' points='6.24 7.29 19.82 1.95 19.84 1.94 0 4.42 6.97 10.14 6.24 7.29'/%3E%3Cpolygon class='cls-4' points='6.97 10.14 9.21 18.88 19.84 1.95 19.82 1.95 9.24 12.01 6.97 10.14'/%3E%3Cpolygon class='cls-3' points='6.97 10.14 9.24 12.01 19.82 1.95 6.24 7.29 6.97 10.14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle !important;
  margin-left: 15px !important;
  margin-right: -18px !important;
  margin-bottom: -5px !important;
  margin-top: -3px !important;
}

/* -- END 1b. WP Block Buttons — Arrow Icon (::after) -- */


/* ==========================================================================
   END SECTION 1. BUTTONS
   ========================================================================== */


/* ==========================================================================
   2. FORMINATOR FORMS
   ========================================================================== */

/* --------------------------------------------------------------------------
   2a. Submit Button — Base Style
   -------------------------------------------------------------------------- */

.forminator-custom-form .forminator-button {
  border-radius: 50px !important;
  width: 100% !important;
  font-size: 1.2rem !important;
  padding-left: 1rem !important;
  padding-right: 3.5rem !important;
  padding-bottom: 0.70rem !important;
  padding-top: 0.75rem !important;
  color: white !important;
  background-color: #E8333C !important;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 19.84 18.88'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B filter: url(%23drop-shadow-1); %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B fill: %239a1036; %7D .cls-4 %7B fill: %23ff2232; %7D .cls-5 %7B fill: %2315bfcc; %7D %3C/style%3E%3Cfilter id='drop-shadow-1' x='-1.13' y='1.49' width='23' height='20' filterUnits='userSpaceOnUse'%3E%3CfeOffset dx='0' dy='.88'/%3E%3CfeGaussianBlur result='blur' stdDeviation='.28'/%3E%3CfeFlood flood-color='%23000' flood-opacity='.25'/%3E%3CfeComposite in2='blur' operator='in'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Ccircle class='cls-2' cx='11.13' cy='8.72' r='8.71'/%3E%3Cg class='cls-1'%3E%3Cpolygon class='cls-5' points='6.24 7.29 19.82 1.95 19.84 1.94 0 4.42 6.97 10.14 6.24 7.29'/%3E%3Cpolygon class='cls-4' points='6.97 10.14 9.21 18.88 19.84 1.95 19.82 1.95 9.24 12.01 6.97 10.14'/%3E%3Cpolygon class='cls-3' points='6.97 10.14 9.24 12.01 19.82 1.95 6.24 7.29 6.97 10.14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 35px !important;
  background-position: right 0.75rem center !important;
}

/* -- END 2a. Submit Button — Base Style -- */


/* --------------------------------------------------------------------------
   2b. Submit Button — Hover
   -------------------------------------------------------------------------- */

.forminator-custom-form .forminator-button:hover {
  color: white !important;
  background-color: #14111F !important;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 19.84 18.88'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B filter: url(%23drop-shadow-1); %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B fill: %239a1036; %7D .cls-4 %7B fill: %23ff2232; %7D .cls-5 %7B fill: %2315bfcc; %7D %3C/style%3E%3Cfilter id='drop-shadow-1' x='-1.13' y='1.49' width='23' height='20' filterUnits='userSpaceOnUse'%3E%3CfeOffset dx='0' dy='.88'/%3E%3CfeGaussianBlur result='blur' stdDeviation='.28'/%3E%3CfeFlood flood-color='%23000' flood-opacity='.25'/%3E%3CfeComposite in2='blur' operator='in'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Ccircle class='cls-2' cx='11.13' cy='8.72' r='8.71'/%3E%3Cg class='cls-1'%3E%3Cpolygon class='cls-5' points='6.24 7.29 19.82 1.95 19.84 1.94 0 4.42 6.97 10.14 6.24 7.29'/%3E%3Cpolygon class='cls-4' points='6.97 10.14 9.21 18.88 19.84 1.95 19.82 1.95 9.24 12.01 6.97 10.14'/%3E%3Cpolygon class='cls-3' points='6.97 10.14 9.24 12.01 19.82 1.95 6.24 7.29 6.97 10.14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 30px !important;
  background-position: right 15px center !important;
}

/* -- END 2b. Submit Button — Hover -- */


/* --------------------------------------------------------------------------
   2c. Home Page Form — Overrides
   -------------------------------------------------------------------------- */

.home-form-group .forminator-custom-form .forminator-button {
    background-color: #14A5B8 !important;
    width: 100% !important;
}

.home-form-group .forminator-custom-form .forminator-button:hover {
    background-color: var(--wp--preset--color--main) !important;
}

.home-form-group .forminator-ui.forminator-custom-form[data-design=flat] .forminator-input {
    background-color: white !important;
    font-size: 1.165rem !important;
}

/* -- END 2c. Home Page Form — Overrides -- */


/* ==========================================================================
   END SECTION 2. FORMINATOR FORMS
   ========================================================================== */


/* ==========================================================================
   3. LAYOUT & SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   3a. Section Padding & Margin
   -------------------------------------------------------------------------- */

html body section {
    padding-block: clamp(3rem, 8.511vw + 1.298rem, 8rem) !important;
    padding-inline: clamp(1rem, 8.085vw + -0.367rem, 4rem) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.less-top-and-bot-pad {
    padding-block: 3rem !important;
}

/* -- END 3a. Section Padding & Margin -- */


/* --------------------------------------------------------------------------
   3b. Centre Grid Overflow Fix (768px–1024px)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

    .custom-center-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: var(--wp--preset--spacing--medium) !important;
        align-items: stretch !important;
    }

    .custom-center-grid > * {
        flex: 0 1 calc(50% - var(--wp--preset--spacing--medium)) !important;
        max-width: calc(50% - var(--wp--preset--spacing--medium)) !important;
        box-sizing: border-box !important;
    }

}

/* -- END 3b. Centre Grid Overflow Fix (768px–1024px) -- */


/* ==========================================================================
   END SECTION 3. LAYOUT & SECTIONS
   ========================================================================== */


/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */

/* --------------------------------------------------------------------------
   4a. Offer Column — Desktop & Responsive
   -------------------------------------------------------------------------- */

.offer-column {
    margin-bottom: -4rem !important;
}

@media (max-width: 1300px) {
    .offer-column {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 781px) {
    .offer-column {
        display: none !important;
    }
    .hero {
        padding-bottom: 0 !important;
    }
}

@media (min-width: 782px) {
    .hero {
        padding-top: 0 !important;
    }
}

/* -- END 4a. Offer Column — Desktop & Responsive -- */


/* --------------------------------------------------------------------------
   4b. Mobile Offer Tab
   -------------------------------------------------------------------------- */

@media (min-width: 783px) {
    .mobile-offer-tab {
        display: none !important;
    }
}

/* -- END 4b. Mobile Offer Tab -- */


/* ==========================================================================
   END SECTION 4. HERO SECTION
   ========================================================================== */


/* ==========================================================================
   5. CARDS
   ========================================================================== */

/* --------------------------------------------------------------------------
   5a. Card Border & Shadow
   -------------------------------------------------------------------------- */

.cards {
    border-radius: 5px !important;
    border-width: 8px !important;
    border-style: solid !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* -- END 5a. Card Border & Shadow -- */


/* --------------------------------------------------------------------------
   5b. Card Table Height
   -------------------------------------------------------------------------- */

.card-table {
    height: 100% !important;
}

/* -- END 5b. Card Table Height -- */


/* ==========================================================================
   END SECTION 5. CARDS
   ========================================================================== */


/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */

/* --------------------------------------------------------------------------
   6a. Pre-Header Paragraph
   -------------------------------------------------------------------------- */

.pre-header-para,
.pre-header-para b,
.pre-header-para strong {
    color: #e83333 !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
}

/* -- END 6a. Pre-Header Paragraph -- */


/* ==========================================================================
   END SECTION 6. TYPOGRAPHY
   ========================================================================== */


/* ==========================================================================
   7. NAVIGATION & Z-INDEX
   ========================================================================== */

/* --------------------------------------------------------------------------
   7a. Special Bar
   -------------------------------------------------------------------------- */

.special-bar {
    z-index: 99 !important;
}

/* -- END 7a. Special Bar -- */


/* --------------------------------------------------------------------------
   7b. High / Low Z-Index Utilities
   -------------------------------------------------------------------------- */

.high-z {
    z-index: 99 !important;
}

.low-z {
    z-index: -1 !important;
}

/* -- END 7b. High / Low Z-Index Utilities -- */


/* ==========================================================================
   END SECTION 7. NAVIGATION & Z-INDEX
   ========================================================================== */


/* ==========================================================================
   8. SCROLLING
   ========================================================================== */

/* --------------------------------------------------------------------------
   8a. Smooth Scroll
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

/* -- END 8a. Smooth Scroll -- */


/* ==========================================================================
   END SECTION 8. SCROLLING
   ========================================================================== */


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

/* --------------------------------------------------------------------------
   9a. Footer Contacts Border Radius (Mobile)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .footer-contacts {
        border-radius: 5px !important;
    }
}

/* -- END 9a. Footer Contacts Border Radius (Mobile) -- */


/* ==========================================================================
   END SECTION 9. FOOTER
   ========================================================================== */