/*
Theme Name: sos
Theme URI: https://example.com
Author: ____willythekid
Author URI: https://example.com
Description: Clean Bootstrap 5 theme with advanced Customizer controls + Bootstrap layout helpers (shortcodes + block patterns).
Version: 1.6.9
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sos
Tags: bootstrap, clean, responsive, blog, custom-colors, custom-logo
*/

:root{
  --sos-primary:#212529;
  --sos-secondary:#6c757d;
  --sos-bg:#ffffff;
  --sos-text:#212529;

  --sos-font:'Inter', sans-serif;
  --sos-heading-font:'Inter', sans-serif;
  --sos-font-size:16px;
  --sos-line-height:1.6;

  --sos-btn-radius:.375rem;

  --sos-logo-width-desktop:180px;
  --sos-logo-width-mobile:140px;
  --sos-logo-max-height:80px;
  --sos-logo-sticky-scale:.88;

  /* Header background (computed rgba via inline CSS) */
  --sos-header-bg: rgba(33,37,41,.98);
  --sos-header-bg-sticky: rgba(33,37,41,.98);

  /* Menu colors */
  --sos-menu-bg: var(--sos-header-bg);
  --sos-menu-link: #ffffff;
  --sos-menu-link-hover: rgba(255,255,255,.88);
  --sos-menu-link-active: #ffffff;

  --sos-dropdown-bg: rgba(33,37,41,.98);
  --sos-dropdown-link: #ffffff;
}

html{ font-size: var(--sos-font-size); }
body{
  background: var(--sos-bg);
  color: var(--sos-text);
  font-family: var(--sos-font);
  line-height: var(--sos-line-height);
}

h1,h2,h3,h4,h5,h6{ font-family: var(--sos-heading-font); }

a{ color: var(--sos-primary); }
a:hover{ opacity:.88; }

/* Header */
.site-header{
  width:100%;
  transition: background-color .25s ease, box-shadow .25s ease;
}

.site-header.is-transparent{
  position:absolute;
  top:0; left:0;
  z-index:9999;
}
.site-header.is-transparent .navbar{ background: rgba(0,0,0,0) !important; }

