/*
Theme Name: Kay
Theme URI: https://truepc.co.uk
Author: truEPC
Description: Minimal theme for truEPC
Version: 1.0.0
License: GPL v2 or later
Text Domain: kay
*/

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional; /* Prevents render blocking - uses fallback if font not ready */
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: optional; /* Prevents render blocking - uses fallback if font not ready */
}
:root {
    --color-primary: #1a5f7a;
    --color-primary-dark: #14475e;
    --text-darkest: #2c3e50;
    --text-mid: #555;
    --link-color: #0000FF;
    --shadow-sm: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    --shadow-2: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
    --shadow-deep: 1rem 2rem 2rem 0 rgba(0, 0, 0, 0.35);
    --border-sm: 1px solid #E5E7EB;
    --border-dark: 1px solid #a0a2a5;
}

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

body {
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.6;
    color: #2c3e50;
    background: #f8f8f8;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    text-decoration: none;
    color:var(--link-color);
}
p {
    color: var(--text);
    line-height: 2;
    padding: 0.5rem 0;
}
.muted {
    color: #666666;
    font-size: 0.8rem;
    text-align: center;
}
.small {
    font-size: 0.875rem;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.prose {
    color: var(--text-mid);
    line-height:1.8;
    letter-spacing: 0.02rem;
}
.hide-sm {
    display: none;
}
.hide-lg {
    display: block;
}
.visually-hidden {
    visibility: hidden;
    height:0;
    overflow:hidden;
}
.ch60 {
    max-width:60ch;
}
.center {
    margin:0 auto;
}
.my-5 {
    margin-top:5rem;
    margin-bottom:5rem;
}
.mb-2 {
    margin-bottom: 2rem;
}
.text-sm {
    font-size:0.875rem;
}
.border-bottom {
    border-bottom: var(--border-sm)
}
.modal-link {
    color:#0000FF;
    font-size:0.875rem;
    cursor:pointer
}
@media (min-width: 768px) {
    .hide-sm {
        display: block;
    }
    .hide-lg {
        display: none;
    }
}
footer {
    padding: 3rem 0;
}