/*
Theme Name:   Kraken Framework Child
Theme URI:    https://www.splashmg.ca
Description:  Kraken Framework is a foundational theme designed to help create WordPress websites with a strong focus on speed, efficiency, and optimization.
Author:       Splash Media Group Inc.
Author URI:   https://www.splashmg.ca
Template:     kraken-framework
Version:      3.4.0
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Copyright: (c) Splash Media Group
Tags: blog,accessibility-ready,custom-menu,featured-images,footer-widgets,theme-options,translation-ready
Text Domain: kraken-framework
*/


/*** >>> TABLE OF CONTENTS 
Break Points:
xs: 478px
sm: 767px
md: 991px
lg: 1280px
xl: 1440px
xxl: 1920px
┌───────────────────────────────┐
│ 1.0 FOUNDATIONS                │
│ ┌────────────────────────────┐ │
│ | Purpose: Global building   | │
│ | blocks, resets, defaults.  | │
│ └────────────────────────────┘ │
│  1.1 Reset / Base              │  (normalize, remove browser defaults, set base elements)
│  1.2 Body                      │  (global body styles: background, text color, layout overrides)
│  1.3 Typography Scale          │  (defines the base system of font sizes, weights, and line-heights used throughout the site)
│  1.4 Links                     │  (global link rules)
│  1.5 Buttons                   │  (global button rules)
│  1.6 Spacing                   │  (site-wide spacing system: margins, padding, CSS vars)
│  1.7 Utilities                 │  (generic, reusable helpers like spacing, flex, display, text alignment. eg: .no-margin)
│  1.8 Custom Helpers            │  (reusable classes for patterns unique to this project or theme. eg: .cta-shadows)
│  1.9 WordPress Defaults        │  (core WP classes, editor styles, alignment)
└───────────────────────────────┘
┌───────────────────────────────┐
│ 2.0 LAYOUT                     │
│ ┌────────────────────────────┐ │
│ | Purpose: Page structure &  | │
│ | positioning, site frame.   | │
│ └────────────────────────────┘ │
│  2.1 Grid / Flex System        │  (containers, rows, columns, layout grid)
│  2.2 Site Structure            │  (wrappers, max-widths, padding/margins)
└───────────────────────────────┘
┌───────────────────────────────┐
│ 3.0 CONTENT                    │
│ ┌────────────────────────────┐ │
│ | Purpose: Post/page content | │
│ | styling inside <main>.     | │
│ └────────────────────────────┘ │
│  3.1 Typography                │  (p, h1–h6, lists, blockquotes, inline text)
│    3.1.1 Base Typography       │  (HTML defaults: p, h1–h6, strong, em, lists, blockquote)
│    3.1.2 WP Font Presets       │  (overrides for .has-x-large-font-size, etc.)
│    3.1.3 Core Block Text Styles│  (e.g. blockquote, pullquote, verse, pre/code block)
│    3.1.4 Custom Text Utilities │  (helpers like .text-uppercase)
│  3.2 Media                     │  (images, captions, galleries, video, embeds)
│  3.3 Tables                    │  (table layout, borders, responsive scroll)
│  3.4 WordPress Defaults        │  (alignwide, alignfull, alignment classes)
│    3.4.1 WP Color Presets      │  (.has-text-color, .has-background, color palettes)
│    3.4.2 WP Spacing Presets    │  (.has-small-spacing, blockGap, margin/padding)
│  3.5 Core Blocks               │  (default styling for WP blocks: buttons, quotes, lists)
│  3.6 Custom Blocks             │  (ACF, custom plugin blocks, client-specific blocks)
└───────────────────────────────┘
┌───────────────────────────────┐
│ 4.0 COMPONENTS                 │
│ ┌────────────────────────────┐ │
│ | Purpose: Reusable site UI  | │
│ | parts, structural widgets. | │
│ └────────────────────────────┘ │
│  4.1 Notice Bar                │
│  4.2 Header                    │  (global header structure: logo, site branding, wrapper)
│  4.3 Navigation                │  (all menus styles: link layout, hover animations)
│  4.4 Hero / Banners            │
│  4.5 Page Titles               │  (page heading areas, breadcrumbs, meta)
│  4.6 Links                     │  (special link styling; hover effects eg: .arrow-link)
│  4.7 Buttons                   │  (special button styling; hover effects eg: .fancy-btn)
│  4.6 Footer                    │
└───────────────────────────────┘
┌───────────────────────────────┐
│ 5.0 BLOG / POSTS               │
│ ┌────────────────────────────┐ │
│ | Purpose: WordPress blog &  | │
│ | post-specific styling.     | │
│ └────────────────────────────┘ │
│  5.1 Archive Listings          │  (post lists, category pages)
│  5.2 Single Posts              │  (individual post page layout)
└───────────────────────────────┘
┌───────────────────────────────┐
│ 6.0 CPTs (CUSTOM POST TYPES)   │
│ ┌────────────────────────────┐ │
│ | Purpose: Styles for custom | │
│ | post type templates.       | │
│ └────────────────────────────┘ │
└───────────────────────────────┘
┌───────────────────────────────┐
│ 7.0 TEMPLATES & PAGES          │
│ ┌────────────────────────────┐ │
│ | Purpose: Page-level styles | │
│ | unique to site templates   | │
│ | and pages.                 | │
│ └────────────────────────────┘ │
│  7.1 Privacy Policy            │
│  7.2 Terms of Use              │
│  7.3 Accessibility Page        │
│  7.4 Site Map                  │
│  7.5 Homepage                  │  (background images, hero overrides)
└───────────────────────────────┘
┌───────────────────────────────┐
│ 8.0 ANIMATIONS                 │
│ ┌────────────────────────────┐ │
│ | Purpose: Site-wide motion  | │
│ | & transitions.             | │
│ └────────────────────────────┘ │
│  (keyframes and reusable       │
│   animation helpers, e.g.      │
│   .fade-in, .slide-in-left)│
│  (components like nav, buttons,│
│   links, banners can apply     │
│   these globally defined effects)
└───────────────────────────────┘
┌───────────────────────────────┐
│ 9.0 3RD-PARTY PLUGINS          │
│ ┌────────────────────────────┐ │
│ | Purpose: Plugin overrides  | │
│ | & integrations.            | │
│ └────────────────────────────┘ │
└───────────────────────────────┘
┌───────────────────────────────┐
│ 10.0 CUSTOM                    │
│ ┌────────────────────────────┐ │
│ | Purpose: Project-specific  | │
│ | styles not fitting elsewhere.│  (one-off classes, client-specific requests, ad-hoc elements)
│ └────────────────────────────┘ │
└───────────────────────────────┘
┌───────────────────────────────┐
│ 11.0 WEB FONTS                 │
│ ┌────────────────────────────┐ │
│ | Purpose: @font-face rules  | │
│ | & font loading strategies. | │
│ └────────────────────────────┘ │
└───────────────────────────────┘
<<< ***/