.site-header.is-sticky{
  position:fixed;
  top:0; left:0;
  z-index:9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.site-header.is-sticky .navbar{ background: var(--sos-header-bg-sticky) !important; }

/* Navbar menu styling */
.site-header .navbar .nav-link,
.site-header .navbar .navbar-brand{
  color: var(--sos-menu-link) !important;
}
.site-header .navbar .nav-link:hover{
  color: var(--sos-menu-link-hover) !important;
}
.site-header .navbar .nav-link.active,
.site-header .navbar .nav-item.active > .nav-link{
  color: var(--sos-menu-link-active) !important;
  opacity: .95;
}

/* Dropdown */
.site-header .dropdown-menu{
  background: var(--sos-dropdown-bg) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.site-header .dropdown-item{
  color: var(--sos-dropdown-link) !important;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus{
  background: rgba(255,255,255,.10) !important;
}

/* Logo wrapper + sizing */
.sos-logo-wrap{ display:flex; align-items:center; gap:.5rem; }

/* IMPORTANT: apply sizing to BOTH custom outputs and WP custom logo */
.sos-logo,
.custom-logo,
.custom-logo-link img{
  width: var(--sos-logo-width-desktop);
  max-height: var(--sos-logo-max-height);
  height:auto;
  transition: transform .25s ease, opacity .25s ease;
}

@media (max-width: 991px){
  .sos-logo,
  .custom-logo,
  .custom-logo-link img{
    width: var(--sos-logo-width-mobile);
  }
}

.site-header.is-sticky .sos-logo,
.site-header.is-sticky .custom-logo,
.site-header.is-sticky .custom-logo-link img{
  transform: scale(var(--sos-logo-sticky-scale));
  transform-origin: left center;
}

/* Logo switching by theme */
.sos-logo--dark{ display:none; }
:root[data-theme="dark"] .sos-logo--light{ display:none; }
:root[data-theme="dark"] .sos-logo--dark{ display:block; }

/* Buttons */
.btn, .btn:focus{ border-radius: var(--sos-btn-radius); }
.btn-dark{
  background-color: var(--sos-primary)!important;
  border-color: var(--sos-primary)!important;
}
.btn-outline-dark{
  color: var(--sos-primary);
  border-color: var(--sos-primary);
}
.btn-outline-dark:hover{
  background: var(--sos-primary);
  color:#fff;
}

/* Cards spacing */
.post-card + .post-card{ margin-top: 1.25rem; }

/* Images */
.wp-block-image img, img{ max-width:100%; height:auto; }

/* Footer */
.site-footer{ border-top: 1px solid rgba(0,0,0,.08); }

/* Dark mode variables (applied when data-theme="dark") */
:root[data-theme="dark"]{
  --sos-bg:#0f1115;
  --sos-text:#e9eef6;
  --sos-secondary:#9aa6b2;
  --sos-primary:#2f6fed;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .border{
  background-color: #161a22 !important;
  color: var(--sos-text) !important;
  border-color: rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] .text-muted{ color: rgba(233,238,246,.72) !important; }

/* Optional helper classes for block patterns */
.sos-section{ width:100%; }


/* Theme toggle pill */

.sos-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius: 999px !important;
  padding: .35rem .75rem !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.sos-theme-toggle svg{
  width: 18px;
  height: 18px;
  display:block;
}
.sos-theme-toggle .sos-theme-label{
  font-size: .875rem;
}
/* Make it readable on transparent header too */
.site-header.is-transparent .sos-theme-toggle{
  backdrop-filter: blur(6px);
}


/* Premium theme switch */

.sos-theme-switch-wrap{ display:flex; align-items:center; }
.sos-theme-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: var(--sos-menu-link);
  padding: .35rem .55rem .35rem .45rem;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.sos-theme-switch:active{ transform: scale(.98); }
.sos-theme-switch:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

.sos-theme-switch__track{
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  position: relative;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  transition: background .2s ease;
}

.sos-theme-switch__thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
  transition: left .22s ease, background .22s ease;
}

.sos-theme-switch__label{
  font-size: .85rem;
  user-select: none;
  padding-right: .15rem;
}

/* When in dark mode, shift thumb and tweak track */
:root[data-theme="dark"] .sos-theme-switch__track{
  background: rgba(0,0,0,.35);
}
:root[data-theme="dark"] .sos-theme-switch__thumb{
  left: 26px;
  background: #e9eef6;
}

/* If header is transparent, keep it readable */
.site-header.is-transparent .sos-theme-switch{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.26);
}



.post-card,
.single .card,
.page .card{
  padding: var(--sos-article-padding);
  margin-bottom: var(--sos-article-margin-bottom);
}



/* Layout controls */
:root{
  --sos-container-max: 1140px;

  --sos-card-radius: 0.75rem;
  --sos-card-shadow: none;

  --sos-archive-card-padding: 1.25rem;
  --sos-archive-card-margin: 1.5rem;

  --sos-single-card-padding: 1.75rem;
  --sos-single-card-margin: 2rem;
}

/* Only constrain the main content container (not header/footer containers) */
.site-main .sos-content-container{
  max-width: var(--sos-container-max);
}

/* Card polish */
.card, .post-card{
  border-radius: var(--sos-card-radius) !important;
  box-shadow: var(--sos-card-shadow);
}

/* Archive cards */
.post-card .card-body{
  padding: var(--sos-archive-card-padding) !important;
}
.post-card{
  margin-bottom: var(--sos-archive-card-margin);
}

/* Single + Page cards */
.single article.card .card-body,
.page article.card .card-body{
  padding: var(--sos-single-card-padding) !important;
}
.single article.card,
.page article.card{
  margin-bottom: var(--sos-single-card-margin);
}

/* Readability (Prose) */
:root{
  --sos-prose-max: 760px;
  --sos-prose-font-size: 18px;
  --sos-prose-line-height: 1.8;
  --sos-prose-paragraph-gap: 1.05em;
  --sos-prose-heading-top: 1.4em;
  --sos-prose-heading-bottom: .6em;
  --sos-prose-link-underline: .12em;
}

/* Apply to post/page content when enabled */
.sos-prose .entry-content,
.sos-prose .content{
  max-width: var(--sos-prose-max);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--sos-prose-font-size);
  line-height: var(--sos-prose-line-height);
}

.sos-prose .entry-content > *,
.sos-prose .content > *{
  max-width: var(--sos-prose-max);
}

.sos-prose .entry-content p,
.sos-prose .content p{
  margin-top: 0;
  margin-bottom: var(--sos-prose-paragraph-gap);
}



