/* Font Families */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w0aXpsog.woff2) format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
}

/* Global Styles */
html {
    font-family: 'InterText', sans-serif !important;
    color: grey !important;
    font-size: 14px;
}

@media (max-width: 959px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 639px) {
    html {
        font-size: 16px;
    }
}

a {
    transition: color 0.2s;
}

a:hover {
    text-decoration: none !important;
}

h2 {
    color: #56513d !important;
}

h3 {
    color: #56513d !important;
}

.word-emphasis {
    font-weight: bold;
}

/* Content Container */
.content-container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* Footnote */
.footnote {
    font-size: 0.928rem; 
    display: inline-block;
}

.footnote::first-letter {
    font-size: 0.928rem;
    vertical-align: super;
    line-height: 1;
}

/* CTA buttons */
.cta-button {
    padding: 10px 15px;
    line-height: 1;
    background-color: #637626 !important;
    color: white !important;
    border: 1px solid white;
    border-radius: 4px;
    display: inline-block;
    align-self: center;
    text-transform: none;
    font-size: 1rem;
    transition: background-color 0.1s;
}

.cta-button:hover {
    background-color: #7c9630 !important;
    color: white !important;
}

/* Filter and Toggle sections */
.products-filter,
.contact-toggle {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 30px !important;
    box-sizing: content-box;
}