/* ==========================================================================
   1.0 FOUNDATIONS
   ========================================================================== */
   
   /* 1.1 RESET / BASE (normalize, remove browser defaults, set base elements)
   -------------------------------------------------------------------------- */
   
   /* 1.2 BODY (global body styles: background, text color, layout overrides)
   -------------------------------------------------------------------------- */

   /* Body Background Watermark */
    body .kraken-content {
        background-image: url("https://www.mdasmedia.ca/wp-content/uploads/2025/09/main-content-watermark.webp");
        background-size: 60% auto;
        background-repeat: no-repeat;
        background-position:top left;
    }

    .home .kraken-content {
        background-position: 0% 20% !important;
    }

    /* Padding Fix for the Double "kraken-main__inner" Div on the Sitemap Page */
    body.page-template-tp-site-map .kraken-main__inner > .kraken-main__inner {
        padding-top: 0;
        padding-bottom: 0;
    }


   /* 1.3 TYPOGRAPHY SCALE (defines the base system of font sizes, weights, and line-heights used throughout the site)
   -------------------------------------------------------------------------- */

      /* 1.3.1 Headings */
      h1 {
         --kraken-framework-h1-font-weight: 500;
      }

      h2 {
         --kraken-framework-h2-margin: 2rem 0 1.5rem 0;
         --kraken-framework-h2-font-size: 1rem;
         --kraken-framework-h2-font-line-height: 1.4;
         --kraken-framework-h2-font-weight: 500;
         --kraken-framework-h2-font-family: var(--kraken-framework-secondary-font-family);
         --kraken-framework-h2-font-color: var(--kraken-framework-palette-04);
      }

      h2.larger-h2 {
         font-size: clamp(2.6rem, .6667vw + 2.4667rem, 3rem);
         line-height: 1.1 !important;
         font-family: var(--kraken-framework-primary-font-family);
         font-weight: 500;
         color: var(--kraken-framework-strong-text-color);
      }

      h3 {
         --kraken-framework-h3-font-weight: 500;
      }

      h4 {
         --kraken-framework-h4-font-weight: 500;
      }


   /* 1.4 LINKS (global link rules)
   -------------------------------------------------------------------------- */

   a {
      text-decoration: none;

      :hover {
         text-decoration: underline;
      }

      :focus {
         text-decoration: underline;
      }
   }


   /* 1.5 BUTTONS (global button rules)
   -------------------------------------------------------------------------- */
   .wp-block-button__link {
      background-color: var(--kraken-framework-palette-01);
      border-radius: 15px;
      font-size: 0.9rem;
      font-weight: 500;
      text-transform: uppercase;
      font-style: italic;
      padding: calc(0.667em + 2px) calc(1.333em + 6px);
   }


   /* 1.6 SPACING (site-wide spacing system: margins, padding, CSS vars)
   -------------------------------------------------------------------------- */

   :root {
      --global-content-edge-padding: var(--kraken-framework-site-padding-left); /* Uses our Kraken padding on Kadence's edge padding */
   }

   /* WordPress Global Padding */
   .has-global-padding {
      padding-right: var(--kraken-framework-site-padding-right); /* Uses our Kraken padding */
      padding-left: var(--kraken-framework-site-padding-left); /* Uses our Kraken padding */
   }

   /* Mobile Content Padding */
   @media only screen and (max-width: 767px) {
      :root {
         --kraken-framework-site-padding-right: 1.5rem!important; /* Set to what you want the right padding to be on mobile */
         --kraken-framework-site-padding-left: 1.5rem!important; /* Set to what you want the right padding to be on mobile */
      }
   }


   /* 1.7 UTILITY CLASSES (generic, reusable helpers like spacing, flex, display, text alignment. eg: .no-margin)
      -------------------------------------------------------------------------- */

   /* 1.8 CUSTOM HELPERS (reusable classes for patterns unique to this project or theme. eg: .cta-shadows)
      -------------------------------------------------------------------------- */

   /* 1.9 WORDPRESS DEFAULTS (core WP classes, editor styles, alignment)
      -------------------------------------------------------------------------- */

   /* Images and media */
   .wp-block-image,
   .wp-block-cover img {
      margin: 0;
   }



