/* ==========================================================================
	Project: Kraken Framework
	File: public.css
	Purpose: base + layout + components + utilities.
	Author: Christopher Satterthwaite  |  Updated: 2025-12-09  |  Version: 3.0.0
========================================================================== */

/* TOC
[00] Properties
[01] Root
[02] Normalize
[03] Base
    [03.00] Body
    [03.01] Typography Styles
    [03.02] Button Styles
[04] Layout
    [04.00] Header 
        [04.00.a] Header Inner 
        [04.00.b] Header Row
        [04.00.c] Header Solid
        [04.00.d] Fix for Firefox
        [04.00.e] Header Transparent
        [04.00.f] Header Top
        [04.00.g] Header Fixed
        [04.00.h] Header Sticky
        [04.00.i] Header Shrink
        [04.00.j] Header Hide
    [04.01] Main 
        [04.01.a] Pages 
        [04.01.b] Single
        [04.01.c] Archives
    [04.02] Content / Sidebar
    [04.03] Footer
[05] Components
    [05.00] Navigation Styles
      [05.00.a] Toggle Mobile Styles
      [05.00.b] Hamburger Styles
      [05.00.c] Mobile Drawer Styles
      [05.00.d] Navigation Styles
    [05.01] Breadcrumbs Styles
    [05.02] Social Media Styles
    [05.03] Logo Styles
      [05.03.a] Footer Logo Styles
    [05.04] Pagination Styles 
    [05.05] Post Navigation Styles
    [05.06] Header Notice Styles
    [05.07] Post / Single Post Styles      
      [05.07.a] Card Styles
      [05.07.b] Featured Image Styles
      [05.07.c] Meta Styles
      [05.07.d] Date Styles
      [05.07.e] Author Avatar Styles
      [05.07.f] Author Styles
      [05.07.g] Reading Time Styles
      [05.07.h] Comments Styles
      [05.07.i] Views Styles
      [05.07.j] Title Styles
      [05.07.k] Excerpt Styles
      [05.07.l] Link Styles
      [05.07.m] Single Post Title Styles
      [05.07.n] Tags Styles
      [05.07.o] Categories Styles
    [05.08] Related Post Styles
    [05.09] Comment Styles
    [05.10] Element Block Styles
    [05.11] Form Styles
    [05.12] Post Filter Styles
    [05.13] Splash Credit Styles
    [05.14] Scroll Top Styles
    [05.15] Email Styles
    [05.16] Phone Styles
    [05.17] Address Styles
    [05.18] Entry Styles
    [05.19] Search Styles
[06] Utilities
    [06.00] Header Skip Links
    [06.01] Screen Reader Styles
    [06.02] Animation Styles
      [06.02.a] Fade in Animation
      [06.02.b] Header Shrink Animation
      [06.02.c] Header Hide Animation
      [06.02.d] Header Transparent Animation
      [06.02.e] Navigation Transparent Animation
      [06.02.f] Scroll to top Button Animation
    [06.03] Helper Styles
*/

