/*--------------------------------------------------------------
# CSS Reset
--------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:none}table{border-collapse:collapse;border-spacing:0}

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

/*--------------------------------------------------------------
# Lenis Smooth Scrolling CSS
--------------------------------------------------------------*/
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}


/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
    --red-color: #f00;
    --black-color: #000;
    --white-color: #fff;
    --deep-sea-color: #153b50;
    --mountain-color: #839097;
    --cool-silver-color: #b1b9bf;
    --attractive-black-color: #231f20;
    --polynesian-blue-color: #1e4a62;
    --smooth-red-color: #c9111c;
    
    --link-text-color: var(--deep-sea-color);
    --link-text-hover-color: var(--attractive-black-color);

    --b-line-height: 2;
    --b-font-size: 16px;
    --b-font-weight: 400;
    --b-font-color: #231f20;
    --b-font-family: "Montserrat", sans-serif;

    --secondary-font-family: "Libre Baskerville", serif;

    --header-bg-color: var(--white-color);
    --footer-bg-color: var(--deep-sea-color);

    --nav-link-text-color: var(--attractive-black-color);

    --wrapper-gap-block: 5rem;
    --wrapper-gap-inline: 1rem;
    --wrapper-max-width: 1626px;
    --sidebar-width: clamp(14.688rem, -4.688rem + 31.25vw, 18.75rem);
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
html {
    font-size: 16px;
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    color: var(--b-font-color);
    font: var(--b-font-weight) var(--b-font-size)/var(--b-line-height) var(--b-font-family);
    font-optical-sizing: auto;
}

p,
ul,
ol{
    margin-bottom: 1rem;
}

ul, ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

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

li {
    margin-bottom: 0.25rem;
}

ul li {
    list-style: disc;
}

ul li ul li {
    list-style: circle;
}

ol li {
    list-style: decimal;
}

ol li ol li {
    list-style: lower-alpha;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-family: var(--secondary-font-family);
}

h1 { font-size: clamp(2rem, 3.5vw, 3rem); }

h2 { font-size: clamp(1.625rem, 2.8vw, 2.25rem); }

h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }

h4 { font-size: clamp(1.375rem, 2vw, 1.625rem); }

h5 { font-size: clamp(1.3125rem, 1.6vw, 1.5rem); }

h6 { font-size: 1.125rem; }

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
#page-wrap {
    overflow-x: hidden;
}

.full-width {
    width: 100%;
    min-width: 320px;
    position: relative;
}

.site-wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: var(--wrapper-max-width);
    padding: var(--wrapper-gap-block) var(--wrapper-gap-inline);
}

/*--------------------------------------------------------------
## Header Area Layout
--------------------------------------------------------------*/
#header {
    background: var(--header-bg-color);
}

#header .site-wrapper {
    padding: 2rem var(--wrapper-gap-inline);
}

#header-columns {
    display: grid;
    grid-template-columns: 175px 1fr;
    align-items: center;
    gap: 3rem;
}

#header-logo,
#header-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/*--------------------------------------------------------------
## Footer Area Layout
--------------------------------------------------------------*/
#footer {
    display: flex;
    min-height: 101vh;
    flex-direction: column;
    position: relative;
    color: var(--white-color);
    background: var(--footer-bg-color);
}

#footer .site-wrapper {
    bottom: 0;
    position: sticky;
    max-width: 1380px;
    padding-bottom: 2rem;
    margin-block-start: auto;
}

#footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
}

#site-copyright { margin-top: 2rem; }

#site-copyright,
#site-copyright a {
    color: var(--cool-silver-color);
}

#site-copyright a:hover {color: var(--white-color); }

/*--------------------------------------------------------------
## Content Area Layout
--------------------------------------------------------------*/
#content-area {
    display: grid;
}

#content-area.has-sidebar {
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 5rem;
}

#content-area.has-sidebar.shop-content-area {
    grid-template-columns: var(--sidebar-width) 1fr;
}

#content-area.no-sidebar {
    grid-template-columns: 1fr;
}

/*--------------------------------------------------------------
## Sidebar
--------------------------------------------------------------*/
#tertiary {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#tertiary .widget-title {
    font-size: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f2f2f2;
}

/*--------------------------------------------------------------
# Navigation: Links and Buttons
--------------------------------------------------------------*/
a {
    text-decoration: none;
    color: var(--link-text-color);
}

.has-plain-text-link a { color: var(--b-font-color); }

a:hover,
.has-plain-text-link a:hover {
    color: var(--link-text-hover-color);
}

/*--------------------------------------------------------------
## Breadcrumbs
--------------------------------------------------------------*/
#breadcrumbs {
    background: #f2f2f2;
}

#breadcrumbs .site-wrapper {
    padding-block: 1rem;
}

#breadcrumbs * {
    font-size: 0.75rem;
}

#breadcrumbs a,
#breadcrumbs .separator {
    color: var(--b-font-color);
}

#breadcrumbs a:hover {
    color: var(--link-text-hover-color);
}

#breadcrumbs .last {
    color: #555;
}

.rank-math-breadcrumb p {
    margin: 0;
}

/*--------------------------------------------------------------
## Main Menu
--------------------------------------------------------------*/
#navbar {
    float: right;
}

#navbar ul,
#navbar li {
    margin: 0;
    list-style: none;
}

#navbar .main-list-wrap > li {
    margin-right: 2rem;
    display: inline-block;
}

#navbar .main-list-wrap > li:last-child {
    margin-right: 0;
}

#navbar a {
    display: block;
    font-weight: 500;
    font-size: var(--b-font-size);
    color: var(--nav-link-text-color);
}

#navbar .main-list-wrap > li:first-child {
    display: none;
}

#navbar .main-list-wrap > li > a {
    padding-block: 1rem;
}

/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
@media (max-width: 767px) {
    #footer-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    #content-area.has-sidebar,
    #content-area.has-sidebar.shop-content-area {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}