/*!
Theme Name:   Yuki Ever Blog
Theme URI:    https://www.wpmoose.com/themes/yuki-ever-blog/
Author:       WP Moose
Author URI:   https://www.wpmoose.com
Description:  Multi-purpose and Customizable Free WordPress Blog Theme. based on the modern and highly customizable Yuki multipurpose WordPress theme. You can fully customize your site with rich customize options. It is perfect for personal bloggers and content publishers.
Template:     yuki
Version:      1.0.0
Tested up to: 6.7
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:  yuki-ever-blog
Tags: news, blog, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, block-styles, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, threaded-comments, theme-options, translation-ready, wide-blocks
*/


/* Geist — the theme loads no webfont at all, only a system stack. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ============================================================
   1. BRAND TOKENS  →  Yuki's own variables
   Yuki resolves --yuki-{light,dark}-* down to bare names via its
   own JS. Override both sets so either theme mode is on-brand.
   ============================================================ */
:root:root {
  --ms-navy-deep:   #020617;
  --ms-navy-light:  #0f172a;
  --ms-orange:      #F25802;
  --ms-orange-hot:  #ff6a12;
  --ms-silver:      #C0C0C0;
  --ms-silver-dim:  #94a3b8;
  --ms-white:       #FFFFFF;

  /* --- DARK (the site's default) --- */
  --yuki-dark-primary-color:  #F25802;
  --yuki-dark-primary-active: #ff6a12;
  --yuki-dark-accent-color:   #C0C0C0;  /* body copy */
  --yuki-dark-accent-active:  #FFFFFF;  /* headings */
  --yuki-dark-base-color:     #020617;  /* page background */
  --yuki-dark-base-100:       #0f172a;  /* cards / elevated */
  --yuki-dark-base-200:       #16223d;
  --yuki-dark-base-300:       #2a3655;  /* borders */

  /* --- LIGHT (theme-switch button) --- */
  --yuki-light-primary-color:  #F25802;
  --yuki-light-primary-active: #c74702;
  --yuki-light-accent-color:   #020617;  /* light-mode copy is navy, never grey */
  --yuki-light-accent-active:  #020617;
  --yuki-light-base-color:     #FFFFFF;
  --yuki-light-base-100:       #f6f7f9;
  --yuki-light-base-200:       #e8eaee;
  --yuki-light-base-300:       #C0C0C0;

  --wp--style--global--content-size: 1140px;
}

/* ============================================================
   2. TYPOGRAPHY
   Headings were inheriting the system stack at default weight.
   ============================================================ */