.sos-prose .entry-content ul,
.sos-prose .entry-content ol,
.sos-prose .content ul,
.sos-prose .content ol{
  margin-top: .25em;
  margin-bottom: 1.1em;
  padding-left: 1.25em;
}

.sos-prose .entry-content li + li,
.sos-prose .content li + li{
  margin-top: .35em;
}

.sos-prose .entry-content a,
.sos-prose .content a{
  text-decoration-thickness: var(--sos-prose-link-underline);
  text-underline-offset: .18em;
}

.sos-prose .entry-content blockquote,
.sos-prose .content blockquote{
  margin: 1.25em 0;
  padding: .85em 1em;
  border-left: 4px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.03);
  border-radius: .5rem;
}

:root[data-theme="dark"] .sos-prose .entry-content blockquote,
:root[data-theme="dark"] .sos-prose .content blockquote{
  border-left-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

.sos-prose .entry-content figure,
.sos-prose .content figure{
  margin: 1.25em 0;
}

.sos-prose .entry-content figcaption,
.sos-prose .content figcaption{
  margin-top: .5em;
  font-size: .9em;
  opacity: .75;
}

.sos-prose .entry-content hr,
.sos-prose .content hr{
  margin: 2em 0;
  opacity: .18;
}

/* Prose: stronger heading spacing (override block defaults) */
.sos-prose .entry-content h1,
.sos-prose .entry-content h2,
.sos-prose .entry-content h3,
.sos-prose .entry-content h4,
.sos-prose .entry-content h5,
.sos-prose .entry-content h6,
.sos-prose .content h1,
.sos-prose .content h2,
.sos-prose .content h3,
.sos-prose .content h4,
.sos-prose .content h5,
.sos-prose .content h6{
  margin-top: var(--sos-prose-heading-top) !important;
  margin-bottom: var(--sos-prose-heading-bottom) !important;
  line-height: 1.25;
}

/* Heading size controls */
:root{
  --sos-h1-size: 2.25rem;
  --sos-h2-size: 1.85rem;
  --sos-h3-size: 1.5rem;
  --sos-h4-size: 1.25rem;
}

h1{ font-size: var(--sos-h1-size); }
h2{ font-size: var(--sos-h2-size); }
h3{ font-size: var(--sos-h3-size); }
h4{ font-size: var(--sos-h4-size); }

/* Keep headings readable inside prose too */
.sos-prose .entry-content h1,
.sos-prose .content h1{ font-size: var(--sos-h1-size); }
.sos-prose .entry-content h2,
.sos-prose .content h2{ font-size: var(--sos-h2-size); }
.sos-prose .entry-content h3,
.sos-prose .content h3{ font-size: var(--sos-h3-size); }
.sos-prose .entry-content h4,
.sos-prose .content h4{ font-size: var(--sos-h4-size); }



/* Navbar background uses Menu Background setting */
.site-header .navbar{
  background: var(--sos-menu-bg) !important;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-sticky .navbar{
  background: var(--sos-menu-bg-sticky, var(--sos-menu-bg)) !important;
}

/* Global link styling */
:root{
  --sos-link-color: #0d6efd;
  --sos-link-hover-color: #0a58ca;
  --sos-link-decoration: underline;
  --sos-link-weight: 400;
}

/* Apply globally to site content, but do NOT override header/nav menu colors */
.site-main a,
.site-footer a,
.widget a{
  color: var(--sos-link-color);
  text-decoration: var(--sos-link-decoration);
  font-weight: var(--sos-link-weight);
  text-underline-offset: .18em;
  text-decoration-thickness: .12em;
  transition: color .2s ease;
}
.site-main a:hover,
.site-footer a:hover,
.widget a:hover{
  color: var(--sos-link-hover-color);
}

/* Global button styling */
:root{
  --sos-btn-bg: #0d6efd;
  --sos-btn-text: #ffffff;
  --sos-btn-hover-bg: #0a58ca;
  --sos-btn-radius: .5rem;
  --sos-btn-border: none;
}

.btn,
button,
input[type="submit"],
.wp-block-button__link{
  background: var(--sos-btn-bg);
  color: var(--sos-btn-text);
  border-radius: var(--sos-btn-radius);
  border: var(--sos-btn-border);
  padding: .6rem 1.1rem;
  transition: all .2s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{
  background: var(--sos-btn-hover-bg);
  color: var(--sos-btn-text);
}