/* ==========================================================================
   2.0 LAYOUT
   ========================================================================== */

   /* 2.1 GRID / FLEX SYSTEM (containers, rows, columns, layout grid)
   -------------------------------------------------------------------------- */

   /* 2.2 SITE STRUCTURE (wrappers, max-widths, padding/margins)
   -------------------------------------------------------------------------- */


/* ==========================================================================
   3.0 CONTENT
   ========================================================================== */

   /* 3.1 TYPOGRAPHY (p, h1–h6, lists, blockquotes, inline text)
   -------------------------------------------------------------------------- */

   /* 3.1.1 Base Typography (HTML defaults: p, h1–h6, strong, em, lists, blockquote) */

   /* Body text */
   body {
      font-weight: 300; /* applies to all body text */
   }

   /* Strong emphasis */
   strong {
      font-weight: 700; /* slightly lighter than full bold for balance */
   }

   .primary-font {font-family: "DM Serif Display", serif;}
   .secondary-font {font-family: "Fira Sans", sans-serif;}

   /* 3.1.2 WP Font Presets (overrides for .has-x-large-font-size, etc.) */
   .has-x-large-font-size {
      --wp--preset--font-size--x-large: clamp(2.8rem, 1vw + 2.6rem, 3.4rem);
      line-height: 1.1 !important;
      font-family: var(--kraken-framework-primary-font-family);
      font-weight: 500;
      color: var(--kraken-framework-strong-text-color);
   }

   p.has-x-large-font-size {
      line-height: inherit;
   }

   .has-large-font-size {
      --wp--preset--font-size--large: clamp(2.2rem, 1.3333vw + 1.9333rem, 3rem);
      line-height: 1.1 !important;
      font-family: var(--kraken-framework-primary-font-family);
      font-weight: 500;
      color: var(--kraken-framework-strong-text-color);
   }

   p.has-large-font-size {
      line-height: inherit;
   }

   .has-medium-font-size {
      --wp--preset--font-size--medium: clamp(2rem, 1.3333vw + 1.7333rem, 2.8rem);
      line-height: 1.1 !important;
      font-family: var(--kraken-framework-primary-font-family);
      font-weight: 500;
      color: var(--kraken-framework-strong-text-color);
   }

   p.has-medium-font-size {
      line-height: inherit;
   }

   /* .has-small-font-size {
      --wp--preset--font-size--small: clamp();
      line-height: ;
   } */

   p.has-small-font-size {
      line-height: inherit;
   }

   .package-price .has-accent-alt-color {
      font-size: clamp(2.6rem, .6667vw + 2.4667rem, 3rem);
      line-height: 1.1 !important;
      font-family: var(--kraken-framework-primary-font-family);
      font-weight: 500;
   }