.yuki-body,
body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title,
.yuki-heading {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h4, h5, h6 { font-weight: 600; }

code, pre, kbd, .wp-block-code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Article body: readable measure + real line-height */
.yuki-article-content.prose,
.prose-yuki {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.yuki-article-content.prose p { margin-bottom: 1.5rem; }

/* Article headings get air above, tight below — the single biggest
   readability win on a long post. */
.yuki-article-content h2 { margin-top: 3rem;   margin-bottom: 1rem; font-size: 1.875rem; }
.yuki-article-content h3 { margin-top: 2.5rem; margin-bottom: 0.75rem; font-size: 1.5rem; }

.yuki-article-content a {
  color: var(--ms-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.yuki-article-content a:hover { color: var(--ms-orange-hot); }

.yuki-article-content blockquote {
  border-left: 3px solid var(--ms-orange);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: normal;
  color: var(--yuki-accent-active);
}

/* ============================================================
   3. HEADER — always Navy Deep, never theme-adaptive
   ============================================================ */
.yuki-site-header .yuki-header-row-primary_navbar {
  background-color: var(--ms-navy-deep) !important;
  background-image: none !important;   /* stock hero photo removed */
}
.yuki-site-header .yuki-overlay {
  background-color: var(--ms-navy-deep) !important;
  opacity: 1 !important;
}
.yuki-site-header .yuki-particles-canvas { opacity: 0.35; }

.yuki-header-row-primary_navbar .container { min-height: 200px; }

.site-title a {
  color: var(--ms-orange) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.site-tagline {
  color: var(--ms-silver) !important;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

/* Sticky nav row */
.yuki-header-row-bottom_row {
  background-color: var(--ms-navy-deep) !important;
  border-bottom: 1px solid rgba(192, 192, 192, 0.2);
}
.yuki-sticky .yuki-header-row-bottom_row {
  box-shadow: 0 1px 0 rgba(192, 192, 192, 0.2);
}

.yuki-menu > li > a,
.yuki-collapsable-menu > li > a {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  font-size: 0.9375rem;
}
.yuki-menu > li > a:hover,
.yuki-menu > li.current-menu-item > a,
.yuki-collapsable-menu > li > a:hover {
  color: var(--ms-orange) !important;
}

.yuki-icon-button { color: var(--ms-white) !important; }
.yuki-icon-button:hover {
  color: var(--ms-orange) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================
   4. POST CARDS
   ============================================================ */
.card-list { gap: 2rem 0; }

.card {
  background-color: var(--yuki-base-100);
  border: 1px solid var(--yuki-base-300);
  border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 88, 2, 0.5);
  box-shadow: 0 12px 32px rgba(242, 88, 2, 0.18);
}

.card .card-thumbnail img {
  border-radius: 14px 14px 0 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card .entry-title a {
  color: var(--yuki-accent-active);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card .entry-title a:hover { color: var(--ms-orange); }

/* Category chip — was a bare link */
.entry-categories .entry-tax-item {
  display: inline-block;
  background-color: rgba(242, 88, 2, 0.12);
  color: var(--ms-orange) !important;
  border: 1px solid rgba(242, 88, 2, 0.3);
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.entry-categories .entry-tax-item:hover {
  background-color: var(--ms-orange);
  color: var(--ms-white) !important;
}

.entry-excerpt { color: var(--yuki-accent-color); line-height: 1.65; }

.entry-metas,
.entry-metas .entry-meta-link {
  color: var(--ms-silver-dim) !important;
  font-size: 0.8125rem;
}
.entry-metas .entry-meta-link:hover { color: var(--ms-orange) !important; }
.entry-metas i { color: var(--ms-orange); opacity: 0.7; }

.entry-divider {
  border-top: 1px solid var(--yuki-base-300);
  margin: 1rem 0;
}

.yuki-entry-excerpt-more-link { color: var(--ms-orange) !important; font-weight: 500; }

/* ============================================================
   5. SINGLE POST
   ============================================================ */
.yuki-article-header .entry-title h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.article-featured-image img { border-radius: 14px; }

.yuki-related-posts-wrap { margin-top: 4rem; }
.yuki-related-posts-wrap .entry-title a { font-size: 1.125rem; }

/* ============================================================
   6. BUTTONS / PAGINATION / FORMS
   ============================================================ */
.yuki-btn,
.wp-block-button__link,
input[type="submit"],
.form-submit input {
  background-color: var(--yuki-base-100);
  color: var(--yuki-accent-active);
  border: 1px solid var(--yuki-base-300);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.yuki-btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.form-submit input:hover {
  background-color: var(--ms-orange);
  border-color: var(--ms-orange);
  color: var(--ms-white);
  box-shadow: 0 0 20px rgba(242, 88, 2, 0.4);
}

.yuki-pagination .yuki-btn-active {
  background-color: var(--ms-orange) !important;
  border-color: var(--ms-orange) !important;
  color: var(--ms-white) !important;
}

.yuki-form input[type="text"],
.yuki-form input[type="email"],
.yuki-form input[type="url"],
.yuki-form textarea,
#commentform input,
#commentform textarea {
  background-color: var(--yuki-base-100);
  border: 1px solid var(--yuki-base-300);
  border-radius: 8px;
  color: var(--yuki-accent-active);
}
.yuki-form input:focus,
.yuki-form textarea:focus,
#commentform input:focus,
#commentform textarea:focus {
  border-color: var(--ms-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 88, 2, 0.25);
}

/* Search + off-canvas overlays need a solid background, never inherited */
.yuki-modal,
#yuki-search-modal,
#yuki-off-canvas-modal {
  background-color: var(--ms-navy-deep) !important;
}

/* ============================================================
   7. FOOTER — always Navy Deep
   ============================================================ */
.yuki-footer-area,
.yuki-footer-row {
  background-color: var(--ms-navy-deep) !important;
  border-top: 1px solid rgba(192, 192, 192, 0.3);
}
.yuki-footer-area,
.yuki-copyright { color: var(--ms-white) !important; font-size: 0.875rem; }
.yuki-copyright a,
.yuki-footer-area a { color: var(--ms-white) !important; }
.yuki-copyright a:hover,
.yuki-footer-area a:hover { color: var(--ms-orange) !important; }

.yuki-footer-area .widget-title {
  color: var(--ms-silver) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  font-weight: 600;
}

#scroll-top {
  background-color: var(--ms-orange) !important;
  color: var(--ms-white) !important;
  border-radius: 8px;
}
#scroll-top:hover { box-shadow: 0 0 20px rgba(242, 88, 2, 0.5); }

/* ============================================================
   8. SELECTION / SCROLLBAR / FOCUS
   ============================================================ */
::selection { background-color: var(--ms-orange); color: var(--ms-white); }

*:focus-visible {
  outline: 2px solid var(--ms-orange);
  outline-offset: 2px;
}

/* ponytail: styled scrollbar is WebKit-only; Firefox falls back to default. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--yuki-base-color); }
::-webkit-scrollbar-thumb {
  background: var(--yuki-base-300);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ms-orange); }

/* ============================================================
   9. MOBILE
   ============================================================ */
@media (max-width: 767px) {
  .yuki-header-row-primary_navbar .container { min-height: 140px; }
  .site-title a { font-size: 1.5rem; }
  .card .entry-title a { font-size: 1.125rem; }
  .yuki-article-header .entry-title h1 { font-size: 1.75rem; }
  .yuki-article-content h2 { margin-top: 2rem; font-size: 1.5rem; }
}

/* ============================================================
   10. LIGHT-MODE CONTRAST FIX
   --ms-silver-dim (#94a3b8) is correct on the dark navy but is
   only 2.8:1 on the light-mode white background, under the
   4.5:1 bar for small text. Yuki exposes the active mode as
   data-yuki-theme on <html>, so scope a darker slate to light
   mode only and leave dark mode untouched.
   ============================================================ */
html[data-yuki-theme="light"] .entry-metas,
html[data-yuki-theme="light"] .entry-metas .entry-meta-link {
  color: #475569 !important;   /* 7.5:1 on white */
}
html[data-yuki-theme="light"] .entry-metas .entry-meta-link:hover {
  color: var(--ms-orange) !important;
}
html[data-yuki-theme="light"] .site-tagline {
  color: var(--ms-silver) !important;
}