/*
Theme Name: Custom Theme 11
Theme URI: https://www.ksmedia.cz
Author: Shane
Author URI: https://www.ksmedia.cz
Description: Patio and landscaping theme built on the KSM Theme 01 framework. Consumes the full KSM plugin stack.
Version: 1.9.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custom-theme-11
Tags: custom-theme, flexible, modern
*/

/* ==========================================================================
   Self-hosted fonts (no third-party CDN calls — spec sections 11/14/17).
   Both files are variable fonts, so one latin woff2 covers every weight used.
   Display: Bricolage Grotesque (700/800) — H1/H2 + nav brand.
   Body:    Figtree (400/600).
   ========================================================================== */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('assets/fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    /* Sticky header must never cover anchor targets (spec section 7).
       IN PX ON PURPOSE: font-size 62.5% makes 1rem = 10px on this element,
       so a rem value here computes far smaller than intended. Re-derived
       for the Stage 13 single compact bar: sticky stack measured
       ~88px @1440 (bar + slim banner) / ~84px <=992 (slim bar + banner).
       Values below clear each stack with margin without over-padding
       anchor landings. */
    scroll-padding-top: 115px;
}
@media (max-width: 992px) {
    html {
        scroll-padding-top: 105px;
    }
}

body {
    /* 16px fluid base; overridable via Typography settings */
    font-size: var(--t-body-size, clamp(1.6rem, 1.4667rem + 0.4267vw, 2rem));
    line-height: var(--t-body-line-height, 1.6);
    font-family: var(--t-body-font-family, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    color: var(--dark);
    background-color: var(--page-bg, #F7F5F0);
}

/* Prevent elements from breaking out of containers */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Framework tokens (overridden inline from Site Settings via wp_head)
   ========================================================================== */

:root {
    /* "Flagstone" palette — deep pine / slate / gorse gold / limestone.
       Accent is used sparingly: CTAs, hover rules, active states only.
       All contrast-checked: gold on pine 4.99:1, limestone on pine 9.86:1,
       dark on gold 8.11:1, pine on limestone 9.86:1. */
    --primary: #1F4532;
    --secondary: #26302B;
    --accent: #E8A421;
    --light: #F7F5F0;
    --dark: #161B18;
    --contrast: #101411;
    --page-bg: #F7F5F0;
    --header-left-bg: #EFECE4;
    --text-xs: 1rem;
    --text-s: 1.4rem;
    --text-m: 2rem;
    --text-l: clamp(2rem, 1.6667rem + 1.0667vw, 3rem);
    --text-xl: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
    --text-xxl: clamp(3.4rem, 2.4rem + 3.2vw, 5.6rem);
    --grid-gap: 1rem;
    --space-xs: 1rem;
    --space-s: 2rem;
    --space-m: 4rem;
    --space-l: 6rem;
    --space-xl: 8rem;
    --space-xxl: 10rem;
}

/* ==========================================================================
   Typography (values flow from the Typography submenu as --t-* variables;
   never hardcode typography pixel values in rules — spec section 5a)
   ========================================================================== */

:where([class*="text--"], h1, h2, h3, h4, h5, h6).text--larger {
    font-size: calc(var(--text-size) * var(--text-multiplier));
}

/* Display type: H1/H2 (+ the nav brand, see main.css) carry the display
   family with letter-spacing tightening on the large sizes. */
h1 {
    font-family: var(--t-heading-font-family, 'Bricolage Grotesque', 'Figtree', sans-serif);
    font-size: var(--t-h1-size, var(--text-xxl));
    --text-size: var(--text-xxl);
    color: var(--t-h1-colour, inherit);
    font-weight: var(--t-h1-weight, 800);
    line-height: var(--t-h1-line-height, 1.08);
    letter-spacing: var(--t-h1-letter-spacing, -0.025em);
    margin-top: var(--t-h1-margin-top, 0);
    margin-bottom: var(--t-h1-margin-bottom, 0);
}
h2 {
    font-family: var(--t-heading-font-family, 'Bricolage Grotesque', 'Figtree', sans-serif);
    font-size: var(--t-h2-size, var(--text-xl));
    --text-size: var(--text-xl);
    color: var(--t-h2-colour, inherit);
    font-weight: var(--t-h2-weight, 700);
    line-height: var(--t-h2-line-height, 1.15);
    letter-spacing: var(--t-h2-letter-spacing, -0.015em);
    margin-top: var(--t-h2-margin-top, 0);
    margin-bottom: var(--t-h2-margin-bottom, 0);
}
h3 {
    font-size: var(--t-h3-size, var(--text-l));
    --text-size: var(--text-l);
    color: var(--t-h3-colour, inherit);
    font-weight: var(--t-h3-weight, 700);
    line-height: var(--t-h3-line-height, 1.3);
    letter-spacing: var(--t-h3-letter-spacing, normal);
    margin-top: var(--t-h3-margin-top, 0);
    margin-bottom: var(--t-h3-margin-bottom, 0);
}
h4 {
    font-size: var(--t-h4-size, var(--text-m));
    --text-size: var(--text-m);
    color: var(--t-h4-colour, inherit);
    font-weight: var(--t-h4-weight, 700);
    line-height: var(--t-h4-line-height, 1.3);
    letter-spacing: var(--t-h4-letter-spacing, normal);
    margin-top: var(--t-h4-margin-top, 0);
    margin-bottom: var(--t-h4-margin-bottom, 0);
}
h5 {
    font-size: var(--t-h5-size, var(--text-s));
    --text-size: var(--text-s);
    color: var(--t-h5-colour, inherit);
    font-weight: var(--t-h5-weight, 700);
    line-height: var(--t-h5-line-height, 1.4);
    letter-spacing: var(--t-h5-letter-spacing, normal);
    margin-top: var(--t-h5-margin-top, 0);
    margin-bottom: var(--t-h5-margin-bottom, 0);
}
h6 {
    font-size: var(--t-h6-size, var(--text-xs));
    --text-size: var(--text-xs);
    color: var(--t-h6-colour, inherit);
    font-weight: var(--t-h6-weight, 700);
    line-height: var(--t-h6-line-height, 1.4);
    letter-spacing: var(--t-h6-letter-spacing, normal);
    margin-top: var(--t-h6-margin-top, 0);
    margin-bottom: var(--t-h6-margin-bottom, 0);
}

.text--xs { font-size: var(--text-xs); --text-size: var(--text-xs); }
.text--s  { font-size: var(--text-s);  --text-size: var(--text-s); }
.text--m  { font-size: var(--text-m);  --text-size: var(--text-m); }
.text--l  { font-size: var(--text-l);  --text-size: var(--text-l); }
.text--xl { font-size: var(--text-xl); --text-size: var(--text-xl); }
.text--xxl { font-size: var(--text-xxl); --text-size: var(--text-xxl); font-weight: 800; }
.text--hero { font-size: 4rem; font-weight: 800; }

.text--light { color: var(--light); }
.text--dark { color: var(--dark); }
.font--thin { font-weight: 300; }
.font--thick { font-weight: 700; }
.text--primary { color: var(--primary); }
.text--secondary { color: var(--secondary); }
.text--accent { color: var(--accent); }
.text-link--white a { color: var(--light) !important; }
.text-link--dark a { color: var(--dark); }
.text-stroke-dark { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--dark); }
.text-stroke-light { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--light); }
.text-stroke-secondary { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--secondary); }
.text-link--primary a { color: var(--primary); }
.text-link--primary { color: var(--primary); }
.text-link--secondary a { color: var(--secondary); }
.text-link--secondary { color: var(--secondary) !important; }
.text-uppercase { text-transform: uppercase; }
.callout-text { font-size: var(--text-m); font-weight: 700; }
.link--white a { color: #fff !important; }
.link--white { color: #fff !important; }

/* BUTTONS */
.btn--primary { background-color: var(--primary); }
.btn--secondary { background-color: var(--secondary); }
.btn--accent { background-color: var(--accent); }

/* Theme button — styled entirely from Typography settings variables */
.default_button {
    display: inline-block;
    background-color: var(--t-btn-bg, var(--primary));
    color: var(--t-btn-colour, var(--light));
    border-style: solid;
    border-color: var(--t-btn-border-colour, var(--t-btn-bg, var(--primary)));
    border-width: var(--t-btn-border-width, 0);
    border-radius: var(--t-btn-radius, 0.4rem);
    padding: var(--t-btn-pad-top, 1.2rem) var(--t-btn-pad-right, 2.4rem) var(--t-btn-pad-bottom, 1.2rem) var(--t-btn-pad-left, 2.4rem);
    font-weight: var(--t-btn-weight, 700);
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.default_button:hover,
.default_button:focus-visible {
    filter: brightness(1.1);
    color: var(--t-btn-colour, var(--light));
}

/* Gorse-gold CTA: dark text on gold (8.11:1) — gold never carries light text. */
.default_button.btn--accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--dark);
}
.default_button.btn--accent:hover,
.default_button.btn--accent:focus-visible {
    filter: brightness(1.06);
    color: var(--dark);
}

/* Ghost button for use on the deep-pine panels (hero tel: secondary). */
.default_button.default_button--ghost {
    background-color: transparent;
    border-width: 2px;
    border-color: var(--light);
    color: var(--light);
}
.default_button.default_button--ghost:hover,
.default_button.default_button--ghost:focus-visible {
    background-color: rgba(247, 245, 240, 0.12);
    color: var(--light);
}

/* LAYOUT UTILITIES */
.center-content { margin-left: auto; margin-right: auto; }
.text-align { text-align: center; }
/* Max-width-based: a forced width (old width:1200px !important) contributes a
   1200px intrinsic minimum inside grid/flex tracks, dragging the page wider
   than the viewport. max-width can never do that. */
.set-width { width: 100%; max-width: 1200px; }
.set-width-1600 { width: 100%; max-width: 1600px; }
.set-height-600 { height: 600px; }
.set-height-500 { height: 500px; }
.set-height-400 { height: 400px; }
.width--50 { width: 50%; }
.width--80 { width: 80%; }
.width--100 { width: 100%; }
.background-primary { background-color: var(--primary); }
.background-secondary { background-color: var(--secondary); }
.background-accent { background-color: var(--accent); }
.background-contrast { background-color: var(--contrast); }
.background-white { background-color: var(--light); }
.margin-top--xs { margin-top: var(--space-xs); }
.margin-top--s { margin-top: var(--space-s); }
.margin-top--m { margin-top: var(--space-m); }
.margin-top--l { margin-top: var(--space-l); }
.margin-top--xl { margin-top: var(--space-xl); }
.margin-bottom--xs { margin-bottom: var(--space-xs); }
.margin-bottom--s { margin-bottom: var(--space-s); }
.margin-bottom--m { margin-bottom: var(--space-m); }
.margin-bottom--l { margin-bottom: var(--space-l); }
.margin-bottom--xl { margin-bottom: var(--space-xl); }
.margin-middle--auto { margin-top: auto; margin-bottom: auto; }
.margin-center--auto { margin-left: auto; margin-right: auto; }
.gap--xs { gap: var(--space-xs); }
.gap--s { gap: var(--space-s); --grid-gap: var(--space-s); }
.gap--m { gap: var(--space-m); --grid-gap: var(--space-m); }
.gap--l { gap: var(--space-l); --grid-gap: var(--space-l); }
.gap--xl { gap: var(--space-xl); --grid-gap: var(--space-xl); }
.pad--xs { padding: var(--space-xs); }
.pad--s { padding: var(--space-s); }
.pad--m { padding: var(--space-m); }
.pad--l { padding: var(--space-l); }
.pad--xl { padding: var(--space-xl); }
.pad--top-m { padding-top: var(--space-m); }
.pad--bottom-m { padding-bottom: var(--space-m); }
.display-flex { display: flex; }
.display-block { display: block; }
.display-grid { display: grid; }
.display-inline { display: inline; }
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
}
.grid-4-mobile-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.grid-4-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
}
@media (max-width: 992px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }
    .grid-4-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* STICKY UTILITIES */
