/*
Theme Name: Jormi
Theme URI: https://thewestharbour.com
Author: The West Harbour
Author URI: https://thewestharbour.com
Description: A fork of Frost by WP Engine .
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.8
Tested up to: 6.9
Requires PHP: 7.2
Version: 2.0.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: jormi
*/

:root {
  --header-height: 6.25rem;
  --admin-bar-height: 32px;
  --backend-header-height: 60px;
  --scrollbar-width: 15px;
  --working-area: 100vw;
  --icon-arrow-up-right: '\e09f';
  --icon-arrow-left: '\f053';
  --icon-arrow-right: '\f054';
  --icon-arrow-down: '\f078';
  --icon-arrow-up: '\f077';
  --icon-video: '\f04b';
  --icon-download: '\f019';
}

@media screen and (min-width: 992px){
  :root{
	--header-height: 7.65rem;
  }
}

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

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}


/*-----------------------------------
-------------------------------------
Typography
-------------------------------------
-----------------------------------*/

::selection, ::-moz-selection { 
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

b, strong, th {
	font-weight: 700;
}

.has-text-color :is(h1,h2,h3,h4,h5,h6):not(.has-text-color){
  color: inherit !important;
}

:where(h1,h2,h3,h4,h5,h6) a{
  &:hover {
	opacity: 0.8;
  }
}

.prose :is(h1,h2,h3,h4,h5,h6){
  margin-top: var(--wp--preset--spacing--7) !important;
}

p.has-xxxxx-large-font-size,
p.has-xxxx-large-font-size{
  margin-bottom: var(--wp--preset--spacing--7);
}

p.has-xxx-large-font-size,
p.has-xx-large-font-size{
  margin-bottom: var(--wp--preset--spacing--6);
}

p.has-x-large-font-size,
p.has-large-font-size{
  margin-bottom: var(--wp--preset--spacing--5);
}

h1.wp-block-heading, h1,
h2.wp-block-heading, h2,
p.has-medium-font-size,
p.has-base-font-size{
  margin-bottom: var(--wp--preset--spacing--4);
}

h3.wp-block-heading, h3,
p.has-small-font-size{
  margin-bottom: var(--wp--preset--spacing--3);
}

h4.wp-block-heading, h4,
p.has-x-small-font-size{
  margin-bottom: var(--wp--preset--spacing--2);
}

h5.wp-block-heading, h5,
h6.wp-block-heading, h6{
  margin-bottom: var(--wp--preset--spacing--1);
}

@media screen and (min-width: 992px){

  p.has-xxxxx-large-font-size,
  p.has-xxxx-large-font-size{
    margin-bottom: var(--wp--preset--spacing--8);
  }

  h1.wp-block-heading, h1,
  p.has-xxx-large-font-size,
  p.has-xx-large-font-size{
    margin-bottom: var(--wp--preset--spacing--7);
  }

  p.has-x-large-font-size,
  p.has-large-font-size{
    margin-bottom: var(--wp--preset--spacing--6);
  }

  h2.wp-block-heading, h2,
  p.has-medium-font-size,
  p.has-base-font-size {
    margin-bottom: var(--wp--preset--spacing--5);
  }
  
  h3.wp-block-heading, h3,
  p.has-small-font-size{
    margin-bottom: var(--wp--preset--spacing--4);
  }
  
  h4.wp-block-heading, h4,
  p.has-x-small-font-size{
    margin-bottom: var(--wp--preset--spacing--3);
  }
  
  h5.wp-block-heading, h5{
    margin-bottom: var(--wp--preset--spacing--2);
  }
}

/*-----------------------------------
-------------------------------------
Layout, Structure & Spacing
-------------------------------------
-----------------------------------*/
.container{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--custom--container-padding);
}

/* Simulate Bootstrap rows and columns */
.row { 
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--gutter);
	width: calc(100% + var(--wp--custom--gutter)); 
	margin-left: calc((var(--wp--custom--gutter) / 2) * -1); 
}
.col{ 
	width: 100%;
  	padding-inline: calc(var(--wp--custom--gutter) / 2) 
}

/* Flush edges */
.flush-top > *:first-child{
  margin-top: 0 !important;
}

.flush-bottom > *:last-child{
  margin-bottom: 0 !important;
}


/* Use the header height */
.pt-hh{
  padding-top: calc(var(--header-height) - 1px);
}

.mt-hh{
  margin-top: calc(var(--header-height) - 1px);
}

.top-hh{
  top: calc(var(--header-height) - 1px);
}

.h-vis-screen{
  height: calc(100vh - var(--header-height) - 1px);
}

