/*
Theme Name: TI Theme
Theme URI: 
Author: D Waser
Author URI: 
Description: A barebone theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ti-theme
*/

/*----------GLOBAL----------*/

* {
    font-family: var(--ti-font-family-primary);
    box-sizing: border-box;
}

/*----------HTML----------*/

html {
    scroll-padding-top: 80px;
    scroll-behavior: smooth;
}

/*----------BODY----------*/

body {
    background-color: var(--ti-ldm-background-color-grey-primarydark);
    margin: 0;
    padding: 80px 0 0;
}

@media (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}

/* Only show red focus styles during keyboard navigation */
body.ti-keyboard-navigation *:focus-visible {
    outline: 5px solid red;
    outline-offset: 2px;
}

/* Default: no outline (override browser default) */
:focus-visible {
    outline: none;
}

/* Explicit focus styles for interactive elements */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 4px solid var(--ti-color-secondary);
    outline-offset: 2px;
}

/*----------MAIN----------*/

/* Push footer to bottom */
main {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);
}

/*----------HEADINGS----------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: var(--ti-font-family-secondary);
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
}

/*----------PARAGRAPH----------*/

p {
    font-size: var(--ti-font-size-paragraph);
    margin-block-end: 25px;
    line-height: var(--ti-line-height-paragraph);
    color: var(--ti-ldm-text-color-black-white);
    margin-block-start: 0;
    overflow-wrap: break-word;
}

p:last-of-type {
    margin-block-end: 0;
}

/*----------LINKS----------*/

a.ti-break-link,
.woocommerce a {
    color: var(--ti-ldm-link-color-primary-secondary);
    text-decoration: underline !important;
    overflow-wrap: break-word;
    max-width: 100%;
    display: inline-block;
}

a.ti-hyper-link {
    color: var(--ti-ldm-link-color-primary-secondary) !important;
    text-decoration: underline !important;
}

/*----------FIGURE----------*/

figure {
    margin: 0;
}

/*----------IMG----------*/

.ti-overlay {
    position: relative;
    z-index: 1;
}

.ti-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    border-radius: inherit;
}

.ti-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.ti-bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: background-image;
}

/*----------BLOCKQUOTE----------*/

blockquote {
    margin: 25px 0 0 0;
}

/*----------FONT FACE MERRIWEATHER----------*/

@font-face {
    font-family: 'Merriweather';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/merriweather/Merriweather-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/merriweather/Merriweather-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/merriweather/Merriweather-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/merriweather/Merriweather-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/*----------FONT FACE VERDANA----------*/

@font-face {
    font-family: 'Verdana';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/verdana/Verdana.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verdana';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/verdana/Verdana-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Verdana';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/verdana/Verdana-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Verdana';
    src: url('/wp-content/themes/ti-theme/assets/webfonts/verdana/Verdana-Bold-Italic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/*----------DEFAULT COLOR VARIABLES----------*/

:root {
    --ti-color-primary: #005000;
    --ti-hover-color-primary: #004d00;
    --ti-color-primary-dark: #001a00;
    --ti-hover-color-primary-dark: #003300;

    --ti-color-secondary: #ffb900;
    --ti-hover-color-secondary: #ffc21a;

    --ti-color-black: #1a1a1a;
    --ti-hover-color-black: #2d2d2d;

    --ti-color-white: #fafafa;

    --ti-color-grey: #f5f5f5;
    --ti-hover-color-grey: #ececec;
    --ti-border-color-grey: #e2e7ed;
    --ti-icon-color-grey: #666666;

    /*----------LIGHT DARK MODE COLOR VARIABLES----------*/

    --ti-ldm-background-color-primary-primarydark: var(--ti-color-primary);
    --ti-ldm-link-color-primary-secondary: var(--ti-color-primary);
    --ti-ldm-heading-color-primary-white: var(--ti-color-primary);

    --ti-ldm-background-color-secondary-primarydark: var(--ti-color-secondary);
    --ti-ldm-color-secondary-black: var(--ti-color-secondary);

    --ti-ldm-text-color-black-white: var(--ti-color-black);
    --ti-ldm-color-black-secondary: var(--ti-color-black);

    --ti-ldm-background-color-white-primarydark: var(--ti-color-white);

    --ti-ldm-background-color-grey-primarydark: var(--ti-color-grey);
    --ti-ldm-hover-color-grey-primarydark: var(--ti-hover-color-grey);

    /*----------BORDER VARIABLES----------*/

    --ti-border: solid 3px var(--ti-color-secondary);

    /*----------FONT VARIABLES----------*/

    --ti-font-size-paragraph: clamp(15.5px, calc(15.5px + (16 - 15.5) * ((100vw - 320px) / (1500 - 320))), 16px);
    --ti-font-size-heading-small: clamp(19px, calc(19px + (21 - 19) * ((100vw - 320px) / (1500 - 320))), 21px);
    --ti-font-size-heading-medium: clamp(22px, calc(22px + (22 - 21) * ((100vw - 320px) / (1500 - 320))), 23px);
    --ti-font-size-heading-large: clamp(27px, calc(27px + (32 - 27) * ((100vw - 320px) / (1500 - 320))), 32px);
    --ti-font-size-heading-xlarge: clamp(36px, calc(36px + (40 - 36) * ((100vw - 320px) / (1500 - 320))), 40px);
    --ti-font-size-heading-xxlarge: clamp(40px, calc(40px + (65 - 40) * ((100vw - 320px) / (1500 - 320))), 65px);

    --ti-font-family-primary: 'Verdana', Verdana, ui-sans-serif, -apple-system, system-ui, BlinkMacSystemFont, Roboto,
        Ubuntu, Arial, 'Helvetica Neue', sans-serif;
    --ti-font-family-secondary: Merriweather, Georgia, serif;

    --ti-line-height-paragraph: clamp(24px, calc(24px + (26 - 24) * ((100vw - 320px) / (2000 - 320))), 26px);
}

/*----------BUTTON----------*/

.ti-button {
    color: var(--ti-color-black);
    background-color: var(--ti-color-secondary);
    font-weight: 600;
    font-size: var(--ti-font-size-paragraph);
    border-radius: 30px;
    padding: 8px 19px;
    text-decoration: none;
    transition: background-color 0s;
    cursor: pointer;
    border: none;
}

@media (min-width: 1367px) {
    .ti-button:hover {
        background-color: var(--ti-hover-color-secondary);
    }
}

.ti-button-icon {
    margin-left: 6px;
    font-size: 15px;
}

/*----------FORMS----------*/

input {
    font-size: var(--ti-font-size-paragraph) !important;
}

input[type='checkbox'] {
    accent-color: var(--ti-color-secondary);
    cursor: pointer;
}

input[type='radio'] {
    accent-color: var(--ti-ldm-link-color-primary-secondary);
}

/*----------SCROLL TO TOP----------*/

#scroll-to-top-button {
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 45px;
    height: 45px;
    bottom: 16px;
    right: 0;
    left: 2px;
    margin: 0 auto;
    padding: 0;
    font-size: 20px;
    background-color: var(--ti-color-secondary);
    color: var(--ti-color-black);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 100;
}

#scroll-to-top-button:hover {
    background-color: var(--ti-hover-color-secondary);
}

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #ddd;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}