/* 3.1.3 Core Block Text Styles (e.g. blockquote, pullquote, verse, pre/code block) */
/* 3.1.4 Custom Text Utilities (helpers like .text-uppercase) */


/* 3.2 MEDIA (images, captions, galleries, video, embeds)
-------------------------------------------------------------------------- */

/* 3.3 TABLES (table layout, borders, responsive scroll)
-------------------------------------------------------------------------- */

/* 3.4 WORDPRESS DEFAULTS (alignwide, alignfull, alignment classes)
-------------------------------------------------------------------------- */

    /* 3.4.1 WP Color Presets (.has-text-color, .has-background, color palettes) */
    /* 3.4.2 WP Spacing Presets (.has-small-spacing, blockGap, margin/padding) */


/* 3.5 CORE BLOCKS (default styling for WP blocks: buttons, quotes, lists)
-------------------------------------------------------------------------- */

/* 3.6 CUSTOM BLOCKS (ACF, custom plugin blocks, client-specific blocks)
-------------------------------------------------------------------------- */

   /* Shared container styles */
   .left-line-container,
   .right-line-container,
   .middle-line-container {
      position: relative;
      height: 150px;
      display: flex;
      align-items: flex-end;
   }

   /* Shared line styles */
   .main-horizontal,
   .main-horizontal::after,
   .main-horizontal::before,
   .middle-line {
      background-color: #f48762;
   }

   /* Base horizontal line */
   .main-horizontal {
      height: 3px;

      &::before,
      &::after {
         content: "";
         position: absolute;
      }

      &::before {
         bottom: 0;
         height: 100px;
         width: 3px;
      }

      &::after {
         bottom: -47px;
         width: 3px;
         height: 50px;
      }
   }

   /* Right line container */
   .right-line-container {
      justify-content: flex-end;
      width: 100%;
      margin-left: -20px;

      .main-horizontal {
         width: 80%;

         &::before { right: 0; }
         &::after  { right: 80%; }
      }
   }

   /* Left line container */
   .left-line-container {
      justify-content: flex-start;
      width: 100%;
      margin-left: 20px;

      .main-horizontal {
         width: 70%;

         &::before { left: 0; }
         &::after  { left: 70%; }
      }
   }

   /* Variant */
   .left-line-container--2 .main-horizontal {
      width: 90%;

      &::after {
         left: 90%;
      }
   }

   /* Middle line */
   .middle-line-container {
      margin-top: -75px;

      .middle-line {
         position: absolute;
         top: 0;
         left: 20px;
         width: 3px;
         height: 150px;
      }
   }

   /* Responsive adjustments */
   @media only screen and (max-width: 1024px) {
   .left-line-container {
      margin-bottom: 2rem !important;
      height: 75px !important;

      .main-horizontal {
         /* width: 50% !important; */

         &::before { height: 50px !important; }
         &::after  {
         /* left: 50% !important; */
         height: 25px !important;
         bottom: -22px !important;
         }
      }
   }

   .right-line-container .main-horizontal::before {
      height: 75px !important;
   }

   .right-line-container { height: 125px !important; }

   .middle-line-container {
      margin-top: -50px;

      .middle-line {
         height: 100px;
      }
   }   

   .thumb-drive { float: right; }
   }

   /* HOMEPAGE LINES - CHRIS
   -------------------------------------------------------------------------- */
   /* HOW TO CHANGE THE SHAPE (example: down 60, right 400, down 30)

   1. Update the SVG <path> "d" attribute:
      - M0 0   → Move to start (top-left).
      - V60    → Vertical down 60px.
      - H400   → Horizontal right 400px.
      - V90    → Vertical down to 90px (60 + 30).
      Example: <path d="M0 0 V60 H400 V90" />

   2. Update the viewBox so it fits the new dimensions:
      - Width: max H value + margin.
      - Height: final V value + margin.
      Example: viewBox="-2 -2 406 94"

   3. Update stroke-dasharray (total path length):
      - Add all segments together.
      - Vertical 60 + Horizontal 400 + Vertical 30 = 490
      Example: style="--dash:490" */

   .lpath {
      width: 667px;
      height: 200px;
      overflow: visible;
   }

   .lpath-simple {
      width: auto !important;
      height: 100px;
   }

   .lpath path {
      fill: none;
      stroke: #e34d2e;
      stroke-width: 3;
      stroke-linecap: square;
      stroke-dasharray: var(--dash, 360);
      stroke-dashoffset: var(--dash, 360);
      transition: stroke-dashoffset 800ms ease-out;
   }

   .lpath.is-visible path {
      stroke-dashoffset: 0;
   }

   /* END HOMEPAGE LINES */