.min-h-vis-screen{
  min-height: calc(100vh - var(--header-height) - 1px);
}

@media screen and (min-width: 600px){
  .md\:pt-hh{
      padding-top: calc(var(--header-height) - 1px);
  }

  .md\:mt-hh{
      margin-top: calc(var(--header-height) - 1px);
  }

  .md\:top-hh{
      top: calc(var(--header-height) - 1px);
  }

  .md\:h-vis-screen{
      height: calc(100vh - var(--header-height) - 1px);
  }

  .md\:min-h-vis-screen{
      min-height: calc(100vh - var(--header-height) - 1px);
  }
}

@media screen and (min-width: 992px){
  .lg\:pt-hh{
      padding-top: calc(var(--header-height) - 1px);
  }

  .lg\:mt-hh{
      margin-top: calc(var(--header-height) - 1px);
  }

  .lg\:top-hh{
      top: calc(var(--header-height) - 1px);
  }

  .lg\:h-vis-screen{
      height: calc(100vh - var(--header-height) - 1px);
  }

  .lg\:min-h-vis-screen{
      min-height: calc(100vh - var(--header-height) - 1px);
  }
}

@media screen and (max-width: 991px){
  .p-0-tablet{
    padding-right: 0;
	padding-left: 0;
  }

  .p-container-tablet{
    padding-inline: var(--wp--custom--container-padding) !important;
  }

  .no-gap-tablet{
    gap: 0;
  }

  .large-gap-tablet{
    gap: var(--wp--preset--spacing--6);
  }
}

@media screen and (max-width: 599px){
  
  .p-0-mobile{
    padding-left: 0 !important;
	padding-right: 0 !important;
  }

  .p-container-mobile{
    padding-inline: var(--wp--custom--container-padding) !important;
  }

  .no-gap-mobile{
	gap: 0 !important;
  }

  .large-gap-mobile{
	gap: var(--wp--preset--spacing--6) !important;
  }
}


/* Responsive Visibility */
@media screen and (max-width: 599px){
  .hide-mobile{
	display: none !important;
  }
}

@media screen and (min-width: 599px) and (max-width: 991px){
  .hide-tablet{
	display: none !important;
  }
}

@media screen and (min-width: 991px){
  .hide-desktop{
	display: none !important;
  }
}

/*-----------------------------------
-------------------------------------
Typography
-------------------------------------
-----------------------------------*/

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

mark {
  background: none;
}

/*-----------------------------------
-------------------------------------
Elements
-------------------------------------
-----------------------------------*/
/* Images */
figure img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.match-figure {
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;   
}

/*-----------------------------------
-------------------------------------
Utilities
-------------------------------------
-----------------------------------*/

/* Box Shadow */
.container {
	max-width: var(--wp--style--global--wide-size);
	padding-left: var(--wp--custom--container-padding);
	padding-right: var(--wp--custom--container-padding);
	margin: 0 auto;
}

/* Sticky */
.sticky-top{
  position: sticky;
  top: calc(var(--header-height) + var(--wp--preset--spacing--4));
}
.is-position-sticky {
  top: calc(var(--header-height) + var(--wp--preset--spacing--4));
}

.mx-auto{
  margin-inline: auto;
}

/* Overflows */
.overflow-hidden{
  overflow: hidden;
}

/* Max Widths */
.max-w-xs {
  max-width: var(--wp--custom--max-width-xs);
}
.max-w-sm {
  max-width: var(--wp--custom--max-width-sm);
}
.max-w-md {
  max-width: var(--wp--custom--max-width-md);
}
.max-w-lg {
  max-width: var(--wp--custom--max-width-lg);
}
.max-w-xl {
  max-width: var(--wp--custom--max-width-xl);
}
.max-w-2xl {
  max-width: var(--wp--custom--max-width-2-xl);
}
.max-w-3xl {
  max-width: var(--wp--custom--max-width-3-xl);
}
.max-w-4xl {
  max-width: var(--wp--custom--max-width-4-xl);
} 
.max-w-5xl {
  max-width: var(--wp--custom--max-width-5-xl);
}
.max-w-6xl {
  max-width: var(--wp--custom--max-width-6-xl);
}
.max-w-7xl {
  max-width: var(--wp--custom--max-width-7-xl);
}
/*-----------------------------------
-------------------------------------
Components
-------------------------------------
-----------------------------------*/

/* Badges */

.badges{
	display: flex;
	align-items: center;
	padding-left: 0;
	list-style-type: none;
	gap: 0.5rem;
	margin: 0;
}