.sticky {
    position: sticky;
    top: 0;
}
.sticky-top--l {
    top: 10%;
}

/* BORDERS */
.border-primary { border: 2px solid var(--primary); }
.border-secondary { border: 2px solid var(--secondary); }
.border-light { border: 2px solid var(--light); }
.border-secondary-top { border-top: 2px solid var(--secondary); }
.border-dashed-light { border: 4px dashed var(--light); }
.circle { border-radius: 200px; }

/* LINKS — styled from Typography settings variables */
a {
    color: var(--t-link-colour, var(--primary));
    text-decoration: var(--t-link-underline, none);
    text-decoration-thickness: var(--t-link-decoration-thickness, auto);
    transition: color 0.3s ease;
}
a:visited {
    color: var(--t-link-visited-colour, var(--t-link-colour, var(--primary)));
}
a:hover,
a:focus-visible {
    color: var(--t-link-hover-colour, var(--secondary));
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   default_div block spacing (Typography settings: Block Spacing group)
   ========================================================================== */

.default_div {
    padding-top: var(--t-block-pad-top, 0);
    padding-right: var(--t-block-pad-right, 0);
    padding-bottom: var(--t-block-pad-bottom, 0);
    padding-left: var(--t-block-pad-left, 0);
}
main > .default_div + .default_div {
    margin-top: var(--t-section-gap, 0);
}

/* ==========================================================================
   Layout skeleton
   ========================================================================== */

.site-container {
    max-width: 100%;
    margin: 0 auto;
}
.default_div_main_content_wrapper {
    display: block;
    width: 100%;
    min-height: 40vh;
}

/* ==========================================================================
   Content
   ========================================================================== */

.search-field {
    padding: 0.5rem;
}
.content-area {
    width: 100%;
}

article {
    margin-bottom: 40px;
}

.entry-header {
    margin-bottom: 20px;
}

.entry-meta {
    font-size: var(--text-s);
    color: #666;
    margin-bottom: 20px;
}

.entry-content {
    margin-bottom: 20px;
}

.entry-content h1 { margin-top: var(--t-h1-margin-top, 1em); margin-bottom: var(--t-h1-margin-bottom, 1em); }
/* H2 default margin-top raised (Correction 15) — the Typography submenu's
   --t-h2-margin-top still wins whenever it is set (token participation). */
.entry-content h2 { margin-bottom: var(--t-h2-margin-bottom, 1em); }
/* Width-limited accent rule under content H2s (Correction 15): border-bottom
   is always full-width, so a 45%-wide ::after bar carries the 3px rule. */
.entry-content h2::after {
    content: "";
    display: block;
    width: 45%;
    height: 3px;
    background-color: var(--accent, #E8A421);
    margin-top: 0.35em;
}
.entry-content h3 { margin-top: var(--t-h3-margin-top, 1em); margin-bottom: var(--t-h3-margin-bottom, 1em); }
.entry-content h4 { margin-top: var(--t-h4-margin-top, 1em); margin-bottom: var(--t-h4-margin-bottom, 1em); }
.entry-content h5 { margin-top: var(--t-h5-margin-top, 1em); margin-bottom: var(--t-h5-margin-bottom, 1em); }
.entry-content h6 { margin-top: var(--t-h6-margin-top, 1em); margin-bottom: var(--t-h6-margin-bottom, 1em); }

.entry-content p {
    margin-top: var(--t-p-margin-top, 0);
    margin-bottom: var(--t-p-margin-bottom, 1em);
}

/* Lists — styled from Typography settings variables */
.entry-content ul,
.entry-content ol {
    padding-left: var(--t-list-indent, 2.5rem);
    margin-bottom: 1em;
}
.entry-content li {
    margin-bottom: var(--t-list-item-margin, 0.5rem);
}
.entry-content li::marker {
    color: var(--t-list-marker-colour, var(--primary));
}

/* Content links — clear, obviously-clickable style (Correction 15).
   :not([class]) scopes this to editor-written prose links only: button/CTA
   anchors (a.default_btn etc.) always carry classes, so they are untouched.
   Specificity (0,2,1) beats the global a / a:visited / a:hover rules —
   no !important needed. Colours stay on the --t-link-* Typography tokens. */
.entry-content a:not([class]) {
    color: var(--t-link-colour, var(--primary));
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent, #E8A421);
    text-underline-offset: 0.2em;
}
.entry-content a:not([class]):visited {
    color: var(--t-link-visited-colour, var(--t-link-colour, var(--primary)));
}
.entry-content a:not([class]):hover,
.entry-content a:not([class]):focus-visible {
    color: var(--t-link-hover-colour, var(--secondary));
    text-decoration-color: currentColor;
}

.entry-footer {
    font-size: var(--text-s);
    color: #666;
    border-top: 1px solid #e5e5e5;
    padding-top: 15px;
}

/* ==========================================================================
   Widgets
   ========================================================================== */

.widget {
    margin-bottom: 30px;
}

.widget-title {
    font-size: var(--text-m);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
	text-transform:uppercase;
}

.widget ul {
    list-style: none;
}

.widget li {
    margin-bottom: 8px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 40px;
}

.page-numbers {
    padding: 8px 15px;
    background-color: #f5f5f5;
    border-radius: 3px;
}

.page-numbers.current {
    background-color: var(--primary);
    color: #fff;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.skip-link:focus {
    clip-path: none;
    display: block;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    z-index: 100000;
    background-color: var(--light);
    color: var(--dark);
    padding: 1rem 2rem;
    text-decoration: underline;
}
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Reduced motion: neutralise decorative animation */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}