/* ================= [00] Properties ================= */
@property --kraken-framework-header-row-height-top {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --kraken-framework-header-row-height-main {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --kraken-framework-header-row-height-bottom {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --kraken-framework-header-position-top {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property  --kraken-framework-transparent-header-top-background {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property  --kraken-framework-transparent-header-main-background {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property  --kraken-framework-transparent-header-bottom-background {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --kraken-framework-nav-link-font-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}

@property --kraken-framework-nav-link-font-hover-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}

@property --kraken-framework-nav-link-font-active-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}

@property --kraken-framework-nav-link-font-focus-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}

/* ================= [01] Root ================= */
:root {
  /* -- Button Variables -- */
  --kraken-framework-button-font-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-button-font-hover-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-button-font-focus-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-button-font-size: 0.9rem;
  --kraken-framework-button-font-weight: 400;
  --kraken-framework-button-background: var(--kraken-framework-accent-color);
  --kraken-framework-button-hover-background: var(--kraken-framework-accent-alt-color);
  --kraken-framework-button-focus-background: var(--kraken-framework-accent-alt-color);
  --kraken-framework-button-border-radius: 0.3rem;
  --kraken-framework-button-padding: 0.3rem 0.9rem;

  /* -- Notice Bar Variables -- */
  --notice-bar-height: 40px;
  --notice-bar-padding: 0 1rem 0 1rem;
  --notice-bar-background-color: var(--kraken-framework-lighter-bg-color);
  --notice-bar-font-color: var(--kraken-framework-regular-text-color);
  --notice-bar-font-size: 0.8rem;
  --notice-bar-font-weight: 500;
  --notice-bar-link-font-color: var(--kraken-framework-accent-color);
  --notice-bar-link-font-hover-color: var(--kraken-framework-accent-alt-color);
  --notice-bar-link-font-focus-color: var(--kraken-framework-accent-alt-color);
  --notice-bar-button-font-color: var(--kraken-framework-offwhite-color);
  --notice-bar-button-font-hover-color: var(--kraken-framework-offwhite-color);
  --notice-bar-button-font-focus-color: var(--kraken-framework-offwhite-color);
  --notice-bar-button-background-color: var(--kraken-framework-accent-color);
  --notice-bar-button-background-hover-color: var(--kraken-framework-accent-alt-color);
  --notice-bar-button-background-focus-color: var(--kraken-framework-accent-alt-color);
  --notice-bar-button-border-color: var(--kraken-framework-accent-color);
  --notice-bar-button-border-hover-color: var(--kraken-framework-accent-alt-color);
  --notice-bar-button-border-focus-color: var(--kraken-framework-accent-alt-color);

  /* -- Notice Bar Parts -- */
  --kraken-framework-header-notice-height: var(--notice-bar-height);
  --kraken-framework-header-notice-padding: var(--notice-bar-padding);
  --kraken-framework-header-notice-font-size: var(--notice-bar-font-size);
  --kraken-framework-header-notice-background-color: var(--notice-bar-background-color);
  --kraken-framework-header-notice-font-color: var(--notice-bar-font-color);
  --kraken-framework-header-notice-font-weight: var(--notice-bar-font-weight);
  --kraken-framework-header-notice-link-color: var(--notice-bar-link-font-color);
  --kraken-framework-header-notice-link-hover-color: var(--notice-bar-link-font-hover-color);
  --kraken-framework-header-notice-link-focus-color: var(--notice-bar-link-font-focus-color);
  --kraken-framework-header-notice-button-color: var(--notice-bar-button-font-color);
  --kraken-framework-header-notice-button-background-color: var(--notice-bar-button-background-color);
  --kraken-framework-header-notice-button-hover-color: var(--notice-bar-button-font-hover-color);
  --kraken-framework-header-notice-button-hover-background-color:var(--notice-bar-button-background-hover-color);
  --kraken-framework-header-notice-button-focus-color: var(--notice-bar-button-font-focus-color);
  --kraken-framework-header-notice-button-focus-background-color:var(--notice-bar-button-background-focus-color);
  --kraken-framework-header-notice-button-border-radius: 100%;

  /* -- Header Variables -- */
  --header-max-width: 100%;
  --header-top-position: 0;
  --header-hide-top-position: calc(var(--header-top-row-height) * -1);
  --header-top-row-height: 40px;
  --header-main-row-height: 90px;
  --header-bottom-row-height: 0px;
  --header-top-row-shrink-height: 30px;
  --header-main-row-shrink-height: 70px;
  --header-bottom-row-shrink-height: 0px;
  --header-mobile-top-row-height: 20px;
  --header-mobile-main-row-height: 40px;
  --header-mobile-bottom-row-height: 0px;
  --header-solid-background-color: var(--kraken-framework-offwhite-color);
  --header-transparent-background-color: rgba(0,0,0,0.5);
  --header-transparent-background-color-scroll: rgba(0,0,0,0.8);
  --kraken-framework-header-height: calc(var(--header-top-row-height) + var(--header-main-row-height) + var(--header-bottom-row-height));
  
  /* -- Header Parts -- */
  --kraken-framework-header-width: var(--header-max-width);
  --kraken-framework-header-max-width-inner: var(--kraken-framework-max-width);
  --kraken-framework-header-position-top: var(--header-top-position);
  --kraken-framework-header-row-height-top: var(--header-top-row-height);
  --kraken-framework-header-row-height-main: var(--header-main-row-height);
  --kraken-framework-header-row-height-bottom: var(--header-bottom-row-height);
  --kraken-framework-header-mobile-row-height-top: var(--header-mobile-top-row-height);
  --kraken-framework-header-mobile-row-height-main: var(--header-mobile-main-row-height);
  --kraken-framework-header-mobile-row-height-bottom: var(--header-mobile-bottom-row-height);
  --kraken-framework-header-row-padding-top: 0 var(--kraken-framework-site-padding-right) 0 var(--kraken-framework-site-padding-left);
  --kraken-framework-header-row-padding-main: 0.5rem var(--kraken-framework-site-padding-right) 0.5rem var(--kraken-framework-site-padding-left);
  --kraken-framework-header-row-padding-bottom: 0 var(--kraken-framework-site-padding-right) 0 var(--kraken-framework-site-padding-left);
  --kraken-framework-solid-header-top-background: var(--header-solid-background-color);
  --kraken-framework-solid-header-top-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-solid-header-main-background: var(--header-solid-background-color);
  --kraken-framework-solid-header-main-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-solid-header-bottom-background: var(--header-solid-background-color);
  --kraken-framework-solid-header-bottom-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-transparent-header-top-background: var(--header-transparent-background-color);
  --kraken-framework-transparent-header-top-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-transparent-header-main-background: var(--header-transparent-background-color);
  --kraken-framework-transparent-header-main-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-transparent-header-bottom-background: var(--header-transparent-background-color);
  --kraken-framework-transparent-header-bottom-color: var(--kraken-framework-offwhite-color);

  /* -- Navigation Variables -- */
  /* - Mobile - */ 
  --navigation-mobile-gap: 0.5; 
  --navigation-mobile-link-padding: 0.5rem 0;
  --navigation-mobile-link-margin: 0;
  --navigation-mobile-font-size: 1.2rem;
  --navigation-mobile-font-weight: 700;
  --navigation-mobile-font-line-height: 1.2;
  --navigation-mobile-font-color: var(--kraken-framework-regular-text-color);
  --navigation-mobile-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-mobile-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-mobile-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-mobile-sub-link-padding: 0.5rem 0;
  --navigation-mobile-sub-link-margin: 0;
  --navigation-mobile-sub-font-size:1.2rem;
  --navigation-mobile-sub-font-weight: 500;
  --navigation-mobile-sub-font-line-height: 1.2;
  --navigation-mobile-sub-font-color: var(--kraken-framework-regular-text-color);
  --navigation-mobile-sub-font-hover-color: var(--kraken-framework-accent-color);
  --navigation-mobile-sub-font-active-color: var(--kraken-framework-accent-color);
  --navigation-mobile-sub-font-focus-color: var(--kraken-framework-accent-color);
  
  /* - Hamburger - */
  --navigation-hamburger-gap: 0;
  --navigation-hamburger-link-padding: 0.5rem 0;
  --navigation-hamburger-link-margin:0;
  --navigation-hamburger-font-size: 2.5rem;
  --navigation-hamburger-font-weight: 700;
  --navigation-hamburger-font-line-height: 1.2;  
  --navigation-hamburger-font-color: var(--kraken-framework-regular-text-color);
  --navigation-hamburger-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-hamburger-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-hamburger-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-hamburger-sub-link-padding: 0.5rem 0;
  --navigation-hamburger-sub-link-margin: 0;
  --navigation-hamburger-sub-font-size: 1.2rem;
  --navigation-hamburger-sub-font-weight: 500;
  --navigation-hamburger-sub-font-line-height: 1.2;
  --navigation-hamburger-sub-font-color: var(--kraken-framework-regular-text-color);
  --navigation-hamburger-sub-font-hover-color: var(--kraken-framework-accent-color);
  --navigation-hamburger-sub-font-active-color: var(--kraken-framework-accent-color);
  --navigation-hamburger-sub-font-focus-color: var(--kraken-framework-accent-color);
  
  /* - Primary - */
  --navigation-primary-gap: 1rem;
  --navigation-primary-link-padding: 0.5rem 0.5rem;
  --navigation-primary-link-margin:0;
  --navigation-primary-font-size: 0.9rem;
  --navigation-primary-font-weight: 700;
  --navigation-primary-font-line-height: 1.2;  
  --navigation-primary-font-color: var(--kraken-framework-regular-text-color);
  --navigation-primary-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-sub-link-padding: 0.3rem 0;
  --navigation-primary-sub-link-margin: 0;
  --navigation-primary-sub-font-size:0.8rem;
  --navigation-primary-sub-font-weight: 500;
  --navigation-primary-sub-font-line-height: 1.2;
  --navigation-primary-sub-font-color: var(--kraken-framework-regular-text-color);
  --navigation-primary-sub-font-hover-color: var(--kraken-framework-accent-color);
  --navigation-primary-sub-font-active-color: var(--kraken-framework-accent-color);
  --navigation-primary-sub-font-focus-color: var(--kraken-framework-accent-color);
  
  /* - Secondary - */
  --navigation-secondary-gap: 1rem;
  --navigation-secondary-link-padding: 0.5rem 0.5rem;
  --navigation-secondary-link-margin:0;
  --navigation-secondary-font-size: 0.9rem;
  --navigation-secondary-font-weight: 700;
  --navigation-secondary-font-line-height: 1.2;  
  --navigation-secondary-font-color: var(--kraken-framework-regular-text-color);
  --navigation-secondary-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-sub-link-padding: 0.3rem 0;
  --navigation-secondary-sub-link-margin: 0;
  --navigation-secondary-sub-font-size:0.8rem;
  --navigation-secondary-sub-font-weight: 500;
  --navigation-secondary-sub-font-line-height: 1.2;
  --navigation-secondary-sub-font-color: var(--kraken-framework-regular-text-color);
  --navigation-secondary-sub-font-hover-color: var(--kraken-framework-accent-color);
  --navigation-secondary-sub-font-active-color: var(--kraken-framework-accent-color);
  --navigation-secondary-sub-font-focus-color: var(--kraken-framework-accent-color);
  
  /* - Legal - */
  --navigation-legal-mobile-gap: 0.5rem;
  --navigation-legal-link-mobile-padding: 0;
  --navigation-legal-link-mobile-margin:0;
  --navigation-legal-font-mobile-size: 1rem;
  --navigation-legal-font-mobile-weight: 400;
  --navigation-legal-font-mobile-line-height: 1.2;
  --navigation-legal-desktop-gap: 1rem;
  --navigation-legal-link-desktop-link-padding: 0.2rem 0.5rem;
  --navigation-legal-link-desktop-link-margin: 0;
  --navigation-legal-font-desktop-size: 0.7rem;  
  --navigation-legal-font-color: var(--kraken-framework-regular-text-color);
  --navigation-legal-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-legal-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-legal-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-legal-sub-link-padding: 0.5rem 0;
  --navigation-legal-sub-link-margin: 0;
  --navigation-legal-sub-font-size:0.7rem;
  --navigation-legal-sub-font-weight: 400;
  --navigation-legal-sub-font-line-height: 1.2;
  --navigation-legal-sub-font-color: var(--kraken-framework-regular-text-color);
  --navigation-legal-sub-font-hover-color: var(--kraken-framework-accent-color);
  --navigation-legal-sub-font-active-color: var(--kraken-framework-accent-color);
  --navigation-legal-sub-font-focus-color: var(--kraken-framework-accent-color);
  
  /* - Extra 01 - */
  --navigation-extra-01-gap: 0.5rem;
  --navigation-extra-01-link-padding: 0;
  --navigation-extra-01-link-margin:0;
  --navigation-extra-01-font-size: 0.8rem;
  --navigation-extra-01-font-weight: 400;
  --navigation-extra-01-font-line-height: 1.2;  
  --navigation-extra-01-font-color: var(--kraken-framework-regular-text-color);
  --navigation-extra-01-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-extra-01-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-extra-01-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-extra-01-sub-link-padding: 0.5rem 0;
  --navigation-extra-01-sub-link-margin: 0;
  --navigation-extra-01-sub-font-size:0.8rem;
  --navigation-extra-01-sub-font-weight: 400;
  --navigation-extra-01-sub-font-line-height: 1.2;
  --navigation-extra-01-sub-font-color: var(--kraken-framework-regular-text-color);
  --navigation-extra-01-sub-font-hover-color: var(--kraken-framework-accent-color);
  --navigation-extra-01-sub-font-active-color: var(--kraken-framework-accent-color);
  --navigation-extra-01-sub-font-focus-color: var(--kraken-framework-accent-color);
  
  /* - Subpage - */
  --navigation-subpage-gap: 0.5rem;
  --navigation-subpage-link-padding: 0;
  --navigation-subpage-link-margin:0;
  --navigation-subpage-font-size: 1rem;
  --navigation-subpage-font-weight: 400;
  --navigation-subpage-font-line-height: 1.2;
  --navigation-subpage-font-color: var(--kraken-framework-regular-text-color);
  --navigation-subpage-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-subpage-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-subpage-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-subpage-sub-link-padding: 0.5rem 0;
  --navigation-subpage-sub-link-margin: 0;
  --navigation-subpage-sub-font-size: 0.8rem;
  --navigation-subpage-sub-font-weight: 400;
  --navigation-subpage-sub-font-line-height: 1.2;
  --navigation-subpage-sub-font-color: var(--kraken-framework-regular-text-color);
  --navigation-subpage-sub-font-hover-color: var(--kraken-framework-accent-color);
  --navigation-subpage-sub-font-active-color: var(--kraken-framework-accent-color);
  --navigation-subpage-sub-font-focus-color: var(--kraken-framework-accent-color);
  
  /* - Transparent Primary - */  
  --navigation-primary-transparent-font-color: var(--kraken-framework-offwhite-color);
  --navigation-primary-transparent-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-transparent-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-transparent-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-transparent-scroll-font-color: var(--kraken-framework-offwhite-color);
  --navigation-primary-transparent-scroll-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-transparent-scroll-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-primary-transparent-scroll-font-active-color: var(--kraken-framework-accent-alt-color);
  
  /* - Transparent Secondary - */
  --navigation-secondary-transparent-font-color: var(--kraken-framework-offwhite-color);
  --navigation-secondary-transparent-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-transparent-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-transparent-font-active-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-transparent-scroll-font-color: var(--kraken-framework-offwhite-color);
  --navigation-secondary-transparent-scroll-font-hover-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-transparent-scroll-font-focus-color: var(--kraken-framework-accent-alt-color);
  --navigation-secondary-transparent-scroll-font-active-color: var(--kraken-framework-accent-alt-color);

  /* -- Breadcrumb Variables -- */
  --breadcrumb-font-size: 0.8rem;
  --breadcrumb-font-weight: 400;
  --breadcrumb-font-color: var(--kraken-framework-regular-text-color);
  --breadcrumb-font-hover-color: var(--kraken-framework-accent-color);
  --breadcrumb-font-focus-color: var(--kraken-framework-accent-color);
  --breadcrumb-font-active-color: var(--kraken-framework-accent-color);

  /* -- Breadcrumb Parts -- */
  --kraken-framework-breadcrumbs-font-color: var(--breadcrumb-font-color);
  --kraken-framework-breadcrumbs-font-hover-color: var(--breadcrumb-font-hover-color);
  --kraken-framework-breadcrumbs-font-focus-color: var(--breadcrumb-font-focus-color);
  --kraken-framework-breadcrumbs-font-active-color: var(--breadcrumb-font-active-color);
  --kraken-framework-breadcrumbs-font-size: var(--breadcrumb-font-size);
  --kraken-framework-breadcrumbs-font-weight: var(--breadcrumb-font-weight);
  --kraken-framework-breadcrumbs-divider: ">";
  --kraken-framework-breadcrumbs-divider-margin: 0.5rem;
  --kraken-framework-breadcrumbs-margin: 0 0 1.5rem 0;

  /* -- Posts -- */
  /* - Card - */
  --kraken-framework-post-padding: 1.5rem;
  --kraken-framework-post-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-post-font-background: var(--kraken-framework-offwhite-color);
  --kraken-framework-post-border-radius: 0.5rem;

  /* - Post Title - */
  --kraken-framework-post-title-margin: 0.5rem 0 1rem 0;
  --kraken-framework-post-title-padding: 0;
  --kraken-framework-post-title-font-size: 1.8rem;
  --kraken-framework-post-title-line-height: 1.1;
  --kraken-framework-post-title-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-post-title-hover-font-color:var(--kraken-framework-accent-color);

  /* - Single Title - */
  --kraken-framework-single-post-title-margin:1.5rem 0 3rem 0;
  --kraken-framework-single-post-title-padding:0;
  --kraken-framework-single-post-title-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-single-post-title-font-size: 3rem;
  --kraken-framework-single-post-title-line-height:1.2;

  /* - Post Image - */
  --kraken-framework-post-image-aspect-ratio: 16 / 9;
  --kraken-framework-post-image-border-radius: 0.3rem;
  --kraken-framework-post-image-margin: 0 0 1.5rem 0;
  --kraken-framework-post-image-padding: 0;

  /* - Single Image - */
  --kraken-framework-single-post-image-aspect-ratio:16 / 9;
  --kraken-framework-single-post-image-margin: 0 0 4rem 0;
  --kraken-framework-single-post-image-padding: 0;
  --kraken-framework-single-post-image-border-radius: 0.3rem;

  /* - Meta - */
  --kraken-framework-post-date-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-post-date-font-size: 0.8rem;
  --kraken-framework-post-date-line-height: 1.1;
  --kraken-framework-post-author-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-post-author-hover-font-color: var(--kraken-framework-accent-color);
  --kraken-framework-post-author-font-size: 0.8rem;
  --kraken-framework-post-author-line-height: 1.1;
  --kraken-framework-post-reading-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-post-reading-font-size: 0.8rem;
  --kraken-framework-post-reading-line-height: 1.1;
  --kraken-framework-post-comments-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-post-comments-hover-font-color: var(--kraken-framework-accent-color);
  --kraken-framework-post-comments-font-size: 0.8rem;
  --kraken-framework-post-comments-line-height: 1.1;
  --kraken-framework-post-views-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-post-views-font-size: 0.8rem;
  --kraken-framework-post-views-line-height: 1.1;

  /* - Excerpt - */
  --kraken-framework-post-excerpt-margin: 0 0 1rem 0;
  --kraken-framework-post-excerpt-padding: 0;
  --kraken-framework-post-excerpt-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-post-excerpt-font-size: 1rem;
  --kraken-framework-post-excerpt-line-height: 1.5;

  /* - Tags - */
  --kraken-framework-tag-label-font-size: 0.8rem;
  --kraken-framework-tag-label-font-weight: 700;
  --kraken-framework-tag-padding:0.2rem 0.5rem;
  --kraken-framework-tag-background: transparent;
  --kraken-framework-tag-hover-background:var(--kraken-framework-accent-color);
  --kraken-framework-tag-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-tag-font-hover-color:var(--kraken-framework-offwhite-color);
  --kraken-framework-tag-border: 1px solid var(--kraken-framework-regular-text-color);
  --kraken-framework-tag-hover-border: 1px solid var(--kraken-framework-accent-color);
  --kraken-framework-tag-border-radius: 0.5rem;
  --kraken-framework-tag-font-size: 0.7rem;
  --kraken-framework-tag-line-height: 1.1;

  /* - Categories - */
  --kraken-framework-categories-label-font-size: 0.8rem;
  --kraken-framework-categories-label-font-weight: 700;
  --kraken-framework-categories-padding:0.2rem 0.5rem;
  --kraken-framework-categories-background: transparent;
  --kraken-framework-categories-hover-background:var(--kraken-framework-accent-color);
  --kraken-framework-categories-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-categories-font-hover-color:var(--kraken-framework-offwhite-color);
  --kraken-framework-categories-border: 1px solid var(--kraken-framework-regular-text-color);
  --kraken-framework-categories-hover-border: 1px solid var(--kraken-framework-accent-color);
  --kraken-framework-categories-border-radius: 0.5rem;
  --kraken-framework-categories-font-size: 0.7rem;
  --kraken-framework-categories-line-height: 1.1;

  /* - Post Link - */
  --kraken-framework-post-link-font-color:var(--kraken-framework-regular-text-color);
  --kraken-framework-post-link-hover-font-color:var(--kraken-framework-accent-color);
  --kraken-framework-post-link-font-size:1rem;
  --kraken-framework-post-link-line-height:1.1;

  /* -- Pagination Variables -- */
  --kraken-framework-pagination-background-color: var(--kraken-framework-accent-color);
  --kraken-framework-pagination-font-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-pagination-border-color: var(--kraken-framework-accent-color);
  --kraken-framework-pagination-hover-background-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-pagination-hover-font-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-pagination-hover-border-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-pagination-focus-background-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-pagination-focus-font-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-pagination-focus-border-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-pagination-active-background-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-pagination-active-font-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-pagination-active-border-color: var(--kraken-framework-accent-color);
  --kraken-framework-pagination-font-size: 0.9rem;
  --kraken-framework-pagination-icon-font-size: 1rem;
  --kraken-framework-pagination-icon-width: 8.75px;
  --kraken-framework-pagination-icon-height: 14px;
  --kraken-framework-pagination-link-width: 30px;
  --kraken-framework-pagination-link-height: 30px;
  --kraken-framework-pagination-border-radius: 5px;
  --kraken-framework-pagination-previous-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.75' height='14' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256L246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
  --kraken-framework-pagination-next-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.75' height='14' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256L73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  
  /* -- Social Media Variables -- */
  --kraken-framework-social-margin: 3rem 0 3rem 0;
  --kraken-framework-social-button-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-social-button-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-social-button-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-social-button-width: 25px;
  --kraken-framework-social-button-height: 25px;

  /* -- Footer Variables -- */
  --footer-max-width: 100%;
  --footer-inner-max-width: var(--kraken-framework-max-width);
  --footer-background: var(--kraken-framework-offwhite-color);
  --footer-color: var(--kraken-framework-regular-text-color);

  /* -- Footer Parts -- */
  --kraken-framework-footer-background: var(--footer-background);
  --kraken-framework-footer-color: var(--footer-color);
  --kraken-framework-footer-width: var(--footer-max-width);
  --kraken-framework-footer-text-align-desktop: left;
  --kraken-framework-footer-text-align-mobile: center;
  --kraken-framework-footer-max-width-inner: var(--footer-inner-max-width);
  --kraken-framework-footer-row-padding-top: 2rem var(--kraken-framework-site-padding-right) 2rem var(--kraken-framework-site-padding-left);
  --kraken-framework-footer-row-padding-main: 0.5rem var(--kraken-framework-site-padding-right) 0.5rem var(--kraken-framework-site-padding-left);
  --kraken-framework-footer-row-padding-bottom: 0.5rem var(--kraken-framework-site-padding-right) 0.5rem var(--kraken-framework-site-padding-left);

  /* -- Scroll Top Variables -- */
  --scroll-to-top-font-color: var(--kraken-framework-offwhite-color);
  --scroll-to-top-font-hover-color: var(--kraken-framework-offwhite-color);
  --scroll-to-top-font-focus-color: var(--kraken-framework-offwhite-color);
  --scroll-to-top-background-color: var(--kraken-framework-accent-color);
  --scroll-to-top-background-hover-color: var(--kraken-framework-accent-color);
  --scroll-to-top-background-focus-color: var(--kraken-framework-accent-color);

  /* -- Scroll Top Parts -- */
  --kraken-framework-header-scroll-top-pos-right: 15px;
  --kraken-framework-header-scroll-top-pos-bottom: 80px;
  --kraken-framework-header-scroll-top-color: var(--scroll-to-top-font-color);
  --kraken-framework-header-scroll-top-hover-color: var(--scroll-to-top-font-hover-color);
  --kraken-framework-header-scroll-top-focus-color: var(--scroll-to-top-font-focus-color);
  --kraken-framework-header-scroll-top-background-color: var(--scroll-to-top-background-color);
  --kraken-framework-header-scroll-top-hover-background-color: var(--scroll-to-top-background-hover-color);
  --kraken-framework-header-scroll-top-focus-background-color: var(--scroll-to-top-background-focus-color);
  --kraken-framework-header-scroll-top-border-color: var(--scroll-to-top-background-color);
  --kraken-framework-header-scroll-top-border-hover-color: var(--scroll-to-top-background-hover-color);
  --kraken-framework-header-scroll-top-border-focus-color: var(--scroll-to-top-background-focus-color);
  --kraken-framework-header-scroll-top-border-size: 0;
  --kraken-framework-header-scroll-top-border-radius: 0.3rem;
  --kraken-framework-header-scroll-top-width: 30px;
  --kraken-framework-header-scroll-top-height: 30px;
}

/* ================= [02] Normalize ================= */
progress,
sub,
sup {
  vertical-align: baseline;
}

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

body {
  margin: 0;
}

hr {
  height: 0;
  color: inherit;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
pre,
samp {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: ButtonText dotted 1px;
}

:-moz-ui-invalid {
  box-shadow: none;
}

legend {
  padding: 0;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

img {
  max-width: 100%;
}

/* ================= [03] Base ================= */
/* -- [03.00] Body -- */
html {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: clamp(var(--kraken-framework-mobile-base-font-size), 2.5vw, var(--kraken-framework-desktop-base-font-size));
  line-height: 29px;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background: var(--kraken-framework-subtle-bg-color);
  color: var(--kraken-framework-regular-text-color);
  font-family: var(--kraken-framework-secondary-font-family);
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: var(--kraken-framework-base-line-height);
}

body.mobile-toggle {
  overflow: hidden;
}

body.mobile-toggle .kraken-navigation__drawer {
  display: block;
}

body.hamburger-toggle {
  overflow: hidden;
}

body.hamburger-toggle .kraken-navigation__drawer {
  display: block;
}

@media (min-width: 991px) {
  body.body-notice--is-active.body--overlay {
    padding-top: calc(var(--kraken-framework-header-height) + var(--notice-bar-height));
  }
}

@media (min-width: 991px) {
  body.body-notice--is-active.body--hide {
    padding-top: calc(var(--kraken-framework-header-height) + var(--notice-bar-height));
  }
}

body.body-notice--is-active.body--top {
  padding-top: 0;
}

body.body-notice--is-active.body--sticky {
  padding-top: 0;
}

body.body-notice--is-active.body--transparent {
  padding-top: 0;
}

body.body-notice--is-active.body--transparent {
  padding-top: 0;
}

@media (min-width: 991px) {
  body.body-notice--is-active.body--transparent.blog {
    padding-top: calc(var(--kraken-framework-header-height) + var(--notice-bar-height));
  }
}

@media (min-width: 991px) {
  body.body-notice--is-disabled.body--overlay {
    padding-top: var(--kraken-framework-header-height);
  }
}

@media (min-width: 991px) {
  body.body-notice--is-disabled.body--hide {
    padding-top: var(--kraken-framework-header-height);
  }
}

body.body-notice--is-disabled.body--hide.error404 {
  padding-top: 0;
}

body.body-notice--is-disabled.body--transparent {
  padding-top: 0;
}

@media (min-width: 991px) {
  body.body-notice--is-disabled.body--transparent.blog {
    padding-top: var(--kraken-framework-header-height);
  }
}

/* -- [03.01] Typography Styles -- */
h1, .h1 {
  --kraken-framework-h1-margin: 1.5rem 0;
  --kraken-framework-h1-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-h1-font-family: var(--kraken-framework-primary-font-family);
  --kraken-framework-h1-font-size: clamp(2.5rem, 5vw, 4rem);
  --kraken-framework-h1-font-line-height: 1.2;
  --kraken-framework-h1-font-weight: 700;
  margin: var(--kraken-framework-h1-margin);
  color: var(--kraken-framework-h1-font-color);
  font-family: var(--kraken-framework-h1-font-family);
  font-size: var(--kraken-framework-h1-font-size);
  line-height: var(--kraken-framework-h1-font-line-height);
  font-weight: var(--kraken-framework-h1-font-weight);
}

h2, .h2 {
  --kraken-framework-h2-margin: 1.25rem 0;
  --kraken-framework-h2-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-h2-font-family: var(--kraken-framework-primary-font-family);
  --kraken-framework-h2-font-size: clamp(2rem, 4vw, 3rem);
  --kraken-framework-h2-font-line-height: 1.4;
  --kraken-framework-h2-font-weight: 700;
  margin: var(--kraken-framework-h2-margin);
  color: var(--kraken-framework-h2-font-color);
  font-family: var(--kraken-framework-h2-font-family);
  font-size: var(--kraken-framework-h2-font-size);
  line-height: var(--kraken-framework-h2-font-line-height);
  font-weight: var(--kraken-framework-h2-font-weight);
}

h3, .h3 {
  --kraken-framework-h3-margin: 1rem 0;
  --kraken-framework-h3-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-h3-font-family: var(--kraken-framework-primary-font-family);
  --kraken-framework-h3-font-size: clamp(1.5rem, 3vw, 2rem);
  --kraken-framework-h3-font-line-height: 1.4;
  --kraken-framework-h3-font-weight: 700;
  margin: var(--kraken-framework-h3-margin);
  color: var(--kraken-framework-h3-font-color);
  font-family: var(--kraken-framework-h3-font-family);
  font-size: var(--kraken-framework-h3-font-size);
  line-height: var(--kraken-framework-h3-font-line-height);
  font-weight: var(--kraken-framework-h3-font-weight);
}

h4, .h4 {
  --kraken-framework-h4-margin: 0.75rem 0;
  --kraken-framework-h4-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-h4-font-family: var(--kraken-framework-primary-font-family);
  --kraken-framework-h4-font-size: clamp(1rem, 2vw, 1.25rem);
  --kraken-framework-h4-font-line-height: 1.4;
  --kraken-framework-h4-font-weight: 700;
  margin: var(--kraken-framework-h4-margin);
  color: var(--kraken-framework-h4-font-color);
  font-family: var(--kraken-framework-h4-font-family);
  font-size: var(--kraken-framework-h4-font-size);
  line-height: var(--kraken-framework-h4-font-line-height);
  font-weight: var(--kraken-framework-h4-font-weight);
}

h5, .h5 {
  --kraken-framework-h5-margin: 0.5rem 0;
  --kraken-framework-h5-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-h5-font-family: var(--kraken-framework-primary-font-family);
  --kraken-framework-h5-font-size: clamp(1rem, 1.5vw, 1rem);
  --kraken-framework-h5-font-line-height: 1.4;
  --kraken-framework-h5-font-weight: 700;
  margin: var(--kraken-framework-h5-margin);
  color: var(--kraken-framework-h5-font-color);
  font-family: var(--kraken-framework-h5-font-family);
  font-size: var(--kraken-framework-h5-font-size);
  line-height: var(--kraken-framework-h5-font-line-height);
  font-weight: var(--kraken-framework-h5-font-weight);
}

h6, .h6 {
  --kraken-framework-h6-margin: 0.25rem 0;
  --kraken-framework-h6-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-h6-font-family: var(--kraken-framework-primary-font-family);
  --kraken-framework-h6-font-size: clamp(0.875rem, 1vw, 1rem);
  --kraken-framework-h6-font-line-height: 1.4;
  --kraken-framework-h6-font-weight: 700;
  margin: var(--kraken-framework-h6-margin);
  color: var(--kraken-framework-h6-font-color);
  font-family: var(--kraken-framework-h6-font-family);
  font-size: var(--kraken-framework-h6-font-size);
  line-height: var(--kraken-framework-h6-font-line-height);
  font-weight: var(--kraken-framework-h6-font-weight);
}

p, ul, ol, pre, table, blockquote {
  margin: 1rem 0;
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}

sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

a {
  --kraken-framework-a-font-color: var(--kraken-framework-accent-color);
  --kraken-framework-a-hover-font-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-a-focus-font-color: var(--kraken-framework-accent-alt-color);
  color: var(--kraken-framework-a-font-color);
  text-decoration: underline;
  transition: color 100ms ease-out;
}
a:hover {
  color: var(--kraken-framework-a-hover-font-color);
}
a:focus {
  color: var(--kraken-framework-a-focus-font-color);
}
a:focus-visible {
  outline: solid 2px var(--kraken-framework-accessability-color-color);
  outline-offset: 2px;
  visibility: visible;
  opacity: 1;
}

.kraken-list {
  margin: 0;
  padding: 0;
}

.kraken-list--style-none {
  list-style: none;
}

.kraken-list--style-disc {
  list-style: disc;
}

.kraken-list__item--spacer {
  height: 1.5rem;
}

.kraken-list--privacy li {
  display: flex;
  gap: 0.5rem;
}

.kraken-list--privacy .kraken-address__list {
  display: flex;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.kraken-inline {
  display: inline-block;
}

/* -- [03.02] Button Styles -- */
.kraken-btn {
  padding: var(--kraken-framework-button-padding);
  background-color: var(--kraken-framework-button-background);
  color: var(--kraken-framework-button-font-color);
  border: none;
  border-radius: var(--kraken-framework-button-border-radius);
  font-size: var(--kraken-framework-button-font-size);
  font-weight: var(--kraken-framework-button-font-weight);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: all 600ms ease-in-out, background-color 200ms ease-in-out;

  &:hover {
    background-color: var(--kraken-framework-button-hover-background);
    color: var(--kraken-framework-button-font-hover-color);
  }

  &:focus {
    background-color: var(--kraken-framework-button-focus-background);
    color: var(--kraken-framework-button-font-focus-color);
  }

  &:focus-visible {
    outline: solid 2px var(--kraken-framework-accessability-color-color);
    outline-offset: 2px;
    visibility: visible;
    opacity: 1;
  }
}

/* ================= [04] Layout ================= */
/* -- [04.00] Header -- */
.body-notice--is-active .kraken-header {
  @media (min-width: 991px) {
    padding-top: var(--notice-bar-height);
  }
}

.kraken-header {
  width: var(--kraken-framework-header-width);
  backface-visibility: hidden;
  z-index: 108;

  /* -- [04.00.a] Header Inner -- */
  .kraken-header__inner {
    &.kraken-header__inner--mobile {
        display: block;
        visibility: visible;

        @media (min-width: 991px) {
          display: none;
          visibility: hidden;
        }
    }

    &.kraken-header__inner--desktop {
        display: none;
        visibility: hidden;

        @media (min-width: 991px) {
          display: block;
          visibility: visible;
        }
    }
  }

  /* -- [04.00.b] Header Row -- */
  .kraken-header__row {
    .kraken-header__row-inner {
      display: flex;
      max-width: var(--kraken-framework-header-max-width-inner);
      margin: 0 auto;

      &.kraken-header__row-inner--top {
          min-height: var(--kraken-framework-header-row-height-top);
          padding: var(--kraken-framework-header-row-padding-top);
      }

      &.kraken-header__row-inner--main {
          min-height: var(--kraken-framework-header-row-height-main);
          padding: var(--kraken-framework-header-row-padding-main);
      }

      &.kraken-header__row-inner--bottom {
          min-height: var(--kraken-framework-header-row-height-bottom);
          padding: var(--kraken-framework-header-row-padding-bottom);
      }

      .kraken-header__col {
        &.kraken-header__col--start {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex: 1;
          gap: 1rem;
        }

        &.kraken-header__col--middle {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          gap: 1rem;
        }

        &.kraken-header__col--end {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex: 1;
          gap: 1rem;
        }
      }
    }
  }

  .kraken-header__inner--mobile {
    .kraken-header__row {
      .kraken-header__row-inner {
        display: flex;
        max-width: var(--kraken-framework-header-max-width-inner);
        margin: 0 auto;

        &.kraken-header__row-inner--top {
          min-height: var(--kraken-framework-header-mobile-row-height-top);
          padding: var(--kraken-framework-header-row-padding-top);
        }

        &.kraken-header__row-inner--main {
          min-height: var(--kraken-framework-header-mobile-row-height-main);
          padding: var(--kraken-framework-header-row-padding-main);
        }

        &.kraken-header__row-inner--bottom {
          min-height: var(--kraken-framework-header-mobile-row-height-bottom);
          padding: var(--kraken-framework-header-row-padding-bottom);
        }
      }
    }
  }
}

/* -- [04.00.c] Header Solid -- */
.body--solid .kraken-header {
  .kraken-header__row {
    &.kraken-header__row--top {
      background-color: var(--kraken-framework-solid-header-top-background);
      color: var(--kraken-framework-solid-header-top-color);
    }

    &.kraken-header__row--main {
      background-color: var(--kraken-framework-solid-header-main-background);
      color: var(--kraken-framework-solid-header-main-color);
    }

    &.kraken-header__row--bottom {
      background-color: var(--kraken-framework-solid-header-bottom-background);
      color: var(--kraken-framework-solid-header-bottom-color);
    }
  }
}

/* -- [04.00.d] Fix for Firefox -- */
.body--transparent .kraken-header {
  .kraken-header__row {
    &.kraken-header__row--top,
    &.kraken-header__row--main,
    &.kraken-header__row--bottom { 
      background-color: var(--kraken-framework-solid-header-bottom-background);
      color: var(--kraken-framework-solid-header-bottom-color);
    }
  }
}

/* -- [04.00.e] Header Transparent -- */
@supports (animation-timeline: scroll()) {
  .body--transparent .kraken-header {
    .kraken-header__row {
      &.kraken-header__row--top {
        background-color: var(--kraken-framework-solid-header-top-background);
        color: var(--kraken-framework-solid-header-top-color);
      }

      &.kraken-header__row--main {
        background-color: var(--kraken-framework-solid-header-main-background);
        color: var(--kraken-framework-solid-header-main-color);
      }

      &.kraken-header__row--bottom {
        background-color: var(--kraken-framework-solid-header-bottom-background);
        color: var(--kraken-framework-solid-header-bottom-color);
      }
    }

    @media (min-width: 991px) {
      .kraken-header__row {
        &.kraken-header__row--top,
        &.kraken-header__row--main,
        &.kraken-header__row--bottom { 
          animation: header-transparent linear both;
          animation-timeline: scroll();
          animation-range: 0px 10vh;
          animation-duration: 1ms;
        }

        &.kraken-header__row--top {
          background-color: var(--kraken-framework-transparent-header-top-background);
          color: var(--kraken-framework-transparent-header-top-color);
        }

        &.kraken-header__row--main {
          background-color: var(--kraken-framework-transparent-header-main-background);
          color: var(--kraken-framework-transparent-header-main-color);
        }

        &.kraken-header__row--bottom {
          background-color: var(--kraken-framework-transparent-header-bottom-background);
          color: var(--kraken-framework-transparent-header-bottom-color);
        }
      }
    }
  }
}

/* -- [04.00.f] Header Top -- */
.body--top .kraken-header {
  position: relative;
}

/* -- [04.00.g] Header Fixed -- */
.body--overlay .kraken-header {
  @media (min-width: 991px) {
    position: fixed;
    top: var(--kraken-framework-header-position-top);
    left: 0;
  }
}

/* -- [04.00.h] Header Sticky -- */
.body--sticky .kraken-header {
  @media (min-width: 991px) {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* -- [04.00.i] Header Shrink -- */
@supports (animation-timeline: scroll()) {
  .body--shrink .kraken-header {
    @media (min-width: 991px) {
      animation: header-shrink linear both;
      animation-timeline: scroll();
      animation-range: 0px 100vh;
      animation-duration: 1ms;
    }
  }
}

/* -- [04.00.j] Header Hide -- */
@supports (animation-timeline: scroll()) {
  .body--hide {
    @media (min-width: 991px) {
      top: var(--kraken-framework-header-position-top);
      animation: header-hide linear both;
      animation-timeline: scroll();
      animation-range: 0px 100vh;
      animation-duration: 1ms;
    }
  }
}

/* -- [04.01] Main -- */
/* -- [04.01.a] Pages  -- */
.kraken-main {
  .kraken-main__inner {
    padding-top: var(--kraken-framework-content-padding-top);
    padding-bottom: var(--kraken-framework-content-padding-bottom);

    .kraken-entry__content > * {
      max-width: calc(var(--kraken-framework-max-width) - (var(--kraken-framework-site-padding-left) + var(--kraken-framework-site-padding-right)));
      margin-left: auto;
      margin-right: auto;
    }

    /* Never let media overflow the content box */
    /* .kraken-entry__content img,
    .kraken-entry__content video,
    .kraken-entry__content iframe,
    .kraken-entry__content embed,
    .kraken-entry__content object {
      max-width: 100%;
      height: auto;
    } */

    /* Image Caption */
    .kraken-entry__content .wp-caption-text {
      font-size: 0.8rem;
      line-height: 1.1;
    }

    /* Gutenberg figures often control sizing */
    /* .kraken-entry__content figure {
      max-width: 100%;
      margin-inline: 0;
    } */

    /* Alignment (WP core classes) */
    /* .kraken-entry__content :where(.alignleft) { 
      float: left; margin: 0.5em 1em 0.5em 0; 
    }

    .kraken-entry__content :where(.alignright) { 
      float: right; margin: 0.5em 0 0.5em 1em; 
    }

    .kraken-entry__content :where(.aligncenter) { 
      display: block; margin: 0.75em auto; 
    } */

    /* Clear floats so content below doesn’t wrap weirdly */
    /* .kraken-entry__content::after { 
      content: ""; 
      display: block; 
      clear: both; 
    }

    .is-layout-constrained:where(:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull)) {
      max-width: calc(var(--kraken-framework-max-width) - (var(--kraken-framework-site-padding-left) + var(--kraken-framework-site-padding-right)));
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull)) {
      max-width: calc(var(--kraken-framework-max-width) - (var(--kraken-framework-site-padding-left) + var(--kraken-framework-site-padding-right)));
      margin-left: auto !important;
      margin-right: auto !important;
    } */

    .alignwide {
      max-width: var(--kraken-framework-wide-width);
      margin-left: auto;
      margin-right: auto;
    }

    .alignfull {
      max-width: none;
      margin-left: calc(-1 * var(--kraken-framework-site-padding-left));
      margin-right: calc(-1 * var(--kraken-framework-site-padding-right));
    }
  }
}

/* -- [04.01.b] Single -- */
.kraken-main--single {
  max-width: var(--kraken-framework-max-single-width);
  margin: 0 auto;
}

/* -- [04.01.c] Archives -- */
.kraken-archive-content {
  max-width: var(--kraken-framework-max-archive-width);
  padding-left: var(--kraken-framework-site-padding-left);
  padding-right: var(--kraken-framework-site-padding-right);
  margin: 0 auto;
}

.archive__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: var(--kraken-framework-max-archive-width);
  padding-left: var(--kraken-framework-site-padding-left);
  padding-right: var(--kraken-framework-site-padding-right);
  margin: 1rem auto 2rem auto;
  list-style: none;
}

/* -- [04.02] Content / Sidebar -- */
.kraken-content {
  margin: 0 auto;

  .kraken-main {
    width: 100%;
  }

  .kraken-sidebar {
    width: 100%;
    padding-top: var(--kraken-framework-content-padding-top);
    padding-bottom: var(--kraken-framework-content-padding-bottom);
    padding-left: var(--kraken-framework-site-padding-left);
    padding-right: var(--kraken-framework-site-padding-right);
  }

  &.kraken-content--sidebar-right {
    width: 100%;
    
    @media (min-width: 991px) {
      display: flex;
      gap: 2rem;
      max-width: var(--kraken-framework-max-width);
    }

    .kraken-main {
      @media (min-width: 991px) {
        width: 70%;
      }
    }

    .kraken-sidebar {
      @media (min-width: 991px) {
        width: 30%;
      }
    }
  }

  &.kraken-content--sidebar-left {
    width: 100%;

    @media (min-width: 991px) {
      display: flex;
      gap: 2rem;
      max-width: var(--kraken-framework-max-width);
    }

    .kraken-main {
      @media (min-width: 991px) {
        order: 2;
        width: 70%;
      }
    }

    .kraken-sidebar {
      @media (min-width: 991px) {
        order: 1;
        width: 30%;
      }
    }
  }
}

/* -- [04.03] Footer -- */
.kraken-footer {
  width: var(--kraken-framework-footer-width);
  background-color: var(--kraken-framework-footer-background);
  color: var(--kraken-framework-footer-color);
  text-align: var(--kraken-framework-footer-text-align-mobile);
  z-index: 101;

  @media (min-width: 991px) {
    text-align: var(--kraken-framework-footer-text-align-desktop);
  }

  .kraken-footer__inner {
    max-width: var(--kraken-framework-footer-max-width-inner);
    margin: 0 auto;

    .kraken-footer__row--top {
      padding: var(--kraken-framework-footer-row-padding-top);
    }

    .kraken-footer__row--main {
      padding: var(--kraken-framework-footer-row-padding-main);
    }

    .kraken-footer__row--bottom {
      padding: var(--kraken-framework-footer-row-padding-bottom);
    }
  }

  .kraken-footer__row-inner--block {
    display: block;
  }

  .kraken-footer__row-inner--flex {
    display: block;

    @media (min-width: 991px) {
      display: flex;
      gap: 2rem;
    }
  }

  @media (min-width: 991px) {
    .kraken-footer__row-inner--space-between {
      justify-content: space-between;
    }
  }

  .kraken-footer__col {
    flex: 1;
    margin-bottom: 1.5rem;
  }

  .kraken-footer__col--block {
    display: block;
  }

  .kraken-footer__col--flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .kraken-footer__col--align-start {
    justify-content: center;

    @media (min-width: 991px) {
      justify-content: flex-start;
    }
  }

  .kraken-footer__col--align-center {
    justify-content: center;
  }

  .kraken-footer__col--align-end {
    justify-content: center;

    @media (min-width: 991px) {
      justify-content: flex-end;
    }
  }

  .kraken-footer__heading {
    display: block;
    margin-bottom: 0.5rem;
    width: 100%;
  }
}

/* ================= [05] Components ================= */
/* -- [05.00] Navigation Styles -- */
/* -- [05.00.a] Toggle Mobile Styles -- */
:where(.kraken-toggle-mobile) {
  --kraken-framework-mobile-toggle-background-color: transparent;
  --kraken-framework-mobile-toggle-hover-background-color: transparent;
  --kraken-framework-mobile-toggle-border-color: transparent;
  --kraken-framework-mobile-toggle-border-hover-color: transparent;
  --kraken-framework-mobile-toggle-border-size: 1px;
  --kraken-framework-mobile-toggle-border-radius: 5px;

  position: relative;
  padding: 8px;
  width: 40px;
  height: 40px;
  background-color: var(--kraken-framework-mobile-toggle-background-color);
  border: var(--kraken-framework-mobile-toggle-border-size)
    solid var(--kraken-framework-mobile-toggle-border-color);
  border-radius: var(--kraken-framework-mobile-toggle-border-radius);
  cursor: pointer;
  transition: all 600ms ease-out;
  z-index: 111;

  &:hover {
    background-color: var(--kraken-framework-mobile-toggle-hover-background-color);
    border-color: var(--kraken-framework-mobile-toggle-border-hover-color);
  }

  :where(.kraken-toggle-mobile__bar) {
    display: block;
    width: 100%;
    height: 3px;
    background: #000000;
    border-radius: 3px;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:nth-child(2) {
      margin: 4px 0;
    }
  }

  &.kraken-toggle-mobile--is-open {
    :where(.kraken-toggle-mobile__bar) {
      &:first-child {
        transform: translateY(8px) rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:last-child {
        transform: translateY(-6px) rotate(-45deg);
      }
    }
  }
}

/* -- [05.00.b] Hamburger Styles -- */
:where(.kraken-toggle-hamburger) {
  --kraken-framework-hamburger-toggle-background-color: transparent;
  --kraken-framework-hamburger-toggle-hover-background-color: transparent;
  --kraken-framework-hamburger-toggle-border-color: transparent;
  --kraken-framework-hamburger-toggle-border-hover-color: transparent;
  --kraken-framework-hamburger-toggle-border-size: 1px;
  --kraken-framework-hamburger-toggle-border-radius: 5px;

  position: relative;
  padding: 8px;
  width: 40px;
  height: 40px;
  background-color: var(--kraken-framework-hamburger-toggle-background-color);
  border: var(--kraken-framework-hamburger-toggle-border-size)
    solid var(--kraken-framework-hamburger-toggle-border-color);
  border-radius: var(--kraken-framework-hamburger-toggle-border-radius);
  cursor: pointer;
  transition: all 600ms ease-out;
  z-index: 110;

  &:hover {
    background-color: var(--kraken-framework-hamburger-toggle-hover-background-color);
    border-color: var(--kraken-framework-hamburger-toggle-border-hover-color);
  }

  :where(.kraken-toggle-hamburger__bar) {
    display: block;
    width: 100%;
    height: 3px;
    background: #000000;
    border-radius: 3px;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:nth-child(2) {
      margin: 4px 0;
    }
  }

  &.kraken-toggle-hamburger--is-open {
    :where(.kraken-toggle-hamburger__bar) {
      &:first-child {
        transform: translateY(8px) rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:last-child {
        transform: translateY(-6px) rotate(-45deg);
      }
    }
  }
}

/* -- [05.00.c] Mobile Drawer Styles -- */
:where(.kraken-navigation__drawer) {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -99999rem;
  right: 99999rem;
  opacity: 0;
  transition:
    opacity 0.25s ease-in,
    left 0s 0.25s,
    right 0s 0.25s;
  z-index: 112;

  &.kraken-navigation__drawer--is-open {
    left: 0;
    right: 0;
    opacity: 1;
    transition: opacity 0.25s ease-out;

    :where(.kraken-navigation__drawer-inner) {
      opacity: 1;
      transform: translateX(0%);
    }

    :where(.kraken-navigation__drawer-overlay) {
      opacity: 1;
    }
  }

  :where(.kraken-navigation__drawer-header) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  :where(.kraken-navigation__drawer-inner) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--kraken-framework-nav-drawer-width);
    padding: var(--kraken-framework-nav-drawer-padding);
    background: var(--kraken-framework-nav-drawer-background-color);
    opacity: 0;
    transform: translateX(100%);
    transition:
      transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
      opacity 0.25s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  :where(.kraken-navigation__drawer-overlay) {
    position: fixed;
    inset: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease-in-out;
  }
}

/* Notice-aware positioning */
:where(.kraken-framework-notice--is-active)
  :where(.kraken-navigation__drawer) {
  top: var(--kraken-framework-nav-drawer-pos-top);
}

  :where(.kraken-framework-with-notice--is-disabled)
  :where(.kraken-navigation__drawer) {
  top: 0;
}

/* -- [05.00.d] Navigation Styles -- */
.kraken-navigation {
  &.kraken-navigation--mobile {
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-flex-direction: column;
    --kraken-framework-nav-gap: var(--navigation-mobile-gap);
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify: flex-start;
    --kraken-framework-nav-link-padding: var(--navigation-mobile-link-padding);
    --kraken-framework-nav-link-margin: var(--navigation-mobile-margin);
    --kraken-framework-nav-link-font-size: var(--navigation-mobile-font-size);
    --kraken-framework-nav-link-font-weight: var(--navigation-mobile-font-weight);
    --kraken-framework-nav-link-font-line-height: var(--navigation-mobile-font-line-height);
    --kraken-framework-nav-link-font-color: var(--navigation-mobile-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--navigation-mobile-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--navigation-mobile-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--navigation-mobile-font-focus-color);
    --kraken-framework-nav-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-pos: relative;
    --kraken-framework-nav-sub-pos-top: unset;
    --kraken-framework-nav-sub-pos-left: unset;
    --kraken-framework-nav-sub-width: 100%;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0 0.5rem;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--navigation-mobile-sub-link-padding);
    --kraken-framework-nav-sub-link-margin: var(--navigation-mobile-sub-link-margin);
    --kraken-framework-nav-sub-link-font-size: var(--navigation-mobile-sub-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--navigation-mobile-sub-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--navigation-mobile-sub-font-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--navigation-mobile-sub-font-color);
    --kraken-framework-nav-sub-link-font-hover-color: var(--navigation-mobile-sub-font-hover-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--navigation-mobile-sub-font-active-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--navigation-mobile-sub-font-focus-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-indicator-pos-top: 0.5rem;
    --kraken-framework-nav-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 28px;
    --kraken-framework-nav-sub-indicator-height: 28px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 2rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 0;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 28px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    --kraken-framework-nav-drawer-pos-top: var(--kraken-framework-header-notice-height);
    --kraken-framework-nav-drawer-width: 90%;
    --kraken-framework-nav-drawer-padding: 0 1rem 1rem 1rem;
    --kraken-framework-nav-drawer-background-color: var(--kraken-framework-offwhite-color);
    z-index: 114;
  }

  &.kraken-navigation--hamburger {
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-flex-direction: column;
    --kraken-framework-nav-gap: var(--navigation-hamburger-gap);
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify: flex-start;
    --kraken-framework-nav-link-padding: var(--navigation-hamburger-link-padding);
    --kraken-framework-nav-link-margin: var(--navigation-hamburger-link-margin);
    --kraken-framework-nav-link-font-size: var(--navigation-hamburger-font-size);
    --kraken-framework-nav-link-font-weight: var(--navigation-hamburger-font-weight);
    --kraken-framework-nav-link-font-line-height: var(--navigation-hamburger-font-line-height);
    --kraken-framework-nav-link-font-color: var(--navigation-hamburger-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--navigation-hamburger-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--navigation-hamburger-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--navigation-hamburger-font-focus-color);
    --kraken-framework-nav-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-pos: relative;
    --kraken-framework-nav-sub-pos-top: unset;
    --kraken-framework-nav-sub-pos-left: unset;
    --kraken-framework-nav-sub-width: 100%;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0 0.5rem;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--navigation-hamburger-sub-link-padding);
    --kraken-framework-nav-sub-link-margin: var(--navigation-hamburger-sub-link-margin);
    --kraken-framework-nav-sub-link-font-size: var(--navigation-hamburger-sub-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--navigation-hamburger-sub-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--navigation-hamburger-sub-font-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--navigation-hamburger-sub-font-color);
    --kraken-framework-nav-sub-link-font-hover-color: var(--navigation-hamburger-sub-font-hover-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--navigation-hamburger-sub-font-active-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--navigation-hamburger-sub-font-focus-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-indicator-pos-top: 0.5rem;
    --kraken-framework-nav-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 28px;
    --kraken-framework-nav-sub-indicator-height: 28px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 2rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 0;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 28px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    --kraken-framework-nav-drawer-pos-top: var(--kraken-framework-header-notice-height);
    --kraken-framework-nav-drawer-width: 90%;
    --kraken-framework-nav-drawer-padding: 0 1rem 1rem 1rem;
    --kraken-framework-nav-drawer-background-color: var(--kraken-framework-offwhite-color);
    z-index: 114;
  }
  
  &.kraken-navigation--primary {
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-flex-direction: row;
    --kraken-framework-nav-gap: var(--navigation-primary-gap);
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify: flex-start;
    --kraken-framework-nav-link-padding: var(--navigation-primary-link-padding);
    --kraken-framework-nav-link-margin: var(--navigation-primary-link-margin);
    --kraken-framework-nav-link-font-size: var(--navigation-primary-font-size);
    --kraken-framework-nav-link-font-weight: var(--navigation-primary-font-weight);
    --kraken-framework-nav-link-font-line-height: var(--navigation-primary-font-line-height);
    --kraken-framework-nav-link-font-color: var(--navigation-primary-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--navigation-primary-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--navigation-primary-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--navigation-primary-font-focus-color);
    --kraken-framework-nav-link-background-color: transparent;
    --kraken-framework-nav-link-background-hover-color: transparent;
    --kraken-framework-nav-link-background-active-color: transparent;
    --kraken-framework-nav-link-background-focus-color: transparent;
    --kraken-framework-nav-sub-pos: absolute;
    --kraken-framework-nav-sub-pos-top: -999em;
    --kraken-framework-nav-sub-pos-left: -999em;
    --kraken-framework-nav-sub-width: 200px;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0 0.5rem;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--navigation-primary-sub-link-padding);
    --kraken-framework-nav-sub-link-margin: var(--navigation-primary-sub-link-margin);
    --kraken-framework-nav-sub-link-font-size: var(--navigation-primary-sub-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--navigation-primary-sub-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--navigation-primary-sub-font-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--navigation-primary-sub-font-color);
    --kraken-framework-nav-sub-link-font-hover-color: var(--navigation-primary-sub-font-hover-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--navigation-primary-sub-font-active-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--navigation-primary-sub-font-focus-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: relative;
    --kraken-framework-nav-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-indicator-pos-right: unset;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-indicator-height: 16px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 0.5rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 100%;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    z-index: 106;
  }

  &.kraken-navigation--secondary {
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-flex-direction: row;
    --kraken-framework-nav-gap: var(--navigation-secondary-gap);
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify: flex-start;
    --kraken-framework-nav-link-padding: var(--navigation-secondary-link-padding);
    --kraken-framework-nav-link-margin: var(--navigation-secondary-link-margin);
    --kraken-framework-nav-link-font-size: var(--navigation-secondary-font-size);
    --kraken-framework-nav-link-font-weight: var(--navigation-secondary-font-weight);
    --kraken-framework-nav-link-font-line-height: var(--navigation-secondary-font-line-height);
    --kraken-framework-nav-link-font-color: var(--navigation-secondary-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--navigation-secondary-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--navigation-secondary-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--navigation-secondary-font-focus-color);
    --kraken-framework-nav-link-background-color: transparent;
    --kraken-framework-nav-link-background-hover-color: transparent;
    --kraken-framework-nav-link-background-active-color: transparent;
    --kraken-framework-nav-link-background-focus-color: transparent;
    --kraken-framework-nav-sub-pos: absolute;
    --kraken-framework-nav-sub-pos-top: -999em;
    --kraken-framework-nav-sub-pos-left: -999em;
    --kraken-framework-nav-sub-width: 200px;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0 0.5rem;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--navigation-secondary-sub-link-padding);
    --kraken-framework-nav-sub-link-margin: var(--navigation-secondary-sub-link-margin);
    --kraken-framework-nav-sub-link-font-size: var(--navigation-secondary-sub-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--navigation-secondary-sub-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--navigation-secondary-sub-font-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--navigation-secondary-sub-font-color);
    --kraken-framework-nav-sub-link-font-hover-color: var(--navigation-secondary-sub-font-hover-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--navigation-secondary-sub-font-active-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--navigation-secondary-sub-font-focus-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: relative;
    --kraken-framework-nav-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-indicator-pos-right: unset;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-indicator-height: 16px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 0.5rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 100%;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    z-index: 106;
  }

  &.kraken-navigation--legal {
    width: 100%;
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-flex-direction: column;
    --kraken-framework-nav-gap: var(--navigation-legal-mobile-gap);
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify: center;
    --kraken-framework-nav-link-padding: var(--navigation-legal-link-mobile-padding);
    --kraken-framework-nav-link-margin: var(--navigation-legal-link-mobile-margin);
    --kraken-framework-nav-link-font-size: var(--navigation-legal-font-mobile-size);
    --kraken-framework-nav-link-font-weight: var(--navigation-legal-font-mobile-weight);
    --kraken-framework-nav-link-font-line-height: var(--navigation-legal-font-mobile-line-height);
    --kraken-framework-nav-link-font-color: var(--navigation-legal-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--navigation-legal-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--navigation-legal-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--navigation-legal-font-focus-color);
    --kraken-framework-nav-link-background-color: transparent;
    --kraken-framework-nav-link-background-hover-color: transparent;
    --kraken-framework-nav-link-background-active-color: transparent;
    --kraken-framework-nav-link-background-focus-color: transparent;
    --kraken-framework-nav-sub-pos: absolute;
    --kraken-framework-nav-sub-pos-top: -999em;
    --kraken-framework-nav-sub-pos-left: -999em;
    --kraken-framework-nav-sub-width: 200px;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--navigation-legal-sub-link-padding);
    --kraken-framework-nav-sub-link-margin: var(--navigation-legal-sub-link-margin);
    --kraken-framework-nav-sub-link-font-size: var(--navigation-legal-sub-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--navigation-legal-sub-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--navigation-legal-sub-font-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--navigation-legal-sub-font-color);
    --kraken-framework-nav-sub-link-font-hover-color: var(--navigation-legal-sub-font-hover-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--navigation-legal-sub-font-active-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--navigation-legal-sub-font-focus-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: relative;
    --kraken-framework-nav-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-indicator-pos-right: unset;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-indicator-height: 16px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 0.5rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 100%;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    z-index: 106;

    @media (min-width: 991px) {
      --kraken-framework-nav-display: flex;
      --kraken-framework-nav-flex-direction: row;
      --kraken-framework-nav-link-justify: flex-start;
      --kraken-framework-nav-gap: var(--navigation-legal-desktop-gap);
      --kraken-framework-nav-link-font-size: var(--navigation-legal-font-desktop-size);
      --kraken-framework-nav-link-padding: var(--navigation-legal-link-desktop-link-padding);
      --kraken-framework-nav-link-margin: var(--navigation-legal-link-desktop-link-margin);

      .kraken-navigation__list > li:nth-last-child(3) {
        margin-right: auto;
      }
    }
  }

  &.kraken-navigation--extra-01 {
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-flex-direction: column;
    --kraken-framework-nav-gap: var(--navigation-extra-01-gap);
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify: center;
    --kraken-framework-nav-link-padding: var(--navigation-extra-01-link-padding);
    --kraken-framework-nav-link-margin: var(--navigation-extra-01-link-margin);
    --kraken-framework-nav-link-font-size: var(--navigation-extra-01-font-size);
    --kraken-framework-nav-link-font-weight: var(--navigation-extra-01-font-weight);
    --kraken-framework-nav-link-font-line-height: var(--navigation-extra-01-font-line-height);
    --kraken-framework-nav-link-font-color: var(--navigation-extra-01-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--navigation-extra-01-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--navigation-extra-01-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--navigation-extra-01-font-focus-color);
    --kraken-framework-nav-link-background-color: transparent;
    --kraken-framework-nav-link-background-hover-color: transparent;
    --kraken-framework-nav-link-background-active-color: transparent;
    --kraken-framework-nav-link-background-focus-color: transparent;
    --kraken-framework-nav-sub-pos: absolute;
    --kraken-framework-nav-sub-pos-top: -999em;
    --kraken-framework-nav-sub-pos-left: -999em;
    --kraken-framework-nav-sub-width: 200px;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--navigation-extra-01-sub-link-padding);
    --kraken-framework-nav-sub-link-margin: var(--navigation-extra-01-sub-link-margin);
    --kraken-framework-nav-sub-link-font-size: var(--navigation-extra-01-sub-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--navigation-extra-01-sub-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--navigation-extra-01-sub-font-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--navigation-extra-01-sub-font-color);
    --kraken-framework-nav-sub-link-font-hover-color: var(--navigation-extra-01-sub-font-hover-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--navigation-extra-01-sub-font-active-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--navigation-extra-01-sub-font-focus-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: relative;
    --kraken-framework-nav-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-indicator-pos-right: unset;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-indicator-height: 16px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 0.5rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 100%;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    z-index: 106;

    @media (min-width: 991px) {
      --kraken-framework-nav-link-justify: flex-start;
    }
  }

  &.kraken-navigation--subpage {
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-flex-direction: column;
    --kraken-framework-nav-gap: var(--navigation-subpage-gap);
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify:flex-start;
    --kraken-framework-nav-link-padding: var(--navigation-subpage-link-padding);
    --kraken-framework-nav-link-margin: var(--navigation-subpage-link-margin);
    --kraken-framework-nav-link-font-size: var(--navigation-subpage-font-size);
    --kraken-framework-nav-link-font-weight: var(--navigation-subpage-font-weight);
    --kraken-framework-nav-link-font-line-height: var(--navigation-subpage-font-line-height);
    --kraken-framework-nav-link-font-color: var(--navigation-subpage-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--navigation-subpage-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--navigation-subpage-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--navigation-subpage-font-focus-color);
    --kraken-framework-nav-link-background-color: transparent;
    --kraken-framework-nav-link-background-hover-color: transparent;
    --kraken-framework-nav-link-background-active-color: transparent;
    --kraken-framework-nav-link-background-focus-color: transparent;
    --kraken-framework-nav-sub-pos: absolute;
    --kraken-framework-nav-sub-pos-top: -999em;
    --kraken-framework-nav-sub-pos-left: -999em;
    --kraken-framework-nav-sub-width: 200px;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--navigation-subpage-sub-link-padding);
    --kraken-framework-nav-sub-link-margin: var(--navigation-subpage-sub-link-margin);
    --kraken-framework-nav-sub-link-font-size: var(--navigation-subpage-sub-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--navigation-subpage-sub-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--navigation-subpage-sub-font-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--navigation-subpage-sub-font-color);
    --kraken-framework-nav-sub-link-font-hover-color: var(--navigation-subpage-sub-font-hover-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--navigation-subpage-sub-font-active-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--navigation-subpage-sub-font-focus-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: relative;
    --kraken-framework-nav-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-indicator-pos-right: unset;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-indicator-height: 16px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 0.5rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 100%;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    z-index: 106;
  }

  :where(.kraken-navigation__list) {
    display: var(--kraken-framework-nav-display);
    flex-direction: var(--kraken-framework-nav-flex-direction);
    gap: var(--kraken-framework-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;

    :where(.menu-item) {
      position: relative;
      padding: var(--kraken-framework-menu-item-padding);
      margin: var(--kraken-framework-menu-item-margin);

      &.current-menu-item > a,
      &.current-menu-ancestor > a {
        background-color: var(--kraken-framework-nav-link-background-active-color);
        color: var(--kraken-framework-nav-link-font-active-color);
      }

      &.menu-item-has-children > a::after {
        content: "";
        background-color: currentColor;
        -webkit-mask-image: var(--kraken-framework-nav-sub-indicator-svg);
        mask-image: var(--kraken-framework-nav-sub-indicator-svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        width: var(--kraken-framework-nav-sub-indicator-width);
        height: var(--kraken-framework-nav-sub-indicator-height);
        margin-left: auto;
        transform-origin: center;
        transform: rotate(0deg);
        transition: transform 100ms ease;
      }

      &.menu-item-has-children > a[aria-expanded="true"]::after {
        transform: rotate(180deg);
      }

      :where(a) {
        display: flex;
        justify-content: var(--kraken-framework-nav-link-justify);
        align-items: center;
        padding: var(--kraken-framework-nav-link-padding);
        margin: var(--kraken-framework-nav-link-margin);
        background-color: var(--kraken-framework-nav-link-background-color);
        color: var(--kraken-framework-nav-link-font-color);
        font-size: var(--kraken-framework-nav-link-font-size);
        font-weight: var(--kraken-framework-nav-link-font-weight);
        line-height: var(--kraken-framework-nav-link-font-line-height);
        text-decoration: none;
        transition: color 100ms ease-out, background-color 100ms ease-out;

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

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

        &:focus-visible {
          outline: solid 2px var(--kraken-framework-accessability-color-color);
          outline-offset: 2px;
        }

        &[aria-expanded="true"] + :where(.sub-menu) {
          visibility: visible;
          top: auto;
          left: auto;
          height: auto;
        }
      }

      :where(.sub-menu) {
        visibility: hidden;
        position: var(--kraken-framework-nav-sub-pos);
        top: var(--kraken-framework-nav-sub-pos-top);
        left: var(--kraken-framework-nav-sub-pos-left);
        z-index: 900;
        width: var(--kraken-framework-nav-sub-width);
        height: 0;
        margin: 0;
        padding: 0;
        background-color: var(--kraken-framework-nav-sub-background-color);
        list-style: none;
        transition: height 600ms ease-out;

        :where(.menu-item) {
          padding: var(--kraken-framework-sub-menu-item-padding);
          margin: var(--kraken-framework-sub-menu-item-margin);

          &.current-menu-item > a,
          &.current-menu-ancestor > a {
            background-color: var(--kraken-framework-nav-sub-link-background-active-color);
            color: var(--kraken-framework-nav-sub-link-font-active-color);
          }

          &.menu-item-has-children > a::after {
            content: "";
            background-color: currentColor;
            -webkit-mask-image: var(--kraken-framework-nav-sub-indicator-svg);
            mask-image: var(--kraken-framework-nav-sub-indicator-svg);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            position: var(--kraken-framework-nav-sub-sub-indicator-pos-type);
            top: var(--kraken-framework-nav-sub-sub-indicator-pos-top);
            right: var(--kraken-framework-nav-sub-sub-indicator-pos-right);
            width: var(--kraken-framework-nav-sub-sub-indicator-width);
            height: var(--kraken-framework-nav-sub-sub-indicator-height);
            transform: rotate(-90deg);
          }

          &.menu-item-has-children > a[aria-expanded="true"]::after {
            transform: rotate(180deg);
          }

          :where(a) {
            padding: var(--kraken-framework-nav-sub-link-padding);
            background-color: var(--kraken-framework-nav-sub-link-background-color);
            color: var(--kraken-framework-nav-sub-link-font-color);
            font-size: var(--kraken-framework-nav-sub-link-font-size);
            font-weight: var(--kraken-framework-nav-sub-link-font-weight);

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

            &:focus {
              color: var(--kraken-framework-nav-sub-link-font-focus-color);
              background-color: var(--kraken-framework-nav-sub-link-background-focus-color);
            }

            &:focus-visible {
              outline: solid 2px var(--kraken-framework-accessability-color-color);
              outline-offset: -2px;
            }

            &[aria-expanded="true"] + :where(.sub-menu) {
              visibility: visible;
              top: var(--kraken-framework-nav-sub-sub-pos-top);
              left: var(--kraken-framework-nav-sub-sub-pos-left);
              height: auto;
            }
          }
        }

        :where(.sub-menu) {
          :where(.menu-item a) {
            padding: var(--kraken-framework-nav-sub-sub-link-padding);
          }
        }
      }
    }
  }
}

@supports (animation-timeline: scroll()) {
  .body--transparent .kraken-navigation--primary,
  .body--transparent .kraken-navigation--secondary {
    @media (min-width: 991px) {
      animation: navigation-transparent linear both;
      animation-timeline: scroll();
      animation-range: 0px 100vh;
      animation-duration: 1ms;
    }
  }
}

/* -- [05.01] Breadcrumbs Styles -- */
.kraken-breadcrumbs {
  & .kraken-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: var(--kraken-framework-breadcrumbs-margin);
    list-style: none;
  }

  & .kraken-breadcrumbs__item {
    &:after {
      content: var(--kraken-framework-breadcrumbs-divider);
      margin: 0 var(--kraken-framework-breadcrumbs-divider-margin);
      font-size: var(--kraken-framework-breadcrumbs-font-size);
      font-weight: var(--kraken-framework-breadcrumbs-font-weight);
    }

    &:last-child:after {
      content: "";
    }
  }

  & .kraken-breadcrumbs__link {
    color: var(--kraken-framework-breadcrumbs-font-color);
    font-size: var(--kraken-framework-breadcrumbs-font-size);
    font-weight: var(--kraken-framework-breadcrumbs-font-weight);
    text-decoration: none;

    &:not(span):hover {
      color: var(--kraken-framework-breadcrumbs-font-hover-color);
    }

    &:not(span):focus {
      color: var(--kraken-framework-breadcrumbs-font-focus-color);
    }

    &:not(span):focus-visible {
      outline: solid 2px var(--kraken-framework-accessability-color-color);
      outline-offset: 2px;
      visibility: visible;
      opacity: 1;
    }

    &.kraken-breadcrumbs__link--is-active {
      color: var(--kraken-framework-breadcrumbs-font-active-color);
    }
  }
}

/* -- [05.02] Social Media Styles -- */
.kraken-social-media {
  &.kraken-social-media--share {
    margin: var(--kraken-framework-social-margin);
  }

  .kraken-social-media__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (min-width: 991px) {
      justify-content: flex-start;
    }
  }

  .kraken-social-media__item {
    &.kraken-social-media__item--heading {
      width: 100%;
      font-size: 0.8rem;
      font-weight: 700;
    }

    .kraken-social-media__link {
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--kraken-framework-social-button-width);
      height: var(--kraken-framework-social-button-height);
      color: var(--kraken-framework-social-button-color);
      transition: color 100ms ease-out;
  

      &:hover {
        color: var(--kraken-framework-social-button-hover-color);
      }

      &:focus {
        color: var(--kraken-framework-social-button-focus-color);
      }

      &:focus-visible {
        outline: solid 2px var(--kraken-framework-accessability-color-color);
        outline-offset: 2px;
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

/* -- [05.03] Logo Styles -- */
.kraken-logo {
  line-height: 0;
  transition: opacity 500ms ease-in-out, width 600ms ease-in-out;

  &:focus-visible {
    outline: solid 2px var(--kraken-framework-accessability-color-color);
    outline-offset: 2px;
    opacity: 1;
  }

  .kraken-logo__image {
    width: var(--kraken-logo-width);
    height: var(--kraken-logo-height);
    display: block;
  }

  &.kraken-logo--mobile {
    --kraken-logo-width: var(--kraken-framework-logo-mobile-width);
    --kraken-logo-height: var(--kraken-framework-logo-mobile-height);
  }

  &.kraken-logo--default {
    --kraken-logo-width: var(--kraken-framework-logo-default-width);
    --kraken-logo-height: var(--kraken-framework-logo-default-height);
  }

  &.kraken-logo--transparent {
    --kraken-logo-width: var(--kraken-framework-logo-trans-width);
    --kraken-logo-height: var(--kraken-framework-logo-trans-height);
  }

  &.kraken-logo--shrink {
    --kraken-logo-width: var(--kraken-framework-logo-shrink-width);
    --kraken-logo-height: var(--kraken-framework-logo-trans-height);
  }

  &.kraken-logo--shrink-transparent {
    --kraken-logo-width: var(--kraken-framework-logo-shrink-trans-width);
    --kraken-logo-height: var(--kraken-framework-logo-shrink-trans-height);
  }

  &.kraken-logo--footer {
    --kraken-logo-width: var(--kraken-framework-logo-footer-width);
    --kraken-logo-height: var(--kraken-framework-logo-footer-height);
  }
}

/* -- [05.03.a] Footer Logo Styles -- */
.kraken-footer .kraken-logo--footer {
  display: inline-flex;
  align-items: center;
}

.body--solid {
  .kraken-logo--default {
    display: block;
  }

  .kraken-logo--transparent {
    display: none;
  }

  .kraken-logo--shrink {
    display: none;
  }

  .kraken-logo--shrink-transparent {
    display: none;
  }
}

.body--transparent {
  .kraken-logo--default {
    display: none;
  }

  .kraken-logo--transparent {
    display: block;
  }

  .kraken-logo--shrink {
    display: none;
  }

  .kraken-logo--shrink-transparent {
    display: none;
  }
}

@supports (animation-timeline: scroll()) {
  .body--shrink:not(.body--transparent) {
    .kraken-header__col--start {
      position: relative;
    }

    .kraken-logo--default,
    .kraken-logo--shrink {
      position: absolute;
      display: block;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-timeline: scroll();
      animation-range: 0px 100vh;
      animation-fill-mode: both;
    }

    .kraken-logo--default {
      animation-name: kraken-logo-fade-out;
      opacity: 1;
      visibility: visible;
    }

    .kraken-logo--shrink {
      animation-name: kraken-logo-fade-in;
      opacity: 0;
      visibility: hidden;
    }

    .kraken-logo--transparent,
    .kraken-logo--shrink-transparent {
      display: none;
    }
  }

  .body--transparent.body--shrink {
    .kraken-header__col--start {
      position: relative;
    }

    .kraken-logo--transparent,
    .kraken-logo--shrink-transparent {
      position: absolute;
      display: block;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-timeline: scroll();
      animation-range: 0px 100vh;
      animation-fill-mode: both;
    }

    .kraken-logo--transparent {
      animation-name: kraken-logo-fade-out;
      opacity: 1;
      visibility: visible;
    }

    .kraken-logo--shrink-transparent {
      animation-name: kraken-logo-fade-in;
      opacity: 0;
      visibility: hidden;
    }

    .kraken-logo--default,
    .kraken-logo--shrink {
      display: none;
    }
  }
}

/* -- [05.04] Pagination Styles -- */
.kraken-pagination {
  .kraken-pagination__list {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  .kraken-pagination__link {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--kraken-framework-pagination-background-color);
    color: var(--kraken-framework-pagination-font-color);
    border: 1px solid var(--kraken-framework-pagination-border-color);
    border-radius: var(--kraken-framework-pagination-border-radius);
    width: var(--kraken-framework-pagination-link-width);
    height: var(--kraken-framework-pagination-link-height);
    font-size: var(--kraken-framework-pagination-font-size);
    line-height: 1;
    text-decoration: none;
    transition: all 2ms ease-out;

    &:hover {
      background-color: var(--kraken-framework-pagination-hover-background-color);
      color: var(--kraken-framework-pagination-hover-font-color);
      border: 1px solid var(--kraken-framework-pagination-hover-border-color);
    }

    &:focus {
      background-color: var(--kraken-framework-pagination-focus-background-color);
      color: var(--kraken-framework-pagination-focus-font-color);
      border: 1px solid var(--kraken-framework-pagination-focus-border-color);
    }

    &:focus-visible {
      outline: solid 2px var(--kraken-framework-accessability-color-color);
      outline-offset: 2px;
      visibility: visible;
      opacity: 1;
    }

    &.kraken-pagination__link--current {
      background-color: var(--kraken-framework-pagination-active-background-color);
      color: var(--kraken-framework-pagination-active-font-color);
      border: 1px solid var(--kraken-framework-pagination-active-border-color);
    }

    &.kraken-pagination__link--prev, 
    &.kraken-pagination__link--next {
      span {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        width: 1px;
      }
    }

    &.kraken-pagination__link--prev {
      &:before {
        content: var(--kraken-framework-pagination-previous-icon);
        display: block;
        width: var(--kraken-framework-pagination-icon-width);
        height: var(--kraken-framework-pagination-icon-height);
      }
    }
    &.kraken-pagination__link--next {
      &:before {
        content: var(--kraken-framework-pagination-next-icon);
        display: block;
        width: var(--kraken-framework-pagination-icon-width);
        height: var(--kraken-framework-pagination-icon-height);
      }
    }
  }
}

/* -- [05.05] Post Navigation Styles -- */
.kraken-post-navigation {
  width: 100%;
  margin: 3.5rem auto;
}

.kraken-post-navigation__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kraken-post-navigation__item {
  width: 50%;
}

.kraken-post-navigation__item--next {
  display: flex;
  justify-content: flex-end;
}

.kraken-post-navigation__item--previous {
  display: flex;
  justify-content: flex-start;
}

/* -- [05.06] Header Notice Styles -- */
.kraken-header-notice {
  width: 100%;
  background-color: var(--kraken-framework-header-notice-background-color);
  
  @media (min-width: 991px) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 115;
  }

  &.kraken-header-notice--is-active {
    display: block;
  }

  &.kraken-header-notice--is-disabled {
    display: none;
    height: 0;
  }

  .kraken-header-notice__inner {
    display: flex;
    align-items: center;
    min-height: var(--kraken-framework-header-notice-height);
    margin: 0 auto;
    padding: var(--kraken-framework-header-notice-padding);
  }

  .kraken-header-notice__text {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--kraken-framework-header-notice-font-color);
    font-size: var(--kraken-framework-header-notice-font-size);
    font-weight: var(--kraken-framework-header-notice-font-weight);
    text-align: center;

    @media (min-width: 991px) {
      width: calc(100% - 40px);
    }

    a {
      color: var(--kraken-framework-header-notice-link-color);

      &:hover {
        color: var(--kraken-framework-header-notice-link-hover-color);
      }

      &:focus {
        color: var(--kraken-framework-header-notice-link-focus-color);
      }

      &:focus-visible {
        outline: solid 2px var(--kraken-framework-accessability-color-color);
        outline-offset: 2px;
        visibility: visible;
        opacity: 1;
      }
    }
  }

  .kraken-header-notice__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: var(--kraken-framework-header-notice-button-background-color);
    color: var(--kraken-framework-header-notice-button-color);
    border: none;
    border-radius: var(--kraken-framework-header-notice-button-border-radius);
    cursor: pointer;
    transition: all 600ms ease-out;

    &:hover {
      background-color: var(--kraken-framework-header-notice-button-hover-background-color);
      color: var(--kraken-framework-header-notice-button-hover-color);
    }

    &:focus {
      background-color: var(--kraken-framework-header-notice-button-hover-background-color);
      color: var(--kraken-framework-header-notice-button-hover-color);
    }

    &:focus-visible {
      outline: solid 2px var(--kraken-framework-accessability-color-color);
      outline-offset: 2px;
      visibility: visible;
      opacity: 1;
    }

    svg {
      width: 20px;
      height: 20px;
    }
  }
}

/* -- [05.07] Post / Single Post Styles -- */
/* -- [05.07.a] Card Styles -- */
.kraken-post {
  width: 100%;
  margin: 0 auto;
  
  background-color: var(--kraken-framework-post-font-background);
  color: var(--kraken-framework-post-font-color);
  border-radius: var(--kraken-framework-post-border-radius);

  .kraken-post__inner {
    padding: var(--kraken-framework-post-padding);
  }

  .kraken-post__footer {
    margin-top: 2rem;
  }
}

/* -- [05.07.b] Featured Image Styles -- */
.kraken-post__image {
  &.kraken-post__image--post {
    .kraken-post__image-link {
      overflow: hidden;
      aspect-ratio: var(--kraken-framework-post-image-aspect-ratio);
      display: block;
      width: 100%;
      height: 100%;    
      margin: var(--kraken-framework-post-image-margin);
      padding: var(--kraken-framework-post-image-padding);
      border-radius: var(--kraken-framework-post-image-border-radius);
    }

    .kraken-post__image-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
  }

  &.kraken-post__image--single {
    overflow: hidden;
    aspect-ratio: var(--kraken-framework-single-post-image-aspect-ratio);
    margin: var(--kraken-framework-single-post-image-margin);
    padding: var(--kraken-framework-single-post-image-padding);
    border-radius: var(--kraken-framework-single-post-image-border-radius);

    .kraken-post__image-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
  }
}

/* -- [05.07.c] Meta Styles -- */
.kraken-post-meta {
  display: flex;
  gap: 0.5rem;

  &.kraken-post-meta--header {
    .kraken-post-meta__col {
      kraken-post-meta__col--1 {
        max-width: 60px;
      }

      kraken-post-meta__col--2 {
        max-width: calc(100% - 60px);
      }
    }

    .kraken-post-meta__row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }

  &.kraken-post-meta--footer {
    .kraken-post-meta__col {
      width: 50%;

      &.kraken-post-meta__col--1 {
        display: flex;
        justify-content: flex-start;
      }

      &.kraken-post-meta__col--2 {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

.single {
  .kraken-post-meta--footer {
    margin: 3rem 0 1rem 0;
  }
}

/* -- [05.07.d] Date Styles -- */
.kraken-post-date {
  color: var(--kraken-framework-post-date-font-color);
  font-size: var(--kraken-framework-post-date-font-size);
  line-height: var(--kraken-framework-post-date-line-height);
}

/* -- [05.07.e] Author Avatar Styles -- */
.kraken-post-author-avatar {
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 100%;
}

/* -- [05.07.f] Author Styles -- */
.kraken-post-author {
  font-size: var(--kraken-framework-post-author-font-size);
  line-height: var(--kraken-framework-post-author-line-height);

  .kraken-post-author__link {
    color: var(--kraken-framework-post-author-font-color);
    font-size: var(--kraken-framework-post-author-font-size);
    line-height: var(--kraken-framework-post-author-line-height);
    text-decoration: none;
    transition: color 250ms ease-in-out;

    .kraken-post-author__name {
      color: var(--kraken-framework-post-author-font-color);
      font-size: var(--kraken-framework-post-author-font-size);
      line-height: var(--kraken-framework-post-author-line-height);
    }

    &:hover {
      .kraken-post-author__name {
        color: var(--kraken-framework-post-author-hover-font-color);
      }
    }

    &:focus-visible {
      outline: solid 2px var(--kraken-framework-accessability-color-color);
      outline-offset: 2px;
      visibility: visible;
      opacity: 1;
    }
  }
}

/* -- [05.07.g] Reading Time Styles -- */
.kraken-post-reading {
  color: var(--kraken-framework-post-reading-font-color);
  font-size: var(--kraken-framework-post-reading-font-size);
  line-height: var(--kraken-framework-post-reading-line-height);
}

/* -- [05.07.h] Comments Styles -- */
.kraken-post-comments {
  .kraken-post-comments__link {
    color: var(--kraken-framework-post-comments-font-color);
    font-size: var(--kraken-framework-post-comments-font-size);
    line-height: var(--kraken-framework-post-comments-line-height);
    text-decoration: none;
    transition: color 250ms ease-in-out;

    &:hover {
      color: var(--kraken-framework-post-comments-hover-font-color);
    }

    &:focus-visible {
      outline: solid 2px var(--kraken-framework-accessability-color-color);
      outline-offset: 2px;
      visibility: visible;
      opacity: 1;
    }
  }
}

/* -- [05.07.i] Views Styles -- */
.kraken-post-views {
  color: var(--kraken-framework-post-views-font-color);
  font-size: var(--kraken-framework-post-views-font-size);
  line-height: var(--kraken-framework-post-views-line-height);
}

/* -- [05.07.j] Title Styles -- */
.kraken-post-title {
  margin: var(--kraken-framework-post-title-margin);
  padding: var(--kraken-framework-post-title-padding);
  font-size: var(--kraken-framework-post-title-font-size);
  line-height: var(--kraken-framework-post-title-line-height);

  .kraken-post-title__link {
    color: var(--kraken-framework-post-title-font-color);
    text-decoration: none;
    transition: color 250ms ease-in-out;

    &:hover {
      color: var(--kraken-framework-post-title-hover-font-color);
    }

    &:focus-visible {
      outline: solid 2px var(--kraken-framework-accessability-color-color);
      outline-offset: 2px;
      visibility: visible;
      opacity: 1;
    }
  }
}

/* -- [05.07.k] Excerpt Styles -- */
.kraken-post-excerpt {
  margin: var(--kraken-framework-post-excerpt-margin);
  padding: var(--kraken-framework-post-excerpt-padding);
  color: var(--kraken-framework-post-excerpt-font-color);
  font-size: var(--kraken-framework-post-excerpt-font-size);
  line-height: var(--kraken-framework-post-excerpt-line-height);
}

/* -- [05.07.l] Link Styles -- */
.kraken-post-link {
  .kraken-post-link__link {
    color: var(--kraken-framework-post-link-font-color);
    font-size: var(--kraken-framework-post-link-font-size);
    line-height: var(--kraken-framework-post-link-line-height);
    text-decoration: none;
    transition: color 250ms ease-in-out;

    &:hover {
      color: var(--kraken-framework-post-link-hover-font-color);
    }

    &:focus-visible {
      outline: solid 2px var(--kraken-framework-accessability-color-color);
      outline-offset: 2px;
      visibility: visible;
      opacity: 1;
    }
  }
}

/* -- [05.07.m] Single Post Title Styles -- */
.kraken-title {
  &.kraken-title--single {
    margin: var(--kraken-framework-single-post-title-margin);
    padding: var(--kraken-framework-single-post-title-padding);
    color: var(--kraken-framework-single-post-title-font-color);
    font-size: var(--kraken-framework-single-post-title-font-size);
    line-height: var(--kraken-framework-single-post-title-line-height);
  }
}

/* -- [05.07.n] Tags Styles -- */
.kraken-post-tags {
  .kraken-post-tags__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    .kraken-post-tags__item {
      &.kraken-post-tags__item--title {
        font-size: var(--kraken-framework-tag-label-font-size);
        font-weight: var(--kraken-framework-tag-label-font-weight);
      }

      .kraken-post-tags__link {
        display: block;
        padding: var(--kraken-framework-tag-padding);
        background-color: var( --kraken-framework-tag-background);
        color: var(--kraken-framework-tag-font-color);
        border: var(--kraken-framework-tag-border);
        border-radius: var(--kraken-framework-tag-border-radius);
        text-decoration: none;
        font-size: var(--kraken-framework-tag-font-size);
        line-height: var(--kraken-framework-tag-line-height);
        transition: all 250ms ease-in-out;

        &:hover {
          background-color: var(--kraken-framework-tag-hover-background);
          color: var(--kraken-framework-tag-font-hover-color);
          border: var(--kraken-framework-tag-hover-border);
        }

        &:focus-visible {
          outline: solid 2px var(--kraken-framework-accessability-color-color);
          outline-offset: 2px;
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
}

/* -- [05.07.o] Categories Styles -- */
.kraken-post-categories {
  .kraken-post-categories__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;

    .kraken-post-categories__item {
      &.kraken-post-categories__item--title {
        font-size: var(--kraken-framework-categories-label-font-size);
        font-weight: var(--kraken-framework-categories-label-font-weight);
      }

      .kraken-post-categories__link {
        display: block;
        padding: var(--kraken-framework-categories-padding);
        background-color: var( --kraken-framework-categories-background);
        color: var(--kraken-framework-categories-font-color);
        border: var(--kraken-framework-categories-border);
        border-radius: var(--kraken-framework-categories-border-radius);
        text-decoration: none;
        font-size: var(--kraken-framework-categories-font-size);
        line-height: var(--kraken-framework-categories-line-height);
        transition: all 250ms ease-in-out;

        &:hover {
          background-color: var(--kraken-framework-categories-hover-background);
          color: var(--kraken-framework-categories-font-hover-color);
          border: var(--kraken-framework-categories-hover-border);
        }

        &:focus-visible {
          outline: solid 2px var(--kraken-framework-accessability-color-color);
          outline-offset: 2px;
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
}

/* -- [05.08] Related Post Styles -- */
.kraken-related-posts {
  .kraken-related-posts__loop {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* -- [05.09] Comment Styles -- */
.kraken-comments-container {
  --kraken-framework-comments-title-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-comments-title-font-size: 1.5rem;
  --kraken-framework-comments-title-margin: 3rem 0 1rem 0;
  --kraken-framework-comments-thread-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-comments-author-font-color: var(--kraken-framework-accent-color);
  --kraken-framework-comments-author-font-size: 0.9rem;
  --kraken-framework-comments-author-font-weight: 400;
  --kraken-framework-comments-author-font-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-comments-author-font-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-comments-date-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-comments-date-font-size: 0.9rem;
  --kraken-framework-comments-date-font-weight: 400;
  width: 100%;
  margin: 2rem auto 0 auto;
}

.kraken-comments-container__title {
  color: var(--kraken-framework-comments-title-font-color);
  font-size: var(--kraken-framework-comments-title-font-size);
  margin: var(--kraken-framework-comments-title-margin);
}

.kraken-comments-container__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kraken-comments-container .children {
  margin: 0 0 0 2rem;
  padding: 0;
  list-style: none;
}

.kraken-comments-container .children li:last-child .kraken-comments {
  margin-bottom: 1.5rem;
}

.kraken-comments-container .comment:has(.children) .kraken-comments {
  margin-bottom: 1rem;
}

.kraken-comments-container .comment:has(.children) .kraken-comments__thread .kraken-comments__thread-line {
  width: 1px;
  height: 100%;
  background-color: var(--kraken-framework-comments-thread-color);
}

.kraken-comments {
  margin-bottom: 1.5rem;
}

.kraken-comments__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kraken-comments__content {
  display: flex;
  gap: 1rem;
}

.kraken-comments__content .kraken-comments__thread {
  display: flex;
  justify-content: center;
  width: 32px;
  height: auto;
}

.kraken-comments__content .kraken-comments__message p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.kraken-comments__footer {
  display: flex;
  gap: 1rem;
}

.kraken-comments__footer .kraken-comments__thread {
  display: flex;
  justify-content: center;
  width: 32px;
  height: auto;
}
.kraken-comments__footer .kraken-comments__reply {
  margin-top: 1rem;
}
.kraken-comments__footer .kraken-comments__reply a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 0;
  text-decoration: none;
}
.kraken-comments__footer .kraken-comments__reply a:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10.503 17.8H20.5a.3.3 0 0 0 .3-.3v-12a.3.3 0 0 0-.3-.3h-17a.3.3 0 0 0-.3.3v12a.3.3 0 0 0 .3.3h4.7v2.303zM11 19l-2.293 2.293A1 1 0 0 1 7 20.586V19H3.5A1.5 1.5 0 0 1 2 17.5v-12A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v12a1.5 1.5 0 0 1-1.5 1.5z'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  color: #000000;
}
.kraken-comments__avatar {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.kraken-comments__author {
  margin: 0;
  font-size: var(--kraken-framework-comments-author-font-size);
  font-weight: var(--kraken-framework-comments-author-font-weight);
  line-height: 1;
}
.kraken-comments__author .url {
  color: var(--kraken-framework-comments-author-font-color);
  text-decoration: none;
}
.kraken-comments__author .url:hover {
  color: var(--kraken-framework-comments-author-font-hover-color);
}
.kraken-comments__author .url:focus {
  color: var(--kraken-framework-comments-author-font-focus-color);
}
.kraken-comments__author .url:focus-visible {
  outline: solid 2px var(--kraken-framework-accessability-color-color);
  outline-offset: 2px;
  visibility: visible;
  opacity: 1;
}
.kraken-comments__date {
  color: var(--kraken-framework-comments-date-font-color);
  font-size: var(--kraken-framework-comments-date-font-size);
  font-weight: var(--kraken-framework-comments-date-font-weight);
  line-height: 1;
}

.comment-respond {
  padding: 2rem 0;
}
.comment-respond .comment-reply-title {
  margin: 0;
}
.comment-respond .comment-reply-title small {
  margin-left: 1rem;
}
.comment-respond .comment-reply-title small a {
  text-decoration: none;
}
.comment-respond .logged-in-as,
.comment-respond .comment-notes {
  font-size: 0.9rem;
}
.comment-respond .required {
  color: rgba(255, 0, 0, 0.9529411765);
}
.comment-respond label {
  display: block;
}
.comment-respond .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.comment-respond .comment-form-cookies-consent label {
  margin-bottom: 0;
}

/* -- [05.10] Element Block Styles -- */
.kraken-element-block.alignwide > div.alignwide {
  max-width: var(--kraken-framework-main-max-wide-width);
  margin-left: auto;
  margin-right: auto;
}

.kraken-element-block.alignwide > div.alignfull {
  max-width: var(--kraken-framework-main-max-wide-width);
  margin-left: auto;
  margin-right: auto;
}

.kraken-element-block.alignfull > div.alignwide {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.kraken-element-block.alignfull > div.alignfull {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.kraken-element-block > div.alignwide {
  max-width: calc(var(--kraken-framework-main-max-width) - (var(--kraken-framework-main-padding-left) + var(--kraken-framework-main-padding-right)));
  margin-left: auto !important;
  margin-right: auto !important;
}

.kraken-element-block > div.alignfull {
  max-width: calc(var(--kraken-framework-main-max-width) - (var(--kraken-framework-main-padding-left) + var(--kraken-framework-main-padding-right)));
  margin-left: auto !important;
  margin-right: auto !important;
}

.kraken-element-block.alignwide > div {
  max-width: var(--kraken-framework-main-max-wide-width);
  margin-left: auto;
  margin-right: auto;
}

.kraken-element-block.alignwide > div {
  max-width: var(--kraken-framework-main-max-wide-width);
  margin-left: auto;
  margin-right: auto;
}

.kraken-element-block.alignfull > div {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.kraken-element-block.alignfull > div {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.kraken-element .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* -- [05.11] Form Styles -- */
form {
  --kraken-framework-form-bg-color: #ffffff;
  --kraken-framework-form-bg-hover-color: #ffffff;
  --kraken-framework-form-bg-focus-color: #ffffff;
  --kraken-framework-form-font-color:#000000;
  --kraken-framework-form-font-hover-color: #000000;
  --kraken-framework-form-font-focus-color: #000000;
  --kraken-framework-form-border-color: var(--kraken-framework-accent-color);
  --kraken-framework-form-hover-border-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-form-focus-border-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-form-hover-outline-color: transparent;
  --kraken-framework-form-hover-outline-color: transparent;
  --kraken-framework-form-focus-outline-color: transparent;
  --kraken-framework-form-legend-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-form-label-font-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-form-font-size: 0.9rem;
  --kraken-framework-form-line-height: 1.2;
  --kraken-framework-legend-font-size: 1rem;
  --kraken-framework-legend-line-height: 1.5;
  --kraken-framework-legend-font-weight: 600;
  --kraken-framework-label-font-size: 1rem;
  --kraken-framework-label-line-height: 1;
  --kraken-framework-label-margin-bottom: 0.5rem;
  --kraken-framework-form-padding: 10px;
}

form [multiple],
form [type=date],
form [type=datetime-local],
form [type=email],
form [type=month],
form [type=number],
form [type=password],
form [type=search],
form [type=tel],
form [type=text],
form [type=time],
form [type=url],
form [type=week],
form [type=file],
form select,
form textarea {
  display: block;
  background-color: var(--kraken-framework-form-bg-color);
  color: var(--kraken-framework-form-font-color);
  border: 1px solid var(--kraken-framework-form-border-color);
  border-radius: 0;
  outline: 1px solid var(--kraken-framework-form-hover-outline-color);
  padding: var(--kraken-framework-form-padding);
  width: 100%;
  font-size: var(--kraken-framework-form-font-size);
  line-height: var(--kraken-framework-form-line-height);
  transition: 0.1s ease-in-out;
}
form [multiple]:hover,
form [type=date]:hover,
form [type=datetime-local]:hover,
form [type=email]:hover,
form [type=month]:hover,
form [type=number]:hover,
form [type=password]:hover,
form [type=search]:hover,
form [type=tel]:hover,
form [type=text]:hover,
form [type=time]:hover,
form [type=url]:hover,
form [type=week]:hover,
form [type=file]:hover,
form select:hover,
form textarea:hover {
  background-color: var(--kraken-framework-form-bg-hover-color);
  color: var(--kraken-framework-form-font-hover-color);
  border: 1px solid var(--kraken-framework-form-hover-border-color);
  outline: 1px solid var(--kraken-framework-form-hover-outline-color);
}
form [multiple]:focus,
form [type=date]:focus,
form [type=datetime-local]:focus,
form [type=email]:focus,
form [type=month]:focus,
form [type=number]:focus,
form [type=password]:focus,
form [type=search]:focus,
form [type=tel]:focus,
form [type=text]:focus,
form [type=time]:focus,
form [type=url]:focus,
form [type=week]:focus,
form [type=file]:focus,
form select:focus,
form textarea:focus {
  background-color: var(--kraken-framework-form-bg-focus-color);
  color: var(--kraken-framework-form-font-focus-color);
  border: 1px solid var(--kraken-framework-form-focus-border-color);
  outline: 1px solid var(--kraken-framework-form-focus-outline-color);
}
form [multiple]:focus-visible,
form [type=date]:focus-visible,
form [type=datetime-local]:focus-visible,
form [type=email]:focus-visible,
form [type=month]:focus-visible,
form [type=number]:focus-visible,
form [type=password]:focus-visible,
form [type=search]:focus-visible,
form [type=tel]:focus-visible,
form [type=text]:focus-visible,
form [type=time]:focus-visible,
form [type=url]:focus-visible,
form [type=week]:focus-visible,
form [type=file]:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
  outline: solid 2px var(--kraken-framework-accessability-color-color);
  outline-offset: 2px;
  visibility: visible;
  opacity: 1;
}
form fieldset {
  border: none;
}
form legend {
  color: var(--kraken-framework-form-legend-font-color);
  font-size: var(--kraken-framework-legend-font-size);
  line-height: var(--kraken-framework-legend-line-height);
  font-weight: var(--kraken-framework-legend-font-weight);
}
form label {
  margin-bottom: var(--kraken-framework-label-margin-bottom);
  color: var(--kraken-framework-form-label-font-color);
  font-size: var(--kraken-framework-label-font-size);
  line-height: var(--kraken-framework-label-line-height);
}

/* -- [05.12] Post Filter Styles -- */
.kraken-archive-options {
  margin: 0 0 3rem 0;

  .kraken-archive-filters__legend {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
  }

  .kraken-archive-filters__fieldset {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;

    @media (min-width: 991px) {
      flex-direction: row;
    }
  }

  .kraken-archive-options__dropdown {
    width: 100%;

    @media (min-width: 991px) {
      width: 16%;
    }

    .kraken-archive-options__select {
      border-radius: 0.2rem;
      font-size: 0.8rem;
    }
  }

  .kraken-archive-filters__actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;

    @media (min-width: 991px) {
      width: 36%;
    }
  }

  .kraken-archive-option__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.9rem;
    background-color: #000;
    color: #ffffff;
    border: none;
    border-radius: 0.2rem;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }
}

.archive-description {
  margin-bottom: 3rem;
}

/* -- [05.13] Splash Credit Styles -- */
.kraken-splash-credit {
  --kraken-framework-credit-color: #000000;
  --kraken-framework-credit-hover-color: #000000;
  --kraken-framework-credit-logo-fill: #8e8e8e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  margin: 1rem 0 0 0;
  color: var(--kraken-framework-credit-color);
  text-decoration: none;
}
@media (min-width: 991px) {
  .kraken-splash-credit {
    flex-direction: row;
    margin: 0;
  }
}
.kraken-splash-credit:hover {
  color: var(--kraken-framework-credit-hover-color);
}
.kraken-splash-credit:focus {
  color: var(--kraken-framework-credit-focus-color);
}
.kraken-splash-credit:focus-visible {
  outline: solid 2px var(--kraken-framework-accessability-color-color);
  outline-offset: 2px;
  visibility: visible;
  opacity: 1;
}
.kraken-splash-credit__text {
  font-size: 0.7rem;
}
.kraken-splash-credit__logo {
  width: 70px;
}
.kraken-splash-credit__logo-color {
  fill: var(--kraken-framework-credit-logo-fill);
}

/* -- [05.14] Scroll Top Styles -- */
@supports (animation-timeline: scroll()) {
  .kraken-scroll-to-top {
    position: fixed;
    right: var(--kraken-framework-header-scroll-top-pos-right);
    bottom: var(--kraken-framework-header-scroll-top-pos-bottom);
    z-index: 109;
    
    .kraken-scroll-to-top__btn {
      animation: scroll-to-top-button-reveal linear both;
      animation-timeline: scroll();
      animation-range: 70vh 100vh;
      animation-duration: 1ms;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(12px);
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--kraken-framework-header-scroll-top-width);
      height: var(--kraken-framework-header-scroll-top-height);
      background-color: var(--kraken-framework-header-scroll-top-background-color);
      color: var(--kraken-framework-header-scroll-top-color);
      border: solid var(--kraken-framework-header-scroll-top-border-size) var(--kraken-framework-header-scroll-top-border-color);
      border-radius: var(--kraken-framework-header-scroll-top-border-radius);

      &:hover {
        background-color: var(--kraken-framework-header-scroll-top-hover-background-color);
        color: var(--kraken-framework-header-scroll-top-hover-color);
        border: solid var(--kraken-framework-header-scroll-top-border-size) var(--kraken-framework-header-scroll-top-border-hover-color);
      }

      &:focus {
        background-color: var(--kraken-framework-header-scroll-top-focus-background-color);
        color: var(--kraken-framework-header-scroll-top-focus-color);
        border: solid var(--kraken-framework-header-scroll-top-border-size) var(--kraken-framework-header-scroll-top-border-focus-color);
      }

      &:focus-visible {
        outline: solid 2px var(--kraken-framework-accessability-color-color);
        outline-offset: 2px;
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

/* -- [05.15] Email Styles -- */
.kraken-header .kraken-email {
  --kraken-framework-email-icon-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-email-icon-size: 16px;
  --kraken-framework-email-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
  --kraken-framework-email-link-color: var(--kraken-framework-accent-color);
  --kraken-framework-email-link-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-font-size: 0.8rem;
  --kraken-framework-email-font-line-height: 1.3;
  --kraken-framework-email-gap: 0.4rem;
}

.body--transparent .kraken-header .kraken-email {
  --kraken-framework-email-icon-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-email-icon-size: 16px;
  --kraken-framework-email-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
  --kraken-framework-email-link-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-email-link-hover-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-email-link-focus-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-email-link-font-size: 0.8rem;
  --kraken-framework-email-font-line-height: 1.3;
  --kraken-framework-email-gap: 0.4rem;
}

.kraken-footer .kraken-email {
  --kraken-framework-email-icon-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-email-icon-size: 16px;
  --kraken-framework-email-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
  --kraken-framework-email-link-color: var(--kraken-framework-accent-color);
  --kraken-framework-email-link-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-font-size: 0.8rem;
  --kraken-framework-email-font-line-height: 1.3;
  --kraken-framework-email-gap: 0.4rem;
}

.kraken-email {
  --kraken-framework-email-icon-color: var(--kraken-framework-strong-text-color);
  --kraken-framework-email-icon-size: 16px;
  --kraken-framework-email-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
  --kraken-framework-email-link-color: var(--kraken-framework-accent-color);
  --kraken-framework-email-link-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-font-size: 0.8rem;
  --kraken-framework-email-font-line-height: 1.3;
  --kraken-framework-email-gap: 0.4rem;
  display: flex;
  align-items: center;
  gap: var(--kraken-framework-email-gap);
}

.kraken-email--icon:before {
  content: "";
  display: block;
  width: var(--kraken-framework-email-icon-size);
  height: var(--kraken-framework-email-icon-size);
  background-color: var(--kraken-framework-email-icon-color);
  -webkit-mask: var(--kraken-framework-email-icon-svg) no-repeat;
          mask: var(--kraken-framework-email-icon-svg) no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.kraken-email__link {
  display: inline-block;
  width: 100%;
  padding: 0.3rem 0;
  color: var(--kraken-framework-email-link-color);
  font-size: var(--kraken-framework-email-link-font-size);
  line-height: var(--kraken-framework-email-font-line-height);
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

@media (min-width: 991px) {
  .kraken-email__link {
    padding: 0.2rem 0;
  }
}

.kraken-email__link:hover {
  color: var(--kraken-framework-email-link-hover-color);
}

.kraken-email__link:focus {
  color: var(--kraken-framework-email-link-focus-color);
}

.kraken-email__link:focus-visible {
  outline: solid 2px var(--kraken-framework-accessability-color-color);
  outline-offset: 2px;
  visibility: visible;
  opacity: 1;
}

.kraken-email__error {
  color: #ff0000;
  font-size: var(--kraken-framework-email-link-font-size);
}

.kraken-entry__content .kraken-email {
  --kraken-framework-email-icon-color: inherit, var(--kraken-framework-regular-text-color);
  --kraken-framework-email-icon-size: 16px;
  --kraken-framework-email-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
  --kraken-framework-email-link-color: inherit, var(--kraken-framework-regular-text-color);
  --kraken-framework-email-link-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-email-link-font-size: inherit, 1rem;
  --kraken-framework-email-font-line-height: inherit, var(--kraken-framework-base-line-height);
  --kraken-framework-email-gap: 0.4rem;
}

/* -- [05.16] Phone Styles -- */
.kraken-header .kraken-phone-number {
  --kraken-framework-phone-icon-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-phone-icon-size: 16px;
  --kraken-framework-phone-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M347.1 24.6c7.7-18.6 28-28.5 47.4-23.2l88 24C499.9 30.2 512 46 512 64c0 247.4-200.6 448-448 448c-18 0-33.8-12.1-38.6-29.5l-24-88c-5.3-19.4 4.6-39.7 23.2-47.4l96-40c16.3-6.8 35.2-2.1 46.3 11.6l40.4 49.3c70.4-33.3 127.4-90.3 160.7-160.7L318.7 167c-13.7-11.2-18.4-30-11.6-46.3l40-96z'/%3E%3C/svg%3E");
  --kraken-framework-phone-number-color: var(--kraken-framework-accent-color);
  --kraken-framework-phone-number-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-font-size: 0.8rem;
  --kraken-framework-phone-number-font-line-height: 1.3;
  --kraken-framework-phone-gap: 0.4rem;
}

.body--transparent .kraken-header .kraken-phone-number {
  --kraken-framework-phone-icon-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-phone-icon-size: 16px;
  --kraken-framework-phone-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M347.1 24.6c7.7-18.6 28-28.5 47.4-23.2l88 24C499.9 30.2 512 46 512 64c0 247.4-200.6 448-448 448c-18 0-33.8-12.1-38.6-29.5l-24-88c-5.3-19.4 4.6-39.7 23.2-47.4l96-40c16.3-6.8 35.2-2.1 46.3 11.6l40.4 49.3c70.4-33.3 127.4-90.3 160.7-160.7L318.7 167c-13.7-11.2-18.4-30-11.6-46.3l40-96z'/%3E%3C/svg%3E");
  --kraken-framework-phone-number-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-phone-number-hover-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-phone-number-focus-color: var(--kraken-framework-offwhite-color);
  --kraken-framework-phone-number-font-size: 0.8rem;
  --kraken-framework-phone-number-font-line-height: 1.3;
  --kraken-framework-phone-gap: 0.4rem;
}

.kraken-footer .kraken-phone-number {
  --kraken-framework-phone-icon-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-phone-icon-size: 16px;
  --kraken-framework-phone-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M347.1 24.6c7.7-18.6 28-28.5 47.4-23.2l88 24C499.9 30.2 512 46 512 64c0 247.4-200.6 448-448 448c-18 0-33.8-12.1-38.6-29.5l-24-88c-5.3-19.4 4.6-39.7 23.2-47.4l96-40c16.3-6.8 35.2-2.1 46.3 11.6l40.4 49.3c70.4-33.3 127.4-90.3 160.7-160.7L318.7 167c-13.7-11.2-18.4-30-11.6-46.3l40-96z'/%3E%3C/svg%3E");
  --kraken-framework-phone-number-color: var(--kraken-framework-accent-color);
  --kraken-framework-phone-number-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-font-size: 0.8rem;
  --kraken-framework-phone-number-font-line-height: 1.3;
  --kraken-framework-phone-gap: 0.4rem;
}

.kraken-phone-number {
  --kraken-framework-phone-icon-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-phone-icon-size: 16px;
  --kraken-framework-phone-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M347.1 24.6c7.7-18.6 28-28.5 47.4-23.2l88 24C499.9 30.2 512 46 512 64c0 247.4-200.6 448-448 448c-18 0-33.8-12.1-38.6-29.5l-24-88c-5.3-19.4 4.6-39.7 23.2-47.4l96-40c16.3-6.8 35.2-2.1 46.3 11.6l40.4 49.3c70.4-33.3 127.4-90.3 160.7-160.7L318.7 167c-13.7-11.2-18.4-30-11.6-46.3l40-96z'/%3E%3C/svg%3E");
  --kraken-framework-phone-number-color: var(--kraken-framework-accent-color);
  --kraken-framework-phone-number-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-font-size: 0.8rem;
  --kraken-framework-phone-number-font-line-height: 1.3;
  --kraken-framework-phone-gap: 0.4rem;
  display: flex;
  align-items: center;
  gap: var(--kraken-framework-phone-gap);
}

.kraken-phone-number--icon:before {
  content: "";
  display: block;
  width: var(--kraken-framework-phone-icon-size);
  height: var(--kraken-framework-phone-icon-size);
  background-color: var(--kraken-framework-phone-icon-color);
  -webkit-mask: var(--kraken-framework-phone-icon-svg) no-repeat;
          mask: var(--kraken-framework-phone-icon-svg) no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.kraken-phone-number__link {
  display: inline-block;
  width: 100%;
  padding: 0.3rem 0;
  color: var(--kraken-framework-phone-number-color);
  font-size: var(--kraken-framework-phone-number-font-size);
  line-height: var(--kraken-framework-phone-number-font-line-height);
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

@media (min-width: 991px) {
  .kraken-phone-number__link {
    padding: 0.2rem 0;
  }
}

.kraken-phone-number__link:hover {
  color: var(--kraken-framework-phone-number-hover-color);
}

.kraken-phone-number__link:focus {
  color: var(--kraken-framework-phone-number-focus-color);
}

.kraken-phone-number__link:focus-visible {
  outline: solid 2px var(--kraken-framework-accessability-color-color);
  outline-offset: 2px;
  visibility: visible;
  opacity: 1;
}

.kraken-phone-number__error {
  color: #ff0000;
  font-size: var(--kraken-framework-phone-number-font-size);
}

.kraken-entry__content .kraken-phone-number {
  --kraken-framework-phone-icon-color: inherit, var(--kraken-framework-regular-text-color);
  --kraken-framework-phone-icon-size: 16px;
  --kraken-framework-phone-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M347.1 24.6c7.7-18.6 28-28.5 47.4-23.2l88 24C499.9 30.2 512 46 512 64c0 247.4-200.6 448-448 448c-18 0-33.8-12.1-38.6-29.5l-24-88c-5.3-19.4 4.6-39.7 23.2-47.4l96-40c16.3-6.8 35.2-2.1 46.3 11.6l40.4 49.3c70.4-33.3 127.4-90.3 160.7-160.7L318.7 167c-13.7-11.2-18.4-30-11.6-46.3l40-96z'/%3E%3C/svg%3E");
  --kraken-framework-phone-number-color: inherit, var(--kraken-framework-regular-text-color);
  --kraken-framework-phone-number-hover-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-focus-color: var(--kraken-framework-accent-alt-color);
  --kraken-framework-phone-number-font-size: inherit, 1rem;
  --kraken-framework-phone-number-font-line-height: inherit, var(--kraken-framework-base-line-height);
  --kraken-framework-phone-gap: 0.4rem;
}

/* -- [05.17] Address Styles -- */
.kraken-address {
  --kraken-framework-address-font-color: var(--kraken-framework-regular-text-color);
  --kraken-framework-address-font-weight: 400;
  --kraken-framework-address-heading-font-weight: 600;
  --kraken-framework-address-font-size: 0.8rem;
  --kraken-framework-address-line-height: 1.8;
  --kraken-framework-address-text-transform: capitalize;
  font-style: normal;
  line-height: var(--kraken-framework-address-line-height);
}

.kraken-address__list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  font-size: var(--kraken-framework-address-font-size);
  font-weight: var(--kraken-framework-address-font-weight);
}

.kraken-address__heading {
  font-weight: var(--kraken-framework-address-heading-font-weight);
  text-transform: var(--kraken-framework-address-text-transform);
}

.kraken-address__error {
  color: #ff0000;
  font-size: var(--kraken-framework-address-font-size);
}

.kraken-entry__content .kraken-address {
  --kraken-framework-address-font-color: inherit, var(--kraken-framework-regular-text-color);
  --kraken-framework-address-font-weight: 400;
  --kraken-framework-address-heading-font-weight: 600;
  --kraken-framework-address-font-size: inherit, 1rem;
  --kraken-framework-address-line-height: inherit, var(--kraken-framework-base-line-height);
  --kraken-framework-address-text-transform: capitalize;
  font-style: normal;
}

/* -- [05.18] Entry Styles -- */
.kraken-entry {
  .kraken-entry__header {
    max-width: var(--kraken-framework-max-width);
    margin: 0 auto;
    padding-right: var(--kraken-framework-site-padding-left);
    padding-left: var(--kraken-framework-site-padding-right);
  }

  .kraken-entry__content {
    padding-right: var(--kraken-framework-site-padding-left);
    padding-left: var(--kraken-framework-site-padding-right);
  }

  .kraken-entry__footer {
    max-width: var(--kraken-framework-max-width);
    margin: 0 auto;
    padding-right: var(--kraken-framework-site-padding-left);
    padding-left: var(--kraken-framework-site-padding-right);
  }
}

/* -- [05.19] Search Styles -- */
.search-form {
    display: flex;
    align-items: center;
    gap: 8px; 
    max-width: 100%;
}

.search-form label {
    display: flex;
    align-items: center;
}

.search-form .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;
}

.search-form .search-field {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    outline: none;
    width: 100%;
    max-width: 220px;
}

.search-form .search-submit {
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.search-form .search-field:focus {
    border-color: #000;
}

.search-form .search-submit:hover {
    opacity: 0.85;
}

@media (max-width: 480px) {
    .search-form {
        width: 100%;
    }

    .search-form .search-field {
        max-width: 100%;
        flex: 1;
    }
}

/* ================= [06] Utilities ================= */
/* -- [06.00] Header Skip Links -- */
.kraken-skip-links {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99999;
}

.kraken-skip-links__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kraken-skip-links__link {
  position: fixed;
  top: 50px;
  left: 20px;
  z-index: 999999;
  opacity: 0;
  min-width: 200px;
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  color: #222222;
  border: 3px solid var(--kraken-framework-accessability-color-color);
  border-radius: 50px;
  outline: var(--kraken-framework-accessability-color-color) solid 0px;
  direction: ltr;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  transition: top 0.22s ease 0s;
  pointer-events: none;
}

.kraken-skip-links__link:focus {
  top: 20px;
  opacity: 1;
  pointer-events: auto;
}

/* -- [06.01] Screen Reader Styles -- */
.kraken-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* -- [06.02] Animation Styles -- */
/* -- [06.02.a] Fade in Animation -- */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes kraken-logo-fade-out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes kraken-logo-fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* -- [06.02.b] Header Shrink Animation -- */
@keyframes header-shrink {
  from {
    --kraken-framework-header-row-height-top: var(--header-top-row-height);
    --kraken-framework-header-row-height-main: var(--header-main-row-height);
    --kraken-framework-header-row-height-bottom: var(--header-bottom-row-height);
  }

  to {
    --kraken-framework-header-row-height-top: var(--header-top-row-shrink-height);
    --kraken-framework-header-row-height-main: var(--header-main-row-shrink-height);
    --kraken-framework-header-row-height-bottom: var(--header-bottom-row-shrink-height);
  }
}

/* -- [06.02.c] Header Hide Animation -- */
@keyframes header-hide {
  from {
    --kraken-framework-header-position-top: var(--header-top-position);
  }

  to {
    --kraken-framework-header-position-top: var(--header-hide-top-position);
  }
}

/* -- [06.02.d] Header Transparent Animation -- */
@keyframes header-transparent {
  from {
    --kraken-framework-transparent-header-top-background:var(--header-transparent-background-color);
    --kraken-framework-transparent-header-main-background:var(--header-transparent-background-color);
    --kraken-framework-transparent-header-bottom-background:var(--header-transparent-background-color);
  }

  to {
    --kraken-framework-transparent-header-top-background:var(--header-transparent-background-color-scroll);
    --kraken-framework-transparent-header-main-background:var(--header-transparent-background-color-scroll);
    --kraken-framework-transparent-header-bottom-background:var(--header-transparent-background-color-scroll);
  }
}

/* -- [06.02.e] Navigation Transparent Animation -- */
@keyframes navigation-transparent {
  from {
    --navigation-primary-font-color: var(--navigation-primary-transparent-font-color);
    --navigation-primary-font-hover-color: var(--navigation-primary-transparent-font-hover-color);
    --navigation-primary-font-focus-color: var(--navigation-primary-transparent-font-focus-color);
    --navigation-primary-font-active-color: var(--navigation-primary-transparent-font-active-color);

    --navigation-secondary-font-color: var(--navigation-secondary-transparent-font-color);
    --navigation-secondary-font-hover-color: var(--navigation-secondary-transparent-font-hover-color);
    --navigation-secondary-font-focus-color: var(--navigation-secondary-transparent-font-focus-color);
    --navigation-secondary-font-active-color: var(--navigation-secondary-transparent-font-active-color);
  }

  to {
    --navigation-primary-font-color: var(--navigation-primary-transparent-scroll-font-color);
    --navigation-primary-font-hover-color: var(--navigation-primary-transparent-scroll-font-hover-color);
    --navigation-primary-font-focus-color: var(--navigation-primary-transparent-scroll-font-focus-color);
    --navigation-primary-font-active-color: var(--navigation-primary-transparent-scroll-font-active-color);

    --navigation-secondary-font-color: var(--navigation-secondary-transparent-scroll-font-color);
    --navigation-secondary-font-hover-color: var(--navigation-secondary-transparent-scroll-font-hover-color);
    --navigation-secondary-font-focus-color: var(--navigation-secondary-transparent-scroll-font-focus-color);
    --navigation-secondary-font-active-color: var(--navigation-secondary-transparent-scroll-font-active-color);
  }
}

/* -- [06.02.f] Scroll to top Button Animation -- */
@keyframes scroll-to-top-button-reveal {
  from {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  to {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* -- [06.03] Helper Styles -- */
.no--padding {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.no--margin {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.list--unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}