/* ==========================================================================
   4.0 COMPONENTS
   ========================================================================== */

   /* 4.1 NOTICE BAR
   -------------------------------------------------------------------------- */

   /* 4.2 HEADER (global header structure: logo, site branding, wrapper)
   -------------------------------------------------------------------------- */

    .kraken-header {
        /* Standard Header */
        --kraken-framework-header-row-height-top: 0;
        
        /* Shrink Header Colors */
        --kraken-framework-header-row-shrink-height-top: 0;

        --kraken-framework-header-default-transparent-background: transparent;
        --kraken-framework-header-transparent-shrink-main-background: #ffffff;
        --kraken-framework-header-default-solid-background: transparent;
        --kraken-framework-header-default-mobile-background: #ffffff;

         --kraken-framework-header-transparent-scroll-up-main-background: #ffffff;

        /* Header Col Inner Styles. */
        .kraken-col-inner__row {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }

        transition: transform 600ms ease-in-out, background-color 100ms ease-in-out;

   }

   .home .kraken-header .kraken-logo--transparent {
      display: none;
      visibility: hidden;
   }

   .home .kraken-header .kraken-logo--default {
      display: block;
      visibility: visible;
      width: 150px;
      height: 88px;
   }


   /* 4.3 NAVIGATION (all menus styles: link layout, hover animations)
   -------------------------------------------------------------------------- */

   .home .kraken-navigation {
      --kraken-framework-default-desktop-nav-font-weight: 400;
      --kraken-framework-default-transparent-nav-font-color: #ffffff;
      --kraken-framework-default-transparent-nav-font-hover-color: var(--kraken-framework-accent-alt-color);
      --kraken-framework-default-transparent-nav-font-active-color: var(--kraken-framework-accent-alt-color);
      --kraken-framework-default-transparent-nav-font-focus-color: var(--kraken-framework-accent-alt-color);
   }

   .kraken-navigation, .is-scrolling .home .kraken-navigation {
      --kraken-framework-default-desktop-nav-font-weight: 400;
      --kraken-framework-default-transparent-nav-font-color: var(--kraken-framework-strong-text-color);
      --kraken-framework-default-transparent-nav-font-hover-color: var(--kraken-framework-accent-alt-color);
      --kraken-framework-default-transparent-nav-font-active-color: var(--kraken-framework-accent-alt-color);
      --kraken-framework-default-transparent-nav-font-focus-color: var(--kraken-framework-accent-alt-color);
   }



   /* 4.4 HERO / BANNERS
   -------------------------------------------------------------------------- */

   /* Homepage Styles */
   .home h1 {
      margin: 0rem 0 1.5rem 0;
      font-size: 1rem;
      line-height: 1.4;
      font-weight: 500;
      font-family: var(--kraken-framework-secondary-font-family);
      color: var(--kraken-framework-palette-04);
   }

   .hero-text-btm {
      line-height: 1.1 !important;
      font-size: clamp(3rem, 2.5vw + 2.5rem, 4.5rem) !important;
   }
   .hero-text-top {
      line-height: 1.1 !important;
      font-size: clamp(2rem, 2.5vw + 1.5rem, 3.5rem) !important;
   }

   /* Padding for Homepage Hero Inner Content*/
   @media only screen and (max-width: 1400px) {
      .home-hero-content-padding .kt-inside-inner-col {
         padding-left: 3rem;
         padding-right: 3rem;
      }
   }

   @media only screen and (max-width: 768px) {
      .home-hero-content-padding .kt-inside-inner-col {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
      }
   }


   /* NEW Inner Page Hero Styles */

   .sub-hero-outter-row {
      .sub-hero-inner-row {margin: 0 !important;}

      h1 {
         color: #ffffff;
         font-size: clamp(3rem, 2.5vw + 3rem, 4.5rem) !important;
         line-height: 1.1;
      }
   }

   @media only screen and (min-width: 991px) {
      .inner-hero-top-border {
         background: linear-gradient(
            to bottom,
            white 0px,
            white 110px,
            transparent 110px,
            transparent 100%
         );
      }
   }




   /* Inner Page Heros */


   @media only screen and (max-width: 990px) {

      .home-hero-container {
         height: 600px;
         min-height: 600px;
      }
      .home-hero--bottom, .home-hero--middle {
         top: 0 !important;
      }
   }



   /* 4.5 PAGE TITLES (page heading areas, breadcrumbs, meta)
   -------------------------------------------------------------------------- */

   /* 4.6 LINKS (special link styling; hover effects eg: .arrow-link)
   -------------------------------------------------------------------------- */

   /* 4.7 BUTTONS (special button styling; hover effects eg: .fancy-btn)
   -------------------------------------------------------------------------- */
   .anchor-btns {

      gap: 0;

      .wp-block-button:last-child .wp-block-button__link {
         border-left: none !important;
         border-right: none !important;
      }
      .wp-block-button:first-child .wp-block-button__link {
         padding-left: 0px !important;
      }

      .wp-block-button__link {
         background-color: transparent;
         font-weight: 500;
         padding: 0 20px;
         font-style: normal;
         text-transform: none;
         color: var(--kraken-framework-palette-04);
         border-right: 2px solid var(--kraken-framework-palette-04);
         border-radius: 0;
         line-height: 1;
      }

   }

   .custom-cta .wp-block-button__link {
      color: var(--kraken-framework-palette-02);
   }

   .custom-cta .wp-block-button__link:hover {
      background-color: #764471;
   }

   .btn-light .wp-block-button__link {
      background-color: var(--kraken-framework-palette-02) !important;
      color: var(--kraken-framework-palette-01) !important;
   }

   .btn-light .wp-block-button__link:hover {
      background-color: #df6941 !important;
   }


   /* 4.8 FOOTER
   -------------------------------------------------------------------------- */

   .kraken-footer {
      --kraken-framework-footer-borders: var(--wp--preset--color--palette-02);
      --kraken-framework-footer-navigation-link-color: #000000;
      --kraken-framework-footer-navigation-link-hover-color: var(--wp--preset--color--palette-02);
      --kraken-framework-footer-navigation-link-focus-color: var(--wp--preset--color--palette-02);
      --kraken-framework-footer-legal-navigation-link-color: #000000;
      --kraken-framework-footer-legal-navigation-link-hover-color: var(--wp--preset--color--palette-02);
      --kraken-framework-footer-legal-navigation-link-focus-color: var(--wp--preset--color--palette-02);
      --kraken-framework-footer-splash-credit: #000000;

      background-image: url("https://www.mdasmedia.ca/wp-content/uploads/2025/09/footer-watermark.webp");
      background-repeat: no-repeat;
      background-size: auto;
      background-position: 0% 50%;

      .kraken-footer__row--bottom {
         border-top: 1px solid var(--wp--preset--color--palette-02);
      }

      .kraken-footer__row--main {
         --kraken-framework-footer-row-padding-main: 1.5rem 0 3rem 0;
      }

      .kraken-logo--footer {
         display: flex;
         justify-content: center;
      }

      h2 {
         font-weight: 800;
         font-size: 2.125rem;
         font-style: italic;
         text-transform: uppercase;
      }

      h2.footer-h2-small {
         font-size: 1.2rem;
         font-style: normal;
         margin-bottom: 0;
      }

      .footer-extra-padding {padding-bottom: 3rem;}
      
      .kraken-footer__heading {font-size: 0.9rem;}

      p.has-medium-font-size {font-size: clamp(1.5rem, .8333vw + 1.3333rem, 2rem) !important;}

      .kraken-phone-number__link, .kraken-email__link {font-weight: 400;}

      .footer-nav,
      .footer-address {
         width: 50%;
      }

      .footer-address-row {
         display: flex;
         gap: 4rem;
         margin-top: 20px;
         border-top: 1px solid var(--wp--preset--color--palette-02);
         padding-top: 30px;
      }

      .kraken-navigation--extra-01 {
         .kraken-navigation__list {
               .menu-item {
                  a {
                     --kraken-framework-nav-link-font-color: var(--kraken-framework-footer-navigation-link-color);
                     --kraken-framework-nav-link-font-weight: 700;
                     text-transform: uppercase;

                     &:hover {
                           --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-footer-navigation-link-hover-color);
                     }

                     &:focus {
                           --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-footer-navigation-link-hover-color);
                     }
                  }
               }
         }
      }

      .kraken-navigation--legal {
         .kraken-navigation__list {
               .menu-item {
                  a {
                     --kraken-framework-nav-link-font-color: var(--kraken-framework-footer-legal-navigation-link-color);

                     &:hover {
                           --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-footer-legal-navigation-link-hover-color);
                     }

                     &:focus {
                           --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-footer-legal-navigation-link-hover-color);
                     }
                  }
               }
         }
      }

      .kraken-splash-credit {
         --kraken-framework-credit-hover-color: var(---kraken-framework-footer-splash-credit);
         --kraken-framework-credit-logo-fill: var(--kraken-framework-footer-splash-credit);
      }
      
   }

   @media only screen and (max-width: 991px) {
      .kraken-footer {
         background-position: 29% 150% !important;
      }
   }

   @media (min-width: 991px) {
      .kraken-footer {
         
         .kraken-logo--footer {
               display: block;
         }

         .kraken-footer__row--main {
               --kraken-framework-footer-row-padding-main: 3rem var(--kraken-framework-site-padding-right) 3rem var(--kraken-framework-site-padding-left);
         }

         .kraken-social-media--footer {
               .kraken-social-media__list {
                  justify-content: flex-start;
               }
         }
      }
   }

   @media only screen and (max-width: 1024px) {

      .kraken-footer {

         .kraken-logo--footer {margin: 1rem auto;}
         .footer-extra-padding {padding-bottom: 1rem !important;}
         .kraken-footer__row--main {
            --kraken-framework-footer-row-padding-main: 1.5rem 0 !important;
         }
         .kraken-footer__row--main, .kraken-footer__row--bottom {
            margin-left: 1.5rem;
            margin-right: 1.5rem;
         }
      }
      
   }