.item-content:has(.products-filter),
.item-content:has(.contact-toggle) {
    z-index: 100;
    position: relative;
    background-color: #e5e3db;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

.products-filter .product-filter-buttons,
.contact-toggle .contact-toggle-buttons {
    gap: 10px;
}

.filter-instruction,
.toggle-instruction {
    margin-bottom: 10px;
    display: block;
}

.filter-button,
.toggle-button {
    padding: 15px;
    line-height: 1;
    border: 1px solid #56513d !important;
    color: #56513d;
    text-transform: none;
    border-radius: 4px;
    display: inline-block;
    align-self: center;
    font-size: 1rem;
    transition: background-color, border-color 0.3s;
}

.filter-button:hover,
.toggle-button:hover {
    border-color: white !important;
    background-color: lightgrey;
}

.filter-button.selected,
.toggle-button.selected {
    background-color: #56513d;
    color: white !important;
}

/* Header Section */
.header-section {
    padding: 20px 40px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.header-section.sticky-header {
    z-index: 1000;
}

/* Header Logo */
.header-section .uk-navbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-section .company-logo img {
    max-height: 70px;
    width: auto;
}

.header-section .company-name>span {
    font-family: 'Montserrat', 'InterText', sans-serif;
    line-height: 1.3;
    font-size: 1.28rem;
    color: #ff9919 !important;
    display: block;
}

.header-section .company-name>span::first-letter {
    color: #fb8a00;
    font-weight: 700;
    font-family: 'Montserrat', 'InterText', sans-serif;
    font-size: 1.28rem;
}

/* Header Menu */
.header-section .header-menu .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    margin-top: 40px;
}

.uk-offcanvas-bar.header-menu .nav {
    margin-top: 15px;
}

.uk-navbar-container.header-menu .nav>.nav-item+.nav-item {
    margin-left: 0;
}

.header-menu .nav {
    list-style: none;
    padding-left: 0;
}

.header-menu .nav>.nav-item {
    margin-top: 5px;
}

.header-menu .nav>.nav-item>a {
    font-family: 'InterText', sans-serif !important;
    color: grey !important;
    font-size: 1.05rem;
    font-weight: bold;
    padding: 3px 5px;
    min-height: 0;
    height: auto;
    align-items: center;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color, border-color 0.3s;
}

@media (max-width: 1000px) {
    .header-menu .nav>.nav-item>a {
        font-size: 0.9rem;
    }
}

.header-menu .nav>.nav-item.active>a {
    background-color: #ff9919;
    color: white !important;
    text-decoration: none;
}

.header-menu .nav>.nav-item:not(.active)>a:hover {
    border-color: #ffce93;
    color: grey !important;
    background-color: #ffe3c1;
}

.uk-navbar-toggle {
    padding-top: 20px;
}

/* Header Contact */
.header-contact-stack {
    flex-direction: row;
    align-items: center;
    margin-top: 5px;
}

@media (min-width: 960px) and (max-width: 1250px) {
    .header-contact-stack {
        flex-direction: column;
        align-items: flex-start;
    }
}

.header-contact {
    font-family: 'InterText', sans-serif !important;
    font-size: 1rem;
    color: #637626 !important;
    font-weight: bold;
    margin-top: 15px;
    margin-right: 15px;
}

@media (min-width: 960px) and (max-width: 1250px) {
    .header-contact {
        margin-top: 0;    
    }
}

/* Header CTA Button */
.header-section .cta-button {
    padding: 7px 10px;
    border: 1px solid lightgrey;
    margin-top: 15px;
}

@media (min-width: 960px) and (max-width: 1250px) {
    .header-section .cta-button {
        margin-top: 10px;    
    }
}

/* Offcanvas Menu */
.uk-offcanvas-container .nav>.nav-item>a {
    font-family: 'InterText', sans-serif !important;
    color: white !important;
    font-size: 1rem;
    margin: 3px 0;
    padding: 0 7px;
    border-radius: 0;
    border-left: 4px solid transparent;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    transition: background-color 0.3s;
}

.uk-offcanvas-container .nav>.nav-item.active>a {
    background-color: transparent;
    border-color: #ff9919 !important;
    text-decoration: none;
}

.uk-offcanvas-container .nav>.nav-item:not(.active)>a:hover {
    background-color: transparent;
    color: lightgrey !important;
    border-color: lightgrey !important;
}

.uk-offcanvas-container .cta-button {
    padding: 7px 10px;
    border: 1px solid lightgrey;
    margin-top: 15px;
}

/* Footer Section */
.footer-section {
    background-color: #919191;
    padding: 30px 40px;
}

.footer-section h4 {
    font-family: 'Montserrat', 'InterText', sans-serif !important;
    color: #ffc000 !important;
    font-size: 1.14rem;
    margin-bottom: 10px;
}

/* Footer Menu */
.footer-menu .nav {
    list-style: none;
    padding-left: 0;
    margin-left: -8px;
}

.footer-menu .nav>.nav-item>a {
    font-family: 'InterText', sans-serif !important;
    color: white !important;
    font-size: 1rem;
    margin: 3px 0;
    padding: 0 7px;
    border-left: 4px solid transparent;
    transition: background-color 0.3s;
}

.footer-menu .nav>.nav-item.active>a {
    border-color: #ff9919 !important;
    text-decoration: none;
}

.footer-menu .nav>.nav-item:not(.active)>a:hover {
    border-color: lightgrey !important;
    color: lightgrey !important;
}

/* Footer Contact and Trading Hours */
.footer-icon-info li {
    display: flex;
    align-items: center;
    color: white !important;
    font-size: 0.86rem !important;
}

.footer-icon-info li .uk-icon {
    font-size: 0.86rem;
}

.footer-icon-info li svg * {
    color: white !important;
}

.footer-icon-info li span div {
    display: inline;
    color: white !important;
}

.footer-icon-info a {
    color: white !important;
}

.footer-icon-info a:hover {
    color: lightgrey !important;
}

.footer-logo {
    max-height: 80px;
    width: auto;
}

/* Information Section */
.information-section {
    background-color: white;
    padding: 5px 20px;
}

.information-section * {
    font-size: 0.79rem;
}

.information-section .pm-logo {
    height: 20px;
    margin-left: 6px;
    vertical-align: middle;
}

.information-section .designer-credit a {
    color: #637626;
    font-size: 0.71rem;
}

.information-section .designer-credit a:hover {
    color: #809931;
}

.information-section .pm-logo {
    height: 15px;
    margin-left: 3px;
}