.badges li, .badge{
	font-size: var(--wp--preset--font-size--x-small);
	background-color: var(--wp--preset--color--light);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--wp--preset--border-radius--full);
}

.badge > * {
	text-decoration-line: none;
}

/*-----------------------------------
-------------------------------------
Interactions & Animations
-------------------------------------
-----------------------------------*/

button,
.gravity_wrapper form :where(input[type=submit], input[type=button], [type='reset']),
#wp-submit{
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  border: none;
}

button, .gravity_wrapper form :where(input[type=submit], input[type=button], [type='reset']),
#wp-submit{
  transition: all 0.15s ease-in-out;

  &:hover {
	  filter: brightness(1.25);
  }  
}

:where(.wp-block-post-title, .wp-block-heading, h1,h2,h3,h4,h5,h6) a{
  text-decoration-line: none !important;
  color: inherit;
}

body:has(.hs-overlay.open) .site-header {
  transform: translateY(-100%);
}

/*-----------------------------------
-------------------------------------
Site Header
-------------------------------------
-----------------------------------*/

header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  /* margin-top: var(--admin-bar-height); */
  margin-top: 0;
  background-color: white;
  border: 0 solid white;
  border-bottom-width: 1px;
  transition: all 0.5s ease-in-out;

  /* Scrolled State */
  &.scrolled {
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.075);
  }

  /* Logo */
  .wp-block-jormi-inline-logo__wrapper > svg {
    height: 2rem;
    width: auto;

    @media screen and (min-width: 992px) {
      height: 2.25rem;
    }
  }

  /* Header Top Bar */
  .site-header-top {
    .wp-block-navigation__container {
      gap: var(--wp--preset--spacing--4);
    }

    .wp-block-navigation-link {
      padding: 0 !important;

      .wp-block-navigation-item__content {
        color: var(--wp--preset--color--contrast) !important;
      }
    }
  }

  .header-main .wp-block-navigation-link {
    padding-right: var(--wp--preset--spacing--2);
  }

  /* Dark Navbar Variant */
  &.navbar-dark:not(.scrolled) {
    background-color: transparent;

    .wp-block-jormi-inline-logo__wrapper > svg *.fill-me,
    .wc-block-mini-cart svg *,
    .wp-block-navigation__responsive-container-open svg * {
      fill: var(--wp--preset--color--white);
    }

    .wp-block-button:not(.is-style-link) a {
      background-color: var(--wp--preset--color--white) !important;
      border-color: var(--wp--preset--color--white) !important;
      color: var(--wp--preset--color--dark) !important;
    }

    .wp-block-button.is-style-link a {
      color: var(--wp--preset--color--white) !important;
    }

    nav .wp-block-navigation > li:hover > a,
    nav .wp-block-navigation > li:hover > .wp-block-navigation__submenu-icon {
      color: var(--wp--preset--color--secondary) !important;
    }
  }

  /* Responsive: Desktop */
  @media screen and (min-width: 1280px){

    /* Main Navigation */
    .wp-block-navigation__container {
      gap: 0;

      > * > a {
        color: black !important;

        &.is-current {
          opacity: 0.5 !important;
        }

        &:hover {
          color: var(--wp--preset--color--secondary) !important;
        }
      }
    }

    .header-main .wp-block-navigation-item {
      padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);

      &:hover {
        > a,
        > .wp-block-navigation__submenu-icon {
          color: var(--wp--preset--color--secondary) !important;
        }
      }

      .wp-block-navigation__submenu-icon {
        margin-left: var(--wp--preset--spacing--1);
        height: unset;
        width: unset;
        line-height: unset;
      }
    }

    /* Submenu Dropdown */
    .header-main .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
      top: 3.75rem;
      left: var(--wp--preset--spacing--6);
      padding-top: var(--wp--preset--spacing--2);
      padding-bottom: var(--wp--preset--spacing--2);
      background-color: white !important;
      border: 1px solid var(--wp--preset--color--gray-300) !important;
      color: var(--wp--preset--color--dark) !important;

      /* Hover bridge */
      &::before {
        content: '';
        position: absolute;
        top: -2rem;
        left: 0;
        display: block;
        width: 100%;
        height: 2rem;
        z-index: 0;
      }
    }

    .header-main .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
      padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
      text-align: left;

      .wp-block-navigation-item__content {
        padding: 0;
        font-weight: 500;
      }
    }

    /* Dark Navbar Variant */
    &.navbar-dark:not(.scrolled) {
      nav:not(.site-header-top nav) .wp-block-navigation > li > a,
      nav .wp-block-navigation__submenu-icon,
      nav .wp-block-mega-menu-item__content,
      .wp-block-site-title a {
        color: var(--wp--preset--color--white) !important;
      }
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1440px){
    .header-main .wp-block-navigation-item {
      padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
    }
  }

  /* Responsive: Tablet */
  @media screen and (max-width: 1279px) {

    .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
      background-color: var(--wp--preset--color--primary) !important;
      color: white !important;
    }

    .header-main .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
      padding: var(--wp--preset--spacing--2) 0 var(--wp--preset--spacing--4) 0;
      border: 0;
    }

    .header-main .wp-block-navigation__container > .wp-block-navigation-item,
    .header-main .wp-block-navigation__container .hs-dropdown-toggle {
      font-size: var(--wp--preset--font-size--large) !important;
      color: white !important;
    }

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{
      padding: 0;
      font-size: var(--wp--preset--font-size--base) !important;
      font-weight: normal;
      color: white !important;
    }
  }

  /* Responsive: Mobile */
  @media screen and (max-width: 599px) {
    .header-left{
      justify-content: space-between;
    }

    .wp-block-buttons {
      display: none !important;
    }

    .wp-block-navigation__responsive-container-close {
      right: var(--wp--preset--spacing--5);
    }

    .wp-block-navigation__responsive-container-content {
      padding-left: var(--wp--preset--spacing--5);
      padding-right: var(--wp--preset--spacing--5);
      gap: 0 !important;

      ul {
        padding-top: var(--wp--preset--spacing--6);

        li {
          padding-top: var(--wp--preset--spacing--1) !important;
          padding-bottom: var(--wp--preset--spacing--1) !important;

          a {
            font-weight: 500;
            font-size: var(--wp--preset--font-size--x-large);
          }
        }
      }
    }
  }
}