/* ==========================================================================
   5.0 BLOG / POSTS (WordPress blog & post-specific styling)
   ========================================================================== */

   /* 5.1 ARCHIVE LISTINGS (post lists, category pages)
   -------------------------------------------------------------------------- */

   /* 5.2 SINGLE POSTS (individual post page layout)
   -------------------------------------------------------------------------- */

   
/* ==========================================================================
   6.0 CPTs (CUSTOM POST TYPES) 
   ========================================================================== */

/* ==========================================================================
   7.0 TEMPLATES & PAGES
   ========================================================================== */

/* ==========================================================================
   8.0 ANIMATIONS
   ========================================================================== */

/* ==========================================================================
   9.0 3RD-PARTY PLUGINS
   ========================================================================== */

/* ==========================================================================
   10.0 CUSTOM
   ========================================================================== */
   /* Call to Action */
   .custom-cta {

      h2 {
         font-size: clamp(2.6rem, .6667vw + 2.4667rem, 3rem);
         line-height: 1.1 !important;
         font-family: var(--kraken-framework-primary-font-family);
         font-weight: 500;
         color: var(--kraken-framework-strong-text-color);
      }

      p.has-medium-font-size {
         --wp--preset--font-size--medium: clamp(1.6rem, .6667vw + 1.4667rem, 2rem);
         font-family:var(--kraken-framework-secondary-font-family);
         font-weight: 400;
      }

   }

   /* Packages */
   .packages .packages-column {
      border-right: 2px solid var(--wp--preset--color--palette-02);

      &:last-child {
      border-right: none !important;
      }

      h2.larger-h2 {
         margin-top: 0;
         font-size: clamp(2rem, .6667vw + 2.4667rem, 2.5rem);
         line-height: 1.1 !important;
         font-family: var(--kraken-framework-primary-font-family);
         font-weight: 500;
         color: var(--kraken-framework-strong-text-color);
      }
   }
   @media only screen and (max-width: 1024px) {
      .packages .packages-column {
            border-right: none !important;
      }
   }

   /* Faded Circle Images Section Styles */
   @media (min-width: 1025px) {
      .kb-row-layout-id54_31e378-5e > .kt-row-column-wrap > .breakout-fix {
         margin-inline-end: unset !important;
      }
      .kb-row-layout-id54_2a708d-ec > .kt-row-column-wrap > .breakout-fix {
         margin-inline-end: unset !important;
      }
   }


/* ==========================================================================
   11.0 WEB FONTS
   ========================================================================== */