/*
Theme Name: Blog Thema
Theme URI: https://example.com/blog-thema
Author: Figma to WP
Description: WordPress theme based on the Blog Thema design.
Version: 1.0.45
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blog-thema
Tags: blog, custom-menu, two-columns
*/

/* WordPress helpers */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: #fff;
  color: #000;
  border: 1px solid #e5e5e5;
  z-index: 1000;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
}

body.theme-dark {
  --color-background: #0f0f0f;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #c7c7c7;
}

body.theme-dark {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

body.theme-dark .border-gray-200,
body.theme-dark .border-gray-300 {
  border-color: #2b2b2b !important;
}

body.theme-dark .text-gray-500,
body.theme-dark .text-gray-600,
body.theme-dark .text-gray-700,
body.theme-dark .text-gray-400 {
  color: #bdbdbd !important;
}

body.theme-dark .bg-white {
  background-color: #121212 !important;
}

body.theme-dark .bg-black {
  background-color: #f5f5f5 !important;
  color: #0f0f0f !important;
}

body.theme-dark .hover\\:bg-black:hover {
  background-color: #f5f5f5 !important;
  color: #0f0f0f !important;
}

body.theme-dark .hover\\:bg-red-500:hover {
  background-color: #ff6b6b !important;
}

body.theme-dark .text-black {
  color: #f5f5f5 !important;
}

body.theme-dark .reading-progress {
  background: #2b2b2b;
}

body.theme-dark .reading-progress-bar {
  background: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  body:not(.theme-light) {
    --color-background: #0f0f0f;
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #c7c7c7;
    background-color: var(--color-background);
    color: var(--color-text-primary);
  }

  body:not(.theme-light) .border-gray-200,
  body:not(.theme-light) .border-gray-300 {
    border-color: #2b2b2b !important;
  }

  body:not(.theme-light) .text-gray-500,
  body:not(.theme-light) .text-gray-600,
  body:not(.theme-light) .text-gray-700,
  body:not(.theme-light) .text-gray-400 {
    color: #bdbdbd !important;
  }

  body:not(.theme-light) .bg-white {
    background-color: #121212 !important;
  }

  body:not(.theme-light) .bg-black {
    background-color: #f5f5f5 !important;
    color: #0f0f0f !important;
  }

  body:not(.theme-light) .hover\\:bg-black:hover {
    background-color: #f5f5f5 !important;
    color: #0f0f0f !important;
  }

  body:not(.theme-light) .hover\\:bg-red-500:hover {
    background-color: #ff6b6b !important;
  }

  body:not(.theme-light) .text-black {
    color: #f5f5f5 !important;
  }

  body:not(.theme-light) .reading-progress {
    background: #2b2b2b;
  }

  body:not(.theme-light) .reading-progress-bar {
    background: #f5f5f5;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  border-radius: 4px;
}

.screen-reader-text:focus {
  display: inline-block;
}

.search-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  z-index: 50;
  padding: 0.5rem 0;
}

.search-suggestions.hidden {
  display: none;
}

.search-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: transparent;
  font-size: 0.95rem;
}

.search-suggestion-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 1rem 0.45rem;
}

.search-suggestion-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
}

.search-suggestion-clear {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  border: 1px solid #d9d9d9;
  padding: 0.2rem 0.5rem;
}

.search-suggestion-clear:hover,
.search-suggestion-clear:focus {
  border-color: #000;
  color: #000;
}

.search-suggestion mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

.search-suggestion:hover,
.search-suggestion:focus {
  background: #f5f5f5;
}

.search-suggestion.is-active {
  background: #f5f5f5;
}

.theme-dark .search-suggestions,
body.theme-dark .search-suggestions {
  background: #121212;
  border-color: #2b2b2b;
}

.theme-dark .search-suggestion:hover,
.theme-dark .search-suggestion:focus,
body.theme-dark .search-suggestion:hover,
body.theme-dark .search-suggestion:focus {
  background: #1c1c1c;
}

.theme-dark .search-suggestion.is-active,
body.theme-dark .search-suggestion.is-active {
  background: #1c1c1c;
}

.theme-dark .search-suggestion-label,
body.theme-dark .search-suggestion-label,
.theme-dark .search-suggestion-clear,
body.theme-dark .search-suggestion-clear {
  color: #bdbdbd;
}

.theme-dark .search-suggestion-clear,
body.theme-dark .search-suggestion-clear {
  border-color: #3a3a3a;
}

.theme-dark .search-suggestion-clear:hover,
.theme-dark .search-suggestion-clear:focus,
body.theme-dark .search-suggestion-clear:hover,
body.theme-dark .search-suggestion-clear:focus {
  border-color: #f5f5f5;
  color: #f5f5f5;
}

.wp-block-image img {
  height: auto;
}

.alignwide {
  width: 100%;
}

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.site-header-offset,
main#main-content {
  padding-top: 80px;
}

main#main-content {
  scroll-margin-top: 96px;
}

.primary-nav a {
  position: relative;
}

.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease;
}

.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after,
.primary-nav a.is-active::after,
.primary-nav a[aria-current="page"]::after {
  width: 100%;
}

.primary-nav a.is-active,
.primary-nav a[aria-current="page"] {
  color: #000;
}

.prose {
  max-width: 70ch;
}

.prose p {
  margin-bottom: 1.5rem;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

.mobile-nav a {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #9ca3af;
}

.mobile-nav a:hover,
.mobile-nav .current-menu-item > a,
.mobile-nav .current_page_item > a,
.mobile-nav a.is-active,
.mobile-nav a[aria-current="page"] {
  color: #000;
}

mark {
  background: #ffefc7;
  color: #000;
  padding: 0 0.1em;
}

.cta-primary {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000;
}

.cta-primary svg,
.cta-primary .cta-label {
  color: #fff !important;
}

.cta-label {
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

a:hover .cta-label {
  opacity: 1;
}

a.cta-primary .cta-label {
  opacity: 0.95;
}

a.cta-primary:hover {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444;
}

a.cta-primary:hover .cta-label {
  opacity: 1;
}

.reading-progress {
  position: fixed;
  top: 96px;
  right: 14px;
  bottom: 20px;
  width: 3px;
  background: #e8e8e8;
  z-index: 49;
  pointer-events: none;
}

.reading-progress-bar {
  width: 100%;
  height: 0%;
  background: #000;
  transition: height 0.1s linear;
}

.single-post-content {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.toc {
  border: 1px solid #e8e8e8;
  padding: 1.5rem;
}

.toc h3 {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li {
  margin-bottom: 0.5rem;
}

.toc li.toc-sub-item {
  margin-left: 1rem;
}

.toc a {
  display: block;
  color: #666;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.65rem;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.toc a:hover {
  color: #000;
  border-left-color: #bbb;
}

.sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #e8e8e8;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.sort-pill:hover {
  border-color: #000;
  color: #000;
}

.sort-pill.is-active {
  border-color: #000;
  color: #000;
}

.toc a.is-active {
  color: #000;
  border-left-color: #000;
  background: #f8f8f8;
  font-weight: 600;
}

.theme-dark .toc a.is-active,
body.theme-dark .toc a.is-active {
  color: #f5f5f5;
  border-left-color: #f5f5f5;
  background: #1a1a1a;
}

.post-media-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.single-post-article {
  display: flow-root;
}

.single-post-article > .max-w-3xl {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Prevent Jetpack helper overlay from affecting frontend media layout */
body .jetpack-boost-guide,
body .jetpack-boost-guide * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}