/* Force mobile menu at 991px instead of default 600px */
@media (min-width: 600px) and (max-width: 1279px) {
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  
  .site-header .wp-block-navigation__responsive-container-open {
    display: flex;
  }
  
  .site-header .wp-block-navigation__responsive-container.is-menu-open {
    display: flex;
    padding-inline: var(--wp--custom--container-padding);
  }
  
  /* Show hamburger button */
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

@media (max-width: 1279px) {
  /* Ensure mobile menu behavior */
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  
  .site-header .wp-block-navigation__responsive-container-open {
    display: flex;
  }
}

.site-id-2 header.site-header .wp-block-jormi-inline-logo__wrapper > svg {
  height: 2.5rem;
  width: auto;

  @media screen and (min-width: 1280px) {
    height: 3rem;
  }
}

/*-----------------------------------
-------------------------------------
Site Footer
-------------------------------------
-----------------------------------*/
.site-footer {
  .wp-block-navigation.is-vertical {
    gap: 0 !important;
  }

  .wp-block-navigation-item {
    padding: var(--wp--preset--spacing--2) 0;
    transition: all 0.2s ease-in-out;

    :hover {
      color: var(--wp--preset--color--secondary);
    }
  }
}

/*-----------------------------------
-------------------------------------
Site Pre-Footer
-------------------------------------
-----------------------------------*/
#pre-footer, .wp-block-group.pre-footer {
  > .wp-block-group:first-child {
    overflow: hidden;
    
    > .container {
      position: relative;

      @media screen and (max-width: 991px) {
        &::after {
          content: none;
        }

        .pre-footer-svg {
          display: none;
        }
      }
      
      @media screen and (min-width: 1024px) {
        > *:not(svg) {
          position: relative;
          z-index: 1;
        }
        
        /* Fallback SVG via CSS */
        &::after {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 0;
          content: url("data:image/svg+xml,%3Csvg width='567' height='514' viewBox='0 0 567 514' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M498.714 539.194H144.077L320.388 279.262L498.714 539.194ZM259.933 250.046L124.929 437.439H0L135.004 250.046L0 63.6602H124.929L259.933 250.046ZM508.79 251.054L643.794 437.439H518.865L384.869 252.061L518.865 63.6602H643.794L508.79 251.054ZM322.402 234.932L144.077 -25H498.714L322.402 234.932Z' fill='%2372CDF4'/%3E%3C/svg%3E%0A");
        }
        
        /* Hide fallback when JS animation is active */
        &.svg-animated::after {
          content: none;
        }
        
        /* Style the injected SVG */
        .pre-footer-svg {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 0;
          margin-block-start: 0;
        }
      }
    }
  }
}

/*-----------------------------------
-------------------------------------
Media Queries
-------------------------------------
-----------------------------------*/

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

	/* Utility */
	.is-style-hidden-mobile {
		display: none !important;
	}

}

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

	/* Columns */
	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}
}