/*
Theme Name: KSM Theme 01
Theme URI: https://example.com
Author: Shane
Author URI: https://example.com
Description: A custom WordPress theme migrated from Oxygen templates
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.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: ksm-theme
Tags: custom-theme, flexible, modern
*/

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

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

html {
  font-size: 62.5%;
}
body {
  /* 16px */
  font-size: clamp(1.6rem, 1.4667rem + 0.4267vw, 2rem);
}

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




:root {
	
	--primary: #0073aa;
	--secondary: #333333;
	--accent: #f39c12;
	--light: #ffffff;
	--dark: #222222;
	--contrast: #000000;
	--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(3rem, 1.9437rem + 3.3803vw, 4rem);
	--grid-gap: 1rem;
	--space-xs: 1rem;
	--space-s: 2rem;
	--space-m: 4rem;
	--space-l: 6rem;
	--space-xl: 8rem;
	--space-xxl: 10rem;
	
}


/* TEXT STUFF */

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

h1 {
  font-size: var(--text-xxl);
  --text-size: var(--text-xxl);
  line-height: 1.2;
}
h2 {
  font-size: var(--text-xl);
	--text-size: var(--text-xl);
   line-height: 1.2;
}
h3 {
  font-size: var(--text-l);
	--text-size: var(--text-l);
}
h4 {
  font-size: var(--text-m);
--text-size: var(--text-m);
}

.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--xs {
  font-size:var(--text-xs);
}
.text-link--white a {color: var(--light) !important;}
.text-link--dark a {color: var(--dark);}
.link--accent-ultra-light {
  color: var(--accent-ultra-light);
}
.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;}
.gap-xs {gap: var(--space-xs);}
.callout-text {font-size:var(--text-m); font-weight:700;}
.text--primary {color: var(--primary); }
.text--secondary {color: var(--secondary); }
.text--accent {color: var(--accent); }
.link--white a {color: #fff !important; }
.link--white {color: #fff !important; }
/* BUTTON */
.btn--primary {background-color: var(--primary); }
.btn--secondary {background-color: var(--secondary); }
.btn--accent {background-color: var(--accent); }
.center-content {margin-left:auto; margin-right:auto;}
.text-align {text-align:center;}
.set-width {width:1400px !important; max-width:100%;}
.set-width-1600 {width:1600px !important; max-width:100%;}
.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--s {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-template-rows: repeat(4, 1fr);
  }
  .grid-4-2 {
   grid-template-columns: repeat(2, 1fr);
     gap: 1rem
  }
}
/* STICKY STUFF*/
.sticky {
  position: sticky;
	top:0;
}
.sticky-top--l {
  top: 10%;
}

/* BORDERS */
.border-top-light { border-top: 1px solid var(--shade-ultra-light); } 
.border-bottom-light {border-bottom: 1px solid var(--shade-ultra-light); }
.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;}
a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #005177;
}

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

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

.site-container {
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.site-branding {
    margin-bottom: 20px;
}

.site-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.site-title a {
    color: #333;
}

.site-description {
    font-size: 1rem;
    color: #666;
    margin: 5px 0 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.main-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.main-navigation a {
    color: #333;
    font-weight: 500;
}

.main-navigation a:hover {
    color: #0073aa;
}

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


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

article {
    margin-bottom: 40px;
}

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

.entry-title {
    font-size: 2rem;
    margin-bottom: 10px;
}

.entry-meta {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 20px;
}

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

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-bottom: 1em;
}

.entry-content p {
    margin-bottom: 1em;
}

.entry-footer {
    font-size: 0.875rem;
    color: #666;
    border-top: 1px solid #e5e5e5;
    padding-top: 15px;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.widget-area {
    margin-top: 40px;
}

.widget {
    margin-bottom: 30px;
}

.widget-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
}

.widget ul {
    list-style: none;
}

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

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background-color: #333;
    color: #fff;
    padding: 30px 0;
    margin-top: 60px;
}

.site-footer a {
    color: #fff;
}

.site-info {
    text-align: center;
    font-size: 0.875rem;
}

/* ==========================================================================
   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: #0073aa;
    color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Mobile-first: Hide desktop nav, show mobile bar by default */
.desktop_navigation {
    display: none;
}

.mobile-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Desktop: Show desktop nav, hide mobile bar */
@media (min-width: 993px) {
    .desktop_navigation {
        display: block;
    }
    
    .mobile-bar {
        display: none;
    }
    
    .mobile-only {
        display: none;
    }
}

@media (min-width: 768px) {
    .site-content.has-sidebar {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
    }
    
    .widget-area {
        margin-top: 0;
    }
}