/***
Theme Name:  scrolli
Theme URI:   http://demos.alithemes.com/scrolli
 Description: WordPress Theme like Medium Blog Platform
 Author:    alithemes.com
 Author URI:  http://alithemes.com
 Version:   2.1
 License:   GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
==============================
TABLE CONTENT

  1. GENERAL
  2. FONTS & TYPOGRAPHY
  3. BEGIN STYLE
      Top Search
      Progress bar
      Meta
      Back to top
      Image zoom
      Transition
      Pagination
  4. HEADER
      Main menu
      Mobile menu
  5. FOOTER
  6. ELEMENTS
      Pagination
      Form
  7. ARCHIVE
  8. SINGLE POST
  9. PAGEs
  10. OTHER
***/

/* GENERAL */

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

html,
body {
  height: 100%;
}

a {
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  color: #6b7280;
  fill: #6b7280;
}

.dark-mode a:hover,
.dark-mode a:focus,
.dark-mode a:active {
  color: #9ca3af;
  fill: #9ca3af;
}

a:hover {
  text-decoration: none;
}

.container {
  position: relative;
}

/* Allow component-level text classes to control colors */
.entry-title,
.entry-title a:hover {
  fill: currentColor;
}

.entry-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  --x-height-multiplier: 0.342;
  --baseline-multiplier: 0.22;
  transform: translateY(0.96px);
  letter-spacing: -0.17px;
  max-width: 64rem; /* max-w-6xl - longer container for ~3 lines */
}

.single h1.entry-title {
  font-weight: 700;
  font-size: 2.75rem; /* Smaller - reduced from 3.5rem */
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .single h1.entry-title {
    font-size: 2rem; /* Smaller - reduced from 2.5rem */
  }
}

h2.entry-title {
  font-size: 1.8em;
  font-weight: bold;
}

h3.entry-title {
  font-size: 1.4em;
  font-weight: bold;
}

h4.entry-title {
  font-size: 1.2em;
  font-weight: bold;
}

h5.entry-title {
  font-size: 1.1em;
  font-weight: bold;
}

.entry-excerpt {
  color: rgba(0, 0, 0, 0.54);
  fill: rgba(0, 0, 0, 0.54);
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

b,
strong {
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-weight: 700;
  margin: 0;
  text-rendering: optimizeLegibility;
}

.entry-main-content h1,
.entry-main-content h2,
.entry-main-content h3,
.entry-main-content h4,
.entry-main-content h5,
.entry-main-content h6 {
  margin: 1.25rem 0 1.875rem 0;
}

h1 {
  font-size: 1.871em;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: 0px;
}

h2 {
  font-size: 1.694em;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: -0.75px;
}

h3 {
  font-size: 1.482em;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: -0.67px;
}

h4 {
  font-size: 1.229em;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0px;
}

h5 {
  font-size: 1.118em;
  font-weight: 500;
  line-height: 1.35em;
  letter-spacing: 0px;
}

h6 {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: -0.34px;
}

h2.entry-title {
  margin-top: 0;
}

::-moz-placeholder {
  opacity: 1;
}

.text-light .entry-title a {
  transition: all 0.2s linear;
  background: linear-gradient(to right, #fff 0%, #fff 98%);
  background-size: 0px 1px;
  background-repeat: no-repeat;
  background-position: left 85%;
}

.text-light .entry-title a:hover {
  text-decoration: none;
  background-size: 100% 1px;
}

img {
  max-width: 100%;
}

.divider {
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); /* gray-200 border in light mode */
  margin-top: 1.5rem;
  margin-bottom: 2.25rem;
}

.divider-2 {
  position: relative;
  margin-bottom: 2.25rem;
}

hr.section-divider {
  margin-top: 52px;
  margin-bottom: 42px;
  display: block;
  border: 0;
  text-align: center;
  overflow: visible;
}

hr.section-divider::before {
  --x-height-multiplier: 0.342;
  --baseline-multiplier: 0.22;
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 30px;
  letter-spacing: 0.6em;
  content: "...";
  display: inline-block;
  margin-left: 0.6em;
  color: rgba(0, 0, 0, 0.68);
  position: relative;
  top: -30px;
}

.bgcover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Remove lazy loading related styles */
.bgcover.loaded {
  display: none;
}

.clearfix {
  clear: both;
  height: 0;
  line-height: 0;
}

.row-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.no-gutter {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.no-gutter .entry-content {
  padding: 0 5%;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.bg-lightblue {
  fill: #e8f3ec;
  background: #e8f3ec;
  border-radius: 3px;
}

.btn-success {
  color: #231f20;
  background: linear-gradient(
    135deg,
    rgba(247, 244, 225, 0.95) 0%,
    rgba(247, 244, 225, 0.9) 50%,
    rgba(247, 244, 225, 0.95) 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-success:hover {
  background: rgba(247, 244, 225, 1);
  border-color: rgba(0, 0, 0, 0.2);
  color: #231f20;
}

.small-text {
  font-size: 0.875em;
}

.padding_20 {
  padding: 20px !important;
}

.padding_30 {
  padding: 30px !important;
}

.padding_40 {
  padding: 40px !important;
}

a.read-more:hover {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0);
}

.text-light a.read-more {
  background: none;
}

.m_b_1rem {
  margin-bottom: 1rem;
}

.m_b_2rem {
  margin-bottom: 2rem;
}

.m_b_3rem {
  margin-bottom: 3rem;
}

.m_b_4rem {
  margin-bottom: 3rem;
}

.m-l--15 {
  margin-left: -15px;
}

.btn-green {
  border-width: 1px;
  border-style: solid;
  padding: 0.3rem 0.8rem;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 300;
}

.link-green {
  font-size: 0.875rem;
  font-weight: 300;
}

.spanborder {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-bottom: 1.8rem;
  font-weight: 700;
}

.spanborder span {
  border-bottom: 1px solid rgba(0, 0, 0, 0.53);
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: -1px;
}

.capsSubtle {
  font-weight: 400;
  font-style: normal;
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.54);
  fill: rgba(0, 0, 0, 0.54);
  letter-spacing: -1px;
}

/* FONTS & TYPOGRAPHY */
body {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.84);
}

body,
.entry-meta,
.heading-font,
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.entry-excerpt,
.video-title,
.video-caption,
.archive-intro,
.author-section,
.section-featured h2,
.card-nav-link,
.card-nav-clocks .header-clock__label {
  font-family: "Cabin", sans-serif;
}

.menu-primary,
.capsSubtle,
.mobi-menu nav {
  font-family: "Cabin", sans-serif;
}

.entry-header,
.entry-wraper .excerpt,
.entry-wraper .entry-main-content {
  font-family: "Cabin", sans-serif;
}

/*BEGIN STYLE*/
#content {
  max-width: 100%;
  padding-top: 0;
}

/*Top Search*/
.search-popup {
  display: none;
  text-align: center;
  position: relative;
  margin-top: 50px;
  padding: 2rem 0;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15);
}

a.searh-toggle:hover,
a.searh-toggle:focus,
a.searh-toggle:active {
  text-decoration: none;
}

.search-form {
  border-radius: 50px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.search-form.open-search {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  backdrop-filter: blur(10px);
}

.dark-mode .search-form.open-search {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

input.search_field {
  background: transparent !important;
  height: 40px;
  border: 0;
  transition-duration: 0.2s;
  max-width: 300px;
  color: rgba(0, 0, 0, 0.54) !important;
}

.header-right .search-form input.search_field {
  width: 0;
  display: none;
  height: 30px;
}

.search-form.open-search .search_field:focus {
  background: none;
  border: 0;
  outline: none;
  box-shadow: none;
}

input.search_field:focus,
input.search_field:focus-visible,
input.search_field:active,
.search_field:focus,
.search_field:focus-visible,
.search_field:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-color: transparent !important;
}

.search_field {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.header-right .search-form {
  padding: 0;
  margin-right: 0.5rem;
}

.header-right .search-form.open-search input.search_field {
  width: 250px;
  transition-duration: 0.2s;
  display: inline-block;
}

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background-image: url(../images/close.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 13px;
}

.menu-search-form {
  max-width: 300px;
  margin: 0 auto;
  margin-bottom: 3rem;
}

.menu-search-form input {
  height: 40px;
  border-radius: 50px;
  border: 1px solid rgba(0, 0, 0, 0.34);
}

/*Progress bar*/
.top-scroll-bar {
  height: 1px;
  width: 0px;
  z-index: 9999999;
  position: fixed;
  top: 0;
}

.fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.sticky-header {
  padding: 10px 0;
  height: 50px;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.sticky-header .logo-small {
  display: block;
  float: left;
}

.sticky-header .author-avatar {
  float: right;
  margin-right: 12px;
}

.sticky-header .social-network {
  margin-top: 3px;
  float: right;
}

.header-right .social-network li {
  display: inline-block;
}

#wrapper {
  min-height: 100%;
  position: relative;
  padding-top: 0;
}

.boxed #wrapper {
  width: 80%;
  margin: 40px auto;
  background: #fff;
  box-shadow: 0 0 46px #a1c3ff;
}

/*Meta*/
.entry-meta {
  color: rgba(0, 0, 0, 0.54) !important;
  fill: rgba(0, 0, 0, 0.54) !important;
  font-size: 0.8rem;
  line-height: 1.2;
}

.entry-meta .author-avatar {
  float: left;
  margin: 0 15px 0 0;
  display: inline-block;
}

/* Default horizontal layout for all entry-meta */
.entry-meta.align-items-center {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0.25rem;
}

.entry-meta.align-items-center .author-avatar {
  float: none;
  margin: 0 0.5rem 0 0;
}

/* Single article page - vertical layout with avatar, left-aligned */
.single article .entry-header .entry-meta.align-items-center {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 0.5rem;
}

.single article .entry-header .entry-meta.align-items-center .author-avatar {
  float: none;
  margin: 0 0 0.5rem 0;
}

.entry-meta-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.entry-meta-line .middotDivider {
  padding-right: 0;
  margin: 0 0.25rem;
}

.entry-meta .author-avatar img {
  height: 40px;
  width: 40px;
}

.middotDivider {
  padding-right: 1em;
  font-size: 16px;
  position: relative;
}

.middotDivider::after {
  content: "";
  width: 2px;
  height: 2px;
  background: rgba(0, 0, 0, 0.54) !important;
  position: absolute;
  top: 50%;
  left: 45%;
}

.svgIcon {
  color: rgba(0, 0, 0, 0.54) !important;
  fill: rgba(0, 0, 0, 0.54) !important;
  font-size: 15px !important;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 10%;
  right: 20px;
  display: none;
  cursor: pointer;
  z-index: 9999;
  transform: rotate(90deg);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 12px;
  line-height: 1;
  background: transparent !important;
  border: 0;
  color: rgba(0, 0, 0, 0.54);
}

.back-to-top:hover {
  background: transparent !important;
  color: rgba(0, 0, 0, 0.54);
}

.back-to-top:focus {
  border: 0;
  outline: none;
}

.back-to-top i {
  font-size: 12px;
}

.back-to-top span {
  padding-left: 10px;
}

/* Image zoom */
.zoom {
  overflow: hidden;
  border-radius: 12px;
}

.zoom img {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
  max-width: 100%;
  border-radius: 12px;
}

/* Image zoom disabled - no hover effect */
.zoom:hover img {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/*Transition*/
.read-more,
.popup-close {
  transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease;
}

/* HEADER */
.navbar-brand {
  font-family: "Cabin", sans-serif;
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #231f20;
  padding: 0;
  margin: 0;
  line-height: 1;
}

header .logo-wrapper {
  margin-bottom: 0px;
  padding: 15px 0;
  width: 100%;
  z-index: 1;
  position: relative;
}

.searh-toggle {
  float: left;
}

.top-menu a,
.searh-toggle,
.search-form {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.875rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  letter-spacing: 0.1px;
  line-height: 30px;
}

.dark-light-toggle {
  color: rgba(0, 0, 0, 0.5);
}

.dark-light-toggle.mt-05 {
  margin-top: 3px;
}

.top-menu a.btn {
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 0 0.8rem;
  border-radius: 3px;
  margin-left: 1rem;
  color: rgba(0, 0, 0, 0.84);
}

.social-network a:hover,
.top-menu a:hover,
.searh-toggle:hover {
  color: rgba(0, 0, 0, 0.7);
}

.social-network a {
  color: rgba(0, 0, 0, 0.54);
  border-radius: 50%;
  font-size: 13px;
  margin-left: 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.34);
  width: 26px;
  height: 26px;
  display: block;
  line-height: 23px;
  text-align: center;
  padding: 0;
}

.author-avatar {
  margin-left: 1rem;
}

.author-avatar img {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  max-width: unset;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

/* CardNav Styles */
.card-nav {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  background: #f4f5fa;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

/* Show CardNav on desktop */
@media (min-width: 768px) {
  .card-nav {
    display: block !important;
  }
}

/* Dark mode navbar - fully transparent */
.dark-mode .card-nav {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-nav-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  height: 80px;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .card-nav-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .card-nav-container {
    padding: 0 2rem;
  }
}

@media (min-width: 1280px) {
  .card-nav-container {
    padding: 0 3rem;
  }
}

@media (min-width: 1536px) {
  .card-nav-container {
    padding: 0 4rem;
  }
}

/* Logo - Fixed on Left */
.card-nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
  margin-left: 0;
}

@media (min-width: 1024px) {
  .card-nav-logo {
    margin-left: 2rem;
  }
}

@media (min-width: 1280px) {
  .card-nav-logo {
    margin-left: 4rem;
  }
}

@media (min-width: 1536px) {
  .card-nav-logo {
    margin-left: 6rem;
  }
}

/* Center Group - Menu Items Only */
.card-nav-center-group {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  z-index: 1;
  margin: 0 1rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Allow dropdown (e.g. Hikaye) to show when open - stop clipping */
.card-nav-center-group.dropdown-open {
  overflow: visible;
}
.card-nav-center-group.dropdown-open .card-nav-menu {
  overflow: visible;
}

@media (min-width: 1024px) {
  .card-nav-center-group {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    max-width: calc(100% - 550px);
    padding: 0 2rem;
  }
}

@media (min-width: 1280px) {
  .card-nav-center-group {
    max-width: calc(100% - 650px);
    padding: 0 2.5rem;
  }
}

@media (min-width: 1536px) {
  .card-nav-center-group {
    max-width: calc(100% - 750px);
    padding: 0 3rem;
  }
}

.card-nav-logo .logo-image {
  height: auto;
  max-width: 120px;
  object-fit: contain;
}

.card-nav-logo .logo-text {
  font-family: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  height: 100%;
}

.card-nav-logo .logo-text:hover {
  opacity: 0.8;
}

.card-nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-shrink: 1;
  white-space: nowrap;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .card-nav-menu {
    gap: 1.25rem;
  }
}

.card-nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
  color: #231f20;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .card-nav-link {
    font-size: 1rem;
  }
}

.dark-mode .card-nav-link {
  color: #ffffff;
}

.card-nav-link:hover {
  color: #6b7280 !important; /* Pale gray hover */
}

.dark-mode .card-nav-link:hover {
  color: #9ca3af !important; /* Pale gray hover for dark mode */
}

/* Alara AI Hover Image */
.card-nav-link-container {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  z-index: 1;
}

.alara-hover-image {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999 !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  padding: 0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  max-width: 320px;
  width: 320px;
  height: 180px;
  overflow: hidden;
}

.card-nav-link-container:hover .alara-hover-image {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dark-mode .alara-hover-image {
  background: rgba(26, 26, 26, 0.9);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.card-nav-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
  margin-left: 0;
}

/* Auth Group - Contains auth buttons and utilities together */
.card-nav-auth-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
  position: relative;
  z-index: 100;
  overflow: visible;
}

@media (min-width: 1024px) {
  .card-nav-auth-group {
    gap: 1rem;
    margin-left: 1rem;
  }
}

/* Minimal auth buttons - FT.com / Washington Post style */
.card-nav-auth-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.card-nav-sign-in {
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  color: rgba(35, 31, 32, 0.7);
  padding: 0;
  line-height: 1.5;
  transition: color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}

.dark-mode .card-nav-sign-in {
  color: rgba(255, 255, 255, 0.7);
}

.card-nav-sign-in:hover {
  color: #6b7280; /* Pale gray hover */
  text-decoration: none;
  opacity: 1;
}

.dark-mode .card-nav-sign-in:hover {
  color: #9ca3af; /* Pale gray hover for dark mode */
  opacity: 1;
}

.card-nav-subscribe {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: #ffffff;
  background-color: #231f20;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  line-height: 1.5;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  display: inline-block;
  opacity: 1;
}

.dark-mode .card-nav-subscribe {
  background-color: #ffffff;
  color: #231f20;
}

.card-nav-subscribe:hover,
.card-nav-subscribe:active,
.card-nav-subscribe:focus {
  opacity: 0.85;
  text-decoration: none;
  background-color: #231f20;
  color: #ffffff;
}

.dark-mode .card-nav-subscribe:hover,
.dark-mode .card-nav-subscribe:active,
.dark-mode .card-nav-subscribe:focus {
  opacity: 0.85;
  background-color: #ffffff;
  color: #231f20;
}

.card-nav-container > .dark-light-toggle {
  margin-left: 0.5rem;
}

.card-nav-clocks {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 0;
}

.card-nav-clocks .header-clock-row {
  gap: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

@media (min-width: 1536px) {
  .card-nav-clocks .header-clock-row {
    gap: 2rem;
  }
}

.card-nav-clocks .header-clock {
  margin: 0;
  text-align: center;
}

.card-nav-clocks .header-clock__label {
  font-size: 0.65rem;
  font-weight: 500;
  color: #231f20;
  display: block;
  margin-bottom: 0.5rem;
}

.card-nav-clocks .header-clock__dial {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.card-nav-clocks .header-clock__hand--hour {
  width: 1.5px;
  height: 8px;
  background-color: #374152;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: center bottom;
  border-radius: 1px;
}

.card-nav-clocks .header-clock__hand--minute {
  width: 1px;
  height: 12px;
  background-color: #6c757d;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: center bottom;
  border-radius: 0.5px;
}

/* Dark mode clock backgrounds */
.dark-mode .card-nav-clocks .header-clock__dial {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .card-nav-clocks .header-clock__label {
  color: #ffffff;
}

/* Right Side Group - Contains all right-side elements */
.card-nav-right-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
  order: 999;
  position: relative;
  z-index: 100;
  overflow: visible;
}

@media (min-width: 1024px) {
  .card-nav-right-group {
    gap: 1.5rem;
  }
}

/* Utility Group - Settings & Preferences (Theme, Language) */
.card-nav-utilities {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: 0;
  position: relative;
  z-index: 100;
  overflow: visible;
}

@media (min-width: 1024px) {
  .card-nav-utilities {
    gap: 0.75rem;
  }
}

/* City Clocks - Left Side */
.card-nav-clocks-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 1.5rem;
  z-index: 2;
}

@media (min-width: 1024px) {
  .card-nav-clocks-left {
    margin-left: 10.5rem;
  }
}

/* User Info Group - Profile & Context (Clocks, Avatar) */
.card-nav-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .card-nav-user-info {
    gap: 1rem;
  }
}

.card-nav-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 0;
  order: -1;
}

.card-nav-search-form {
  display: flex;
  align-items: center;
  height: 40px;
  min-width: 40px;
  border-radius: 20px;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.card-nav-search-form input {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.dark-mode .card-nav-search-form {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.05);
}

.card-nav-search-form:focus-within {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.dark-mode .card-nav-search-form:focus-within {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.card-nav-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
  padding: 0;
  flex-shrink: 0;
  border-radius: 20px 0 0 20px;
}

.dark-mode .card-nav-search-toggle {
  color: rgba(255, 255, 255, 0.7);
}

.card-nav-search-toggle:hover {
  color: rgba(0, 0, 0, 0.8);
}

.dark-mode .card-nav-search-toggle:hover {
  color: rgba(255, 255, 255, 0.9);
}

.card-nav-search-input {
  flex: 1;
  height: 40px;
  border: 0 !important;
  background: transparent;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 12px;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.8);
  min-width: 0;
}

.dark-mode .card-nav-search-input {
  color: rgba(255, 255, 255, 0.9);
}

.card-nav-search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.dark-mode .card-nav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Hero Section - Remove default margins */
section {
  margin: 0;
}

/* HERO SECTION - Zero tolerance with navbar (starts exactly below navbar) */
section[style*="height: 100vh"] {
  margin: 0 !important;
  padding: 0 !important;
  top: 80px !important; /* Start exactly below 80px navbar height */
  position: relative !important;
  height: calc(
    100vh - 80px
  ) !important; /* Adjust height to account for navbar */
  border: none !important;
  outline: none !important;
}

/* MODERN SPACING SYSTEM - CSS Custom Properties */
:root {
  --navbar-height: 80px;
  --content-spacing-home: 0px;
  --content-spacing-article: 160px;
  --content-spacing-standard: 80px;
  --content-spacing-mobile: 60px;
}

/* Navbar is now relative positioned - content flows naturally below */

/* Ensure body and html have no margins */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Force hero section content to start at top */
section[style*="height: 100vh"] > div:first-child {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Add proper spacing for single/detail pages to account for fixed navbar */
.single .container {
  padding-top: 80px !important;
}

.single .entry-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Editor's Picks 1x3 Grid Layout */
.section-featured .row {
  max-width: 1400px;
  margin: 0 auto;
}

.section-featured .col-md-4 {
  padding: 0 15px;
}

.section-featured .entry-title {
  font-size: 1.2rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.6em;
}

.section-featured .entry-excerpt p {
  font-size: 0.9rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 4.2em;
}

/* Fix image stretching - use cover format */
.section-featured figure {
  overflow: hidden;
  border-radius: 8px;
  height: 227px;
}

.section-featured figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Videos Section - Full Width Design System */
.videos-section {
  width: 100vw;
  max-width: 1800px;
  margin: 0 auto;
  padding: 32px 24px;
  background: transparent;
  cursor: pointer;
}

.videos-container {
  width: 100%;
}

.videos-header {
  margin-bottom: 32px;
}

.videos-title {
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 5vw, 2rem);
  line-height: 1.2;
  color: #222;
  margin: 0 0 16px 0;
}

.dark-mode .videos-title {
  color: #ffffff !important;
}

.videos-divider {
  width: 100%;
  height: 1px;
  background: #eaeaea;
  margin: 16px 0;
}

.videos-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar hide utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Mobile specific fixes */
@media (max-width: 767px) {
  .videos-grid {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px;
  }

  .videos-grid > * {
    flex-shrink: 0 !important;
    min-width: 0 !important;
    width: 192px !important;
    margin-right: 0 !important;
  }

  .video-card-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* News/Sidebar responsive fixes */
@media (max-width: 640px) {
  /* Ensure news cards don't overflow */
  [data-active="true"] .group {
    max-height: 400px;
    overflow: hidden;
  }

  /* Adjust card positioning for mobile */
  .group > div > div {
    transform-origin: center top;
  }

  /* Prevent text overflow */
  .line-clamp-1 {
    word-break: break-word;
    hyphens: auto;
  }

  .line-clamp-2 {
    word-break: break-word;
    hyphens: auto;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* Tablet adjustments */
  [data-active="true"] .group {
    max-height: 500px;
  }
}

@media (min-width: 1025px) {
  /* Desktop adjustments */
  [data-active="true"] .group {
    max-height: 550px;
  }
}

/* Articles Swiper responsive fixes */
.articles-swiper {
  width: 100%;
  overflow: visible !important;
}

.articles-swiper .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.articles-swiper .swiper-slide {
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

.articles-swiper .swiper-slide article {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
}

@media (min-width: 480px) {
  .articles-swiper .swiper-slide article {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }
}

@media (min-width: 640px) {
  .articles-swiper .swiper-slide article {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
  }
}

@media (min-width: 1024px) {
  .articles-swiper .swiper-slide article {
    width: 350px;
    min-width: 350px;
    max-width: 350px;
  }
}

@media (min-width: 1280px) {
  .articles-swiper .swiper-slide article {
    width: 380px;
    min-width: 380px;
    max-width: 380px;
  }
}

/* Ensure images cover the entire card area */
.articles-swiper .swiper-slide figure {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.articles-swiper .swiper-slide figure a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.articles-swiper .swiper-slide figure img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure Swiper starts from left edge with no margin */
.articles-swiper {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}

.articles-swiper .swiper-wrapper {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.articles-swiper .swiper-slide:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure title is always visible */
.articles-swiper .swiper-slide article {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out,
    transform 0.3s ease-in-out !important;
  background-color: #f9fafb !important;
}

.dark .articles-swiper .swiper-slide article {
  background-color: #1f2937 !important;
}

/* Classy hover effect with subtle shadow */
.articles-swiper .swiper-slide article:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

.dark .articles-swiper .swiper-slide article:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}

.articles-swiper .swiper-slide .article-title-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  background-color: #f9fafb !important;
  flex-shrink: 0 !important;
  padding: 1rem !important;
  margin: 0 !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
}

.dark .articles-swiper .swiper-slide .article-title-container,
.dark-mode .articles-swiper .swiper-slide .article-title-container {
  background-color: #1f2937 !important; /* gray-800 - dark background for white text */
  color: #ffffff !important; /* white text */
}

.articles-swiper .swiper-slide .article-title-container h3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111827 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

@media (min-width: 768px) {
  .articles-swiper .swiper-slide .article-title-container h3 {
    font-size: 1rem !important;
  }
}

@media (min-width: 1024px) {
  .articles-swiper .swiper-slide .article-title-container h3 {
    font-size: 1.125rem !important;
  }
}

.articles-swiper .swiper-slide .article-title-container a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #111827 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  width: 100% !important;
}

.dark .articles-swiper .swiper-slide .article-title-container h3,
.dark .articles-swiper .swiper-slide .article-title-container a,
.dark-mode .articles-swiper .swiper-slide .article-title-container h3,
.dark-mode .articles-swiper .swiper-slide .article-title-container a {
  color: #ffffff !important; /* white text */
}

/* Vertical dividers between article cards - centered in the gap */
.articles-swiper .swiper-slide:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px; /* Half of spaceBetween (20px) */
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 10;
}

@media (min-width: 480px) {
  .articles-swiper .swiper-slide:not(:last-child)::after {
    right: -10px; /* Half of spaceBetween (20px) */
  }
}

@media (min-width: 640px) {
  .articles-swiper .swiper-slide:not(:last-child)::after {
    right: -12px; /* Half of spaceBetween (24px) */
  }
}

@media (min-width: 768px) {
  .articles-swiper .swiper-slide:not(:last-child)::after {
    right: -12px; /* Half of spaceBetween (24px) */
  }
}

@media (min-width: 1024px) {
  .articles-swiper .swiper-slide:not(:last-child)::after {
    right: -16px; /* Half of spaceBetween (32px) */
  }
}

@media (min-width: 1280px) {
  .articles-swiper .swiper-slide:not(:last-child)::after {
    right: -20px; /* Half of spaceBetween (40px) */
  }
}

/* Dark mode support for dividers */
.dark .articles-swiper .swiper-slide:not(:last-child)::after {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Videos Swiper - Responsive layout matching articles */
.videos-swiper {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}

.videos-swiper .swiper-wrapper {
  margin-left: 0 !important;
  padding-left: 0 !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.videos-swiper .swiper-slide {
  display: flex !important;
  width: auto !important;
  height: auto !important;
}

.videos-swiper .swiper-slide .video-card-wrapper {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  /* Removed transition to allow Framer Motion to handle animations */
  will-change: transform, opacity;
}

/* Fixed widths for video cards in swiper */
.videos-swiper .swiper-slide .video-card-wrapper {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

@media (min-width: 480px) {
  .videos-swiper .swiper-slide .video-card-wrapper {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
  }
}

@media (min-width: 640px) {
  .videos-swiper .swiper-slide .video-card-wrapper {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }
}

@media (min-width: 1024px) {
  .videos-swiper .swiper-slide .video-card-wrapper {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
  }
}

@media (min-width: 1280px) {
  .videos-swiper .swiper-slide .video-card-wrapper {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }
}

/* Removed vertical dividers between video cards */

/* Fade In/Out Animation for Video Modal */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.video-player-modal.genie-entering {
  animation: fadeIn 0.3s ease-in-out forwards;
}

.video-player-modal.genie-exiting {
  animation: fadeOut 0.3s ease-in-out forwards;
}

.video-player-modal.genie-entering > div:not(.video-container-visible) {
  animation: fadeIn 0.3s ease-in-out forwards;
}

.video-player-modal.genie-exiting > div:not(.video-container-visible) {
  animation: fadeOut 0.3s ease-in-out forwards;
}

/* Ensure video container and video are always visible */
.video-player-modal .video-container-visible {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

.video-player-modal .video-container-visible video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  animation: none !important;
}

/* Ensure video container stays visible */
.video-player-modal .video-container-visible {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important; /* Prevent animation interference */
}

.video-player-modal .video-container-visible video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  animation: none !important; /* Prevent animation interference */
}

/* CRITICAL: Prevent animations from affecting video container and video element */
.video-player-modal.genie-entering .video-container-visible,
.video-player-modal.genie-exiting .video-container-visible {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.video-player-modal.genie-entering .video-container-visible video,
.video-player-modal.genie-exiting .video-container-visible video {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.videos-grid:active {
  cursor: grabbing !important;
}

.videos-grid:hover {
  cursor: grab;
}

.videos-grid * {
  cursor: inherit;
}

.videos-grid::-webkit-scrollbar {
  display: none;
}

/* Drag Hint */
.drag-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  animation: hintFade 3s ease-out forwards;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.drag-hint::after {
  content: "👆";
  display: block;
  font-size: 1.2rem;
  margin-top: 4px;
}

@keyframes hintFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(10px);
  }
  10%,
  80% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-10px);
  }
}

/* Enhanced drag feedback */
.videos-grid.dragging {
  cursor: grabbing !important;
}

.videos-grid.dragging .video-card {
  transition: transform 0.1s ease;
}

.videos-grid.dragging .video-card:hover {
  transform: scale(1.02);
}

/* Old video-card styles removed - using new grid system instead */

.video-media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  display: none;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.video-content {
  padding: 16px;
}

/* Old .video-title styles removed - using new styles at line 3121 */

.video-title a {
  color: inherit;
  text-decoration: none;
}

.video-caption {
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  color: #888;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Videos Section Responsive */
@media (max-width: 600px) {
  .articles-section {
    padding: 24px 16px;
  }
}

/* Ensure hero section starts at viewport top */
section[style*="height: 100vh"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hero Section Dark Mode Gradient */
.dark-mode .hero-gradient-overlay {
  background: linear-gradient(
    135deg,
    rgba(26, 26, 26, 0.5) 0%,
    rgba(26, 26, 26, 0.2) 30%,
    rgba(26, 26, 26, 0.6) 70%,
    rgba(26, 26, 26, 0.8) 100%
  ) !important;
}

.dark-mode .hero-bottom-gradient {
  background: linear-gradient(
    180deg,
    rgba(55, 65, 82, 0) 0%,
    rgba(55, 65, 82, 0.3) 15%,
    rgba(55, 65, 82, 0.6) 30%,
    rgba(55, 65, 82, 0.9) 50%,
    rgba(55, 65, 82, 1) 70%,
    rgba(55, 65, 82, 1) 90%,
    rgba(55, 65, 82, 1) 100%
  ) !important;
}

/* Tablet responsiveness */
@media (max-width: 1023px) {
  .card-nav-center-group {
    margin: 0 0.5rem;
  }

  .card-nav-menu {
    gap: 0.5rem;
  }

  .card-nav-link {
    font-size: 0.8125rem;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .card-nav-container {
    padding: 0 1rem;
    flex-wrap: wrap;
    min-height: 60px;
    height: auto;
  }

  .card-nav-menu {
    order: 2;
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 1rem;
    gap: 1rem;
  }

  .card-nav-actions {
    order: 3;
    margin-left: 0;
    gap: 0.75rem;
  }

  .card-nav-right-group {
    order: 2;
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .card-nav-search {
    order: 1;
    margin-left: 0;
    flex: 1;
    min-width: 200px;
  }

  .card-nav-utilities {
    order: 2;
    gap: 0.5rem;
  }

  .card-nav-user-info {
    order: 3;
    gap: 0.5rem;
  }

  .card-nav-clocks {
    margin-left: 0;
    justify-content: center;
    display: none;
  }

  .card-nav-auth-buttons {
    order: 4;
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .card-nav-clocks .header-clock-row {
    gap: 1rem;
    justify-content: center;
  }

  .card-nav-logo {
    order: 1;
    height: 60px;
    position: relative;
    left: auto;
    transform: none;
    margin-left: 0;
  }

  .card-nav-logo .logo-image {
    max-width: 100px;
  }

  .card-nav-center-group {
    position: relative;
    left: auto;
    transform: none;
    margin: 0;
    max-width: 100%;
    padding: 0;
  }
}

header {
  position: relative;
  padding: 0;
  width: 100%;
  color: #231f20;
  text-align: center;
  z-index: 999;
}

header a.logo {
  color: inherit;
}

.header-inner {
  padding: 0 0 0.5rem;
}

.logo-stack {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-clock-row {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  background: transparent;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.header-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 0.15em;
  font-size: 0.5rem;
  color: #7d7266;
  font-family: "Cabin", sans-serif;
}

.header-clock__label {
  margin-bottom: 0.25rem;
}

.header-clock__dial {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e6dfc8;
  background: rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.header-clock__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: center bottom;
  background: #b31115;
  border-radius: 1px;
  transition: transform 0.2s ease-in-out;
}

.header-clock__hand--hour {
  width: 1.5px;
  height: 9px;
  background-color: #374152;
}

.header-clock__hand--minute {
  width: 1px;
  height: 14px;
}

/* Dark mode main header clock dial */
.dark-mode .header-clock__dial {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark mode main header clock hands - lighter purple for better visibility */
.dark-mode .header-clock__hand--hour {
  background-color: #a78bfa !important;
}

.dark-mode .header-clock__hand--minute {
  background-color: #a78bfa !important;
}

@media (max-width: 1400px) {
  .logo-stack {
    gap: 2rem;
  }

  .header-clock-row {
    gap: 1.25rem;
  }
}

/* MAIN-MENU */
#main-menu {
  width: 100%;
  text-align: justify;
}

#main-menu.stick {
  padding: 1.2rem 0;
}

.archive #main-menu.stick {
  padding-top: 20px;
  padding-bottom: 20px;
}

.scroll-to-fixed-fixed {
  background: #f7f4e1;
}

#main-menu.scroll-to-fixed-fixed .menu-top .logo-wrapper {
  margin: 0;
}

#main-menu .menu-top {
  height: 0;
  overflow: hidden;
}

#main-menu .menu-top .logo-wrapper {
  margin-bottom: 10px;
  padding-bottom: 15px;
  width: 100%;
  z-index: 1;
  position: relative;
  border-bottom: 1px solid #000000;
}

#main-menu .menu-top .logo-wrapper .logo {
  display: block;
  float: left;
  text-align: left;
}

#main-menu .menu-top .logo-wrapper .logo img {
  margin: 0;
}

#main-menu .menu-top .logo-wrapper .social-search {
  list-style: none;
  float: right;
  text-align: right;
  margin: 10px 0 0 0;
}

#main-menu .menu-top .logo-wrapper .social-search > li {
  display: inline-block;
  position: relative;
  padding-right: 15px;
  border-right: 1px solid #fff;
  margin-right: 0;
}

#main-menu .menu-top .logo-wrapper .social-search > li:last-child {
  padding-right: 0;
  border-right: 0;
  padding-left: 15px;
}

#main-menu .menu-top .logo-wrapper .social-search > li:hover > ul {
  display: block;
}

#main-menu .menu-top .logo-wrapper .social-search > li > ul {
  display: none;
  position: absolute;
  padding-top: 10px;
  list-style: none;
}

#main-menu .menu-top .logo-wrapper .social-search > li > ul > li {
  padding: 5px 10px;
  background: #fff;
}

#main-menu .menu-top .logo-wrapper .social-search > li > ul > li:first-child {
  padding-top: 12px;
}

#main-menu .menu-top .logo-wrapper .social-search > li > ul > li:last-child {
  padding-bottom: 12px;
}

#main-menu .menu-top .logo-wrapper .social-search > li > ul > li a {
  color: #000000;
  letter-spacing: 2px;
  text-decoration: none;
}

#main-menu .menu-top .logo-wrapper .social-search > li > ul > li a:hover {
  color: #341fff;
}

#main-menu .menu-top .logo-wrapper .social-search > li > a {
  letter-spacing: 2px;
  text-decoration: none;
}

#main-menu .menu-top .logo-wrapper .social-search > li > a:hover {
  text-decoration: none;
}

#main-menu .menu-top .logo-wrapper .social-search > li:first-child {
  border-right: 1px solid #000000;
}

#main-menu .menu-top .logo-wrapper .social-search > li > a {
  color: #000000;
}

#main-menu .menu-primary {
  height: 20px;
}

#main-menu .menu-primary ul {
  display: inline;
  margin: 0;
  padding: 0;
}

#main-menu .menu-primary ul > li {
  display: inline-block;
  position: relative;
  padding: 0 0 16px 0;
}

#main-menu .menu-primary ul > li > a {
  color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  text-decoration: none;
  font-size: 0.8rem;
}

#main-menu .menu-primary ul > li > a:hover {
  color: rgba(0, 0, 0, 0.7);
}

#main-menu .menu-primary > span {
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
}

#main-menu .menu-primary ul.sub-menu {
  border: medium none;
  border-top: 0 none;
  position: absolute;
  text-align: left;
  top: 100%;
  z-index: 100;
  left: 0;
  padding: 0;
  background: #fff;
  min-width: 220px;
  margin-left: -20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
  border-radius: 4px;
  padding: 15px 0;
}

#main-menu .menu-primary li:hover ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#main-menu .menu-primary li ul.sub-menu li {
  display: block;
  line-height: 1.2;
  padding: 0 !important;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#main-menu .menu-primary li:hover ul.sub-menu li {
  opacity: 1;
  transform: translateY(0);
}

#main-menu .menu-primary li ul.sub-menu li:nth-child(1) {
  transition-delay: 0.1s;
}

#main-menu .menu-primary li ul.sub-menu li:nth-child(2) {
  transition-delay: 0.15s;
}

#main-menu .menu-primary li ul.sub-menu li:nth-child(3) {
  transition-delay: 0.2s;
}

#main-menu .menu-primary li ul.sub-menu li:nth-child(4) {
  transition-delay: 0.25s;
}

#main-menu .menu-primary li ul.sub-menu li:nth-child(5) {
  transition-delay: 0.3s;
}

#main-menu .menu-primary li ul.sub-menu a {
  display: block;
  line-height: 1;
  position: relative;
  transition: all 0.3s ease;
  padding: 8px 25px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
}

#main-menu .menu-primary li ul.sub-menu a:hover {
  color: #6b7280; /* Pale gray hover */
  background: rgba(107, 114, 128, 0.05);
  padding-left: 30px;
}

/* Dark mode styles for sub-menu */
.dark-mode #main-menu .menu-primary ul.sub-menu {
  background: #1a1a1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.dark-mode #main-menu .menu-primary li ul.sub-menu a {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode #main-menu .menu-primary li ul.sub-menu a:hover {
  color: #9ca3af; /* Pale gray hover */
  background: rgba(156, 163, 175, 0.1);
}

#main-menu.scroll-to-fixed-fixed {
  -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15);
}

/* MOBILE MENU*/
.menu-toggle-icon {
  height: 30px;
  width: 30px;
  z-index: 99999;
  position: absolute;
  right: 15px;
}

.menu-toggle-icon > span {
  background-color: rgba(0, 0, 0, 0.84);
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -15px;
  transition: height 100ms;
}

.menu-toggle-icon > span:after,
.menu-toggle-icon > span:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.84);
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  transition: all 200ms;
}

.menu-toggle-icon > span:after {
  top: -7px;
}

.menu-toggle-icon > span:before {
  bottom: -7px;
}

.menu-toggle-icon.act > span {
  height: 0;
}

.menu-toggle-icon.act > span:after,
.menu-toggle-icon.act > span:before {
  top: 1px;
}

.menu-toggle-icon.act > span:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu-toggle-icon.act > span:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Main menu block */
.mobi-menu {
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100vh;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu-toggle-icon.act > span::after,
.menu-toggle-icon.act > span::before {
  background: #000;
}

.mobi-menu.act {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.mobi-menu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.mobi-menu {
  text-align: center;
}

.mobi-menu ul {
  list-style: none;
  width: 65%;
  margin: 0 auto;
}

/*show the second levele menu of the selected voice*/
.mobi-menu .open-submenu ul.sub-menu {
  max-height: 800px;
  transition: max-height 0.5s ease-in;
  margin-top: 1rem;
}

/*style for the second level menu*/
.mobi-menu ul.sub-menu {
  max-height: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
  transition: max-height 0.5s ease-out;
  position: relative;
  min-width: 100%;
}

.mobi-menu .open-submenu ul.sub-menu {
  width: 100%;
}

.mobi-menu .open-submenu ul.sub-menu li {
  padding: 0.8rem 0;
  border: 0;
}

.mobi-menu .open-submenu ul.sub-menu li a {
  font-size: 0.875rem;
}

.mobi-menu li {
  padding: 0.5rem 0;
  line-height: 1;
  position: relative;
}

.mobi-menu li:first-child {
  border: 0;
}

.mobi-menu li a {
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.875rem;
}

.mobi-menu li.menu-item-has-children .sub-menu-toggle {
  position: absolute;
  top: 8px;
  right: 20px;
}

.mobi-menu .sub-menu-toggle::after {
  content: "\E802";
  font-family: "fontello";
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
}

.mobi-menu .open-submenu .sub-menu-toggle::after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mobi-menu .mobi-menu__logo {
  margin: 5.3rem 0 3rem 0;
  font-size: 3rem !important;
  line-height: 1;
}

.mobi-menu .mobi-menu__socials {
  position: absolute;
  z-index: 1;
  left: 0;
  display: block;
  width: 100%;
  bottom: 3rem;
}

/*FOOTER*/
footer .social-network li {
  margin: 0 !important;
}

.copyright {
  font-size: 0.875rem;
}

/*ELEMENTS*/
/*Pagination*/
ul.page-numbers {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  width: 100%;
}

ul.page-numbers i {
  font-size: 0.875em;
}

ul.page-numbers li {
  display: inline-block;
  padding: 0 10px 0 0;
}

ul.page-numbers li a {
  color: rgba(0, 0, 0, 0.54) !important;
}

ul.page-numbers li span.current {
  color: #374152 !important;
  fill: #374152 !important;
  display: block;
  text-align: center;
  font-weight: bold;
}

/*Form*/

.form-control {
  height: 50px;
  line-height: 50px;
  padding: 15px;
  background: none;
  border-top: 0;
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  font-size: 0.875rem;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #dee2e6 !important;
}

textarea.form-control {
  min-height: 160px;
  resize: none;
  padding: 10px 20px;
}

.submit-btn {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 0;
  border-radius: 50px;
  font-size: 0.875rem;
  padding: 0.8em 1.8em 0.7em;
  font-size: 0.785em;
}

.submit-btn,
.btn-success,
button[type="submit"] {
  margin-top: 1rem;
}

.submit-btn:hover {
  color: #fff;
}

.form-control:focus {
  color: #5f656b;
  background: none;
  outline: 0;
  box-shadow: none;
}

#comments input.submit {
  max-width: 250px;
}

/*ARCHIVE*/

.archive-intro {
  max-width: 500px;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.54) !important;
}

/*SINGLE POST*/
.single-header {
  padding: 2rem 0 4rem 0;
}

.row-flex figure {
  width: 45%;
}

.row-flex .entry-content {
  justify-content: center;
  align-self: center;
  padding-left: 30px;
  flex: 1;
  text-align: left;
}

.sing-header .meta span {
  margin-right: 10px;
}

.meta .author img {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline;
  margin: -5px 5px 0 0;
}

.entry-wraper {
  position: relative;
}

.entry-wraper .excerpt {
  color: inherit;
  font-weight: 600;
  font-size: 1.345rem;
}

.entry-main-content {
  color: var(--text-color);
  line-height: 1.75;
  font-size: clamp(1.125rem, 1vw + 1rem, 1.25rem);
  margin: 0 auto 4rem auto;
  max-width: 72ch;
}

.entry-main-content p {
  margin-bottom: 1.5rem;
  color: inherit;
}

.entry-main-content * {
  color: inherit;
}

blockquote {
  position: relative;
  border-left: 0;
  padding: 0px 30px;
  font-weight: 400;
  margin-bottom: 1.5rem;
  font-style: italic;
}

blockquote::before {
  content: "";
  top: 0px;
  height: 100%;
  left: 0;
  width: 4px;
  position: absolute;
  background: #000;
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}

/*Social share icons*/
.entry-left-col {
  position: absolute;
  left: -80px;
  height: 200vh;
  z-index: 2;
  top: 3rem;
  bottom: 0;
}

.social-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
}

.social-sticky a,
.social-sticky button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #8080ff;
  border-radius: 50%;
  border: 1px solid #8080ff;
  width: 30px;
  height: 30px;
  margin-bottom: 0.5rem;
  font-size: 13px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-sticky a:hover,
.social-sticky button:hover {
  background: #8080ff;
  color: #f8f5e3;
  border-color: #8080ff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(128, 128, 255, 0.25);
}

.social-sticky a svg,
.social-sticky button svg {
  color: inherit !important;
  fill: currentColor !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle;
}

.social-sticky a:hover svg,
.social-sticky button:hover svg {
  color: #f8f5e3 !important;
  fill: #f8f5e3 !important;
}

.social-sticky .social-heart.liked,
.social-sticky .social-heart.liked svg,
.social-sticky .social-heart.liked i {
  color: #ef4444 !important;
  fill: #ef4444 !important;
  border-color: #ef4444 !important;
}

.dark-mode .social-sticky a,
.dark-mode .social-sticky button {
  color: #8080ff;
  border-color: #8080ff;
}

.dark-mode .social-sticky a:hover,
.dark-mode .social-sticky button:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
}

.dark-mode .social-sticky a svg,
.dark-mode .social-sticky button svg {
  color: rgba(255, 255, 255, 0.54) !important;
  fill: rgba(255, 255, 255, 0.54) !important;
}

.dark-mode .social-sticky a:hover svg,
.dark-mode .social-sticky button:hover svg {
  color: rgba(255, 255, 255, 0.8) !important;
  fill: rgba(255, 255, 255, 0.8) !important;
}

.dropcap p:first-child:first-letter {
  font-size: 4em;
  float: left;
  margin-top: 0.15em;
  margin-right: 0.15em;
  line-height: 1;
}

.dropcap blockquote p:first-child:first-letter {
  font-size: inherit;
  margin: 0;
  line-height: inherit;
  float: none;
}

/*single tags*/
.entry-bottom {
  margin: 0 0 2rem 0;
  font-size: 1.125em;
}

.tags-wrap {
  margin: 1.5rem 0;
}

.tags-wrap a {
  background: transparent;
  padding: 0;
  margin-right: 0;
}

.social-network {
  flex-direction: row;
}

/*Author box*/
.entry-main-content .box.box-author a {
  color: rgba(0, 0, 0, 0.84) !important;
}

.post-author {
  overflow: hidden;
  padding: 50px;
}

.author-img {
  margin-right: 30px;
  position: relative;
}

.author-img > img {
  max-width: 120px;
  border: 3px solid #fff;
  border-radius: 100%;
}

.author-content {
  vertical-align: middle;
}

.post-author .top-author {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.author-content h5 {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0px 0 10px;
  display: block;
  margin: 0;
}

.author-content p {
  margin: auto;
  color: #555;
}

.post-author .content-social-author {
  padding-top: 15px;
}

.author-content .author-social {
  padding-right: 15px;
  font-size: 16px;
}

/*Related posts*/
.related-posts h3 {
  text-align: center;
}

.related-posts {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

.related-posts .swiper-container,
.related-posts .swiper-container-related,
.related-posts .related-posts-container {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

.related-posts-slider {
  width: 100% !important;
}

.related-posts-slider .swiper-wrapper {
  width: 100% !important;
}

.related-posts-slider .swiper-slide img {
  object-fit: cover !important;
  object-position: center !important;
}

.related-posts-slider .swiper-slide {
  height: auto;
}

/* Perplexity-style compact layout */
.related-post-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Centered pale vertical divider */
.related-post-slide:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.06);
  z-index: 10;
}

.dark .related-post-slide:not(:last-child)::after {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Remove any duplicate vertical lines */
.related-posts-slider .swiper-slide > div {
  position: relative;
}

/*PAGEs*/

/*contact*/
input:focus,
textarea:focus,
button:focus,
select:focus {
  border: 1px solid #888890;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  outline: none;
}

input {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0px;
  height: 40px;
  font-size: 16px;
  padding: 7px 15px;
  border: 1px solid #e1e1e1;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
  color: rgba(0, 0, 0, 0.54);
}

textarea,
button,
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0px;
  font-size: 16px;
  padding: 7px 15px;
  background: white;
  border: 1px solid #ebebeb;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
  color: rgba(0, 0, 0, 0.54);
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  color: #fff;
  border-style: solid;
  padding: 0 20px;
  border-radius: 3px;
  cursor: pointer;
  width: unset;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border: none;
}

/*404*/
.page-404 .entry-wraper {
  min-height: 500px;
}

.page-404 .entry-wraper h1 {
  font-size: 8em;
}

.page-404 .search-form {
  max-width: 400px;
  margin: 0 auto;
  line-height: 40px;
  padding-left: 15px;
}

/*Gallery*/
.gallery figcaption {
  display: none;
}

.gallery-item {
  position: relative;
}

.gallery-item::after {
  content: "\e80e";
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  right: 1rem;
  font-family: "fontello";
  color: #fff;
  font-size: 1.5rem;
  opacity: 0;
}

.gallery-item:hover::after {
  opacity: 1;
  transition-duration: 0.4s;
}

/*Elements*/
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.entry-main-content dd,
.single-comment dd {
  margin: 0 0 1.65em;
}

.entry-main-content ul {
  list-style: disc;
  padding-left: 1rem;
}

.entry-main-content ul li {
  list-style: disc;
}

ul ul,
ol ol {
  margin-left: 0.5rem;
}

ol {
  float: none;
  list-style: decimal inside;
  margin-left: 1.5rem;
}

ol li {
  list-style: decimal;
  width: 100%;
}

table {
  width: 100%;
  margin-bottom: 1.5rem;
  color: #212529;
  border-collapse: collapse;
}

table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  border-color: rgba(0, 0, 0, 0.06);
}

table td,
.table th {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
  border-color: rgba(0, 0, 0, 0.06);
}

pre {
  border: 1px solid #d1d1d1;
  font-size: 1em;
  line-height: 1.8;
  margin: 0 0 1.75em;
  max-width: 100%;
  overflow: auto;
  padding: 1.75em;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*OTHER*/
button.owl-prev:hover,
button.owl-next:hover {
  background: none !important;
}

/* Dark mode styles */
:root {
  --body-bg: #fff;
  --text-color: #111827; /* gray-900 for Arc readability */
  --link-color: #0f172a;
  --border-color: #ddd;
  --card-bg: #fff;
  --header-bg: #fff;
}

.dark-mode {
  /* Arc Publishing standards: gray700 baseline (#374152), avoid pure black/white */
  --body-bg: #374152; /* gray-700 - Arc baseline (not #1a1a1a/black) */
  --text-color: #f3f4f6; /* gray-100 - Arc onBackground (not #ffffff/white) */
  --link-color: #f3f4f6; /* gray-100 - Arc onBackground */
  --border-color: #4b5563; /* gray-600 - Arc outline */
  --card-bg: #374152; /* gray-700 - Arc baseline */
  --header-bg: #374152; /* gray-700 - Arc baseline */
}

/* ARC PUBLISHING STANDARD: All text must be gray-based (not pure white) in dark mode */
/* Arc: Use gray-100 (#f3f4f6) for onBackground, not pure white (#ffffff) */
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode li,
.dark-mode td,
.dark-mode th,
.dark-mode label,
.dark-mode input:not([type="checkbox"]):not([type="radio"]),
.dark-mode textarea,
.dark-mode select {
  color: #f3f4f6; /* gray-100 - Arc onBackground (not #ffffff/white) */
}

/* Override for MobileSidebar "Ana Sayfa" text - must be black in dark mode */
.dark-mode .mobile-sidebar-anasayfa-text {
  color: #000000 !important;
}

/* Links - gray-100 by default (Arc onBackground), purple on hover */
.dark-mode a {
  color: #f3f4f6; /* gray-100 - Arc onBackground (not #ffffff/white) */
}

.dark-mode a:hover,
.dark-mode a:active,
.dark-mode a:focus {
  color: #9ca3af; /* Pale gray hover */
}

/* Override for Subscribe button - must stay black in dark mode */
.dark-mode .card-nav-subscribe,
.dark-mode a.card-nav-subscribe {
  color: #231f20 !important;
  background-color: #ffffff !important;
}

.dark-mode .card-nav-subscribe:hover,
.dark-mode .card-nav-subscribe:active,
.dark-mode .card-nav-subscribe:focus,
.dark-mode a.card-nav-subscribe:hover,
.dark-mode a.card-nav-subscribe:active,
.dark-mode a.card-nav-subscribe:focus {
  color: #231f20 !important;
  background-color: #ffffff !important;
}

.dark-mode .card-nav-link:hover {
  color: #9ca3af !important; /* Pale gray hover */
}

/* Allow muted text for secondary content - Arc onBackground-subtle */
.dark-mode .text-muted,
.dark-mode .muted,
.dark-mode .secondary-text,
.dark-mode .entry-meta,
.dark-mode .entry-excerpt {
  color: #e5e7eb !important; /* gray-200 - Arc onBackground-subtle (not rgba white) */
}

/* Allow disabled text - Arc disabled state */
.dark-mode .disabled,
.dark-mode [disabled] {
  color: #6b7280 !important; /* gray-500 - Arc disabled state (not rgba white) */
}

/* Override any hardcoded black text colors - Arc: use gray-100 (not pure white) */
.dark-mode [style*="color: rgba(0, 0, 0"],
.dark-mode [style*="color:#222"],
.dark-mode [style*="color: #222"],
.dark-mode [style*="color:#111827"],
.dark-mode [style*="color: #111827"],
.dark-mode [style*="color:#231f20"],
.dark-mode [style*="color: #231f20"] {
  color: #f3f4f6; /* gray-100 - Arc onBackground (not #ffffff/white) */
}

/* Badge exceptions - Force dark background in dark mode for readability */
.dark-mode [data-slot="badge"] {
  background-color: #1f2937 !important; /* gray-800 - dark background for white text */
  color: #ffffff !important; /* white text */
}

/* NewsCard - Force black text in dark mode (card has light background) */
.dark-mode [data-news-card="true"] {
  color: #111827 !important; /* gray-900 - black text for light background */
}

.dark-mode [data-news-card="true"] h3,
.dark-mode [data-news-card="true"] p,
.dark-mode [data-news-card="true"] a,
.dark-mode [data-news-card="true"] button {
  color: #111827 !important; /* gray-900 - black text */
}

/* Tabs container - No background */
.dark-mode [data-tabs-container="true"],
.dark-mode [data-tabs-container="true"] * {
  background: transparent !important;
}

/* TabsList - Force dark background with white text in dark mode */
.dark-mode [data-tabs-list="true"],
.dark-mode [role="tablist"] {
  background-color: #1f293700 !important; /* gray-800 - dark background */
  color: #ffffff !important; /* white text */
}

.dark-mode [role="tab"] {
  background-color: #1f2937 !important; /* gray-800 - dark background */
  color: #ffffff !important; /* white text */
}

/* ARC PUBLISHING STANDARD: No white backgrounds in dark mode - use gray700 baseline */
.dark-mode
  [class*="bg-white"]:not([class*="dark:bg-"]):not([class*="dark-mode"]):not(
    [data-slot="badge"]
  ):not([data-news-card="true"]) {
  background-color: #374152 !important; /* gray-700 - Arc baseline (not #1a1a1a/black) */
}

/* Card background - ensure dark mode support - Arc gray700 baseline */
.dark-mode .bg-card,
.dark-mode [class*="bg-card"] {
  background-color: var(--card-bg) !important;
  background-color: #374152 !important; /* gray-700 - Arc baseline (not #1a1a1a/black) */
}

.dark-mode [style*="background-color: white"],
.dark-mode [style*="background-color: #fff"],
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background-color:rgba(255, 255, 255"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background:rgba(255, 255, 255"] {
  background-color: #374152 !important; /* gray-700 - Arc baseline (not #1a1a1a/black) */
  background: #374152 !important;
}

/* Apply variables */
body {
  background-color: var(--body-bg);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header styles */
.dark-mode header,
.dark-mode #main-menu {
  background-color: var(--header-bg);
}

.dark-mode header {
  -webkit-box-shadow: 0 2px 2px -2px rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 2px -2px rgba(255, 255, 255, 0.15);
}

.dark-mode #main-menu .menu-primary ul > li > a {
  color: rgba(255, 255, 255, 0.5);
}

.dark-mode .top-menu a,
.dark-mode .searh-toggle,
.dark-mode .search-form,
.dark-mode .dark-light-toggle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  letter-spacing: 0.1px;
  line-height: 30px;
}

.dark-mode .top-menu a.btn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.84);
}

.dark-mode .social-network a {
  color: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.dark-mode .social-network a svg {
  color: rgba(255, 255, 255, 0.54) !important;
}

.dark-mode .social-network a svg path {
  fill: rgba(255, 255, 255, 1) !important;
}

.dark-mode #main-menu .menu-primary ul.sub-menu {
  background: #1a1a1a;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .logo,
.dark-mode .menu-primary a {
  color: var(--link-color);
}

/* Content styles */
.dark-mode .entry-title a,
.dark-mode .entry-meta a {
  color: var(--link-color);
}

/* Removed global .dark-mode article background color - causing image visibility issues in custom components */

/* Border colors - using Arc Publishing border tokens */
.dark-mode .divider {
  border-bottom-color: rgba(
    255,
    255,
    255,
    0.15
  ); /* gray-600 border in dark mode */
}

.dark-mode .divider-2,
.dark-mode .hr {
  background-color: var(--border-color);
}

/* Dark mode toggle button */
.dark-light-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 18px;
}

.dark-light-toggle:hover {
  color: #6b7280 !important; /* Pale gray hover */
  fill: #6b7280 !important;
}

/* Header Language Selector */

.header-language-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
  color: rgba(0, 0, 0, 0.6);
}

.dark-mode .header-language-minimal {
  color: rgba(255, 255, 255, 0.6);
}

.header-language-minimal:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.8);
}

.dark-mode .header-language-minimal:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.header-lang-text {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
}

/* Sidebar and widget styles */
.dark-mode .sidebar-widget {
  background-color: var(--card-bg);
}

.sidebar-widget {
  position: sticky;
  top: 70px;
}

.dark-mode .post-count {
  color: var(--text-color);
}

/* Footer styles - Force dark background with opacity */
.dark-mode .footer-modern,
.dark-mode footer.footer-modern {
  background: rgba(
    55,
    65,
    82,
    0.878
  ) !important; /* #374152e0 - gray-700 with opacity */
  color: #ffffff !important; /* white text */
}

.dark-mode footer {
  background-color: var(--header-bg);
  color: var(--text-color);
}

/* Social icons */
.dark-mode .social-network a {
  color: var(--link-color);
}

/* Search form */
.dark-mode .search-form input {
  background-color: var(--card-bg);
  color: white !important;
  border-color: var(--border-color);
}

/* Mobile menu */
.dark-mode .mobi-menu {
  background-color: var(--header-bg);
}

.dark-mode .menu-toggle-icon .lines,
.dark-mode .menu-toggle-icon .lines:before,
.dark-mode .menu-toggle-icon .lines:after {
  background-color: var(--link-color);
}

.dark-mode .entry-excerpt,
.dark-mode .entry-meta,
.dark-mode .capsSubtle,
.dark-mode .svgIcon {
  color: rgba(255, 255, 255, 0.54) !important;
  fill: rgba(255, 255, 255, 0.54) !important;
}

.dark-mode .latest-tpl-4 .post-count {
  color: rgba(255, 255, 255, 0.15) !important;
  fill: rgba(255, 255, 255, 0.15) !important;
}

.dark-mode .spanborder span {
  border-bottom: 1px solid rgba(255, 255, 255, 0.53);
}

.dark-mode .spanborder {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .post-has-bg {
  background: #374152; /* gray-700 - Arc baseline (matches colors.background.base) */
  margin-bottom: 2rem;
}

.dark-mode ul.page-numbers {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode ul.page-numbers li a {
  color: rgba(255, 255, 255, 0.54) !important;
}

.dark-mode ul.page-numbers li span.current {
  color: rgba(255, 255, 255, 0.84) !important;
}

.dark-mode .back-to-top {
  background: transparent;
}

.dark-mode .back-to-top i {
  color: rgba(255, 255, 255, 0.54);
}

.dark-mode .back-to-top span {
  color: rgba(255, 255, 255, 0.54);
}

/* Swiper vertical dividers between article cards */
.swiper {
  display: flex;
  width: 100%;
  height: auto;
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.swiper-slide {
  height: auto;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}

.swiper-slide > * {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.swiper-slide article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.swiper-slide article figure {
  flex-shrink: 0;
  width: 100%;
  min-height: auto;
}

.swiper-slide article figure img {
  width: 100%;
  height: auto;
  object-fit: contain !important;
}

.swiper-slide article > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Removed border-right from video cards */

.dark-mode .sticky-header {
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode .mobi-menu {
  background-color: #1a1a1a;
}

.dark-mode .menu-search-form input {
  color: rgba(255, 255, 255, 0.54) !important;
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.dark-mode .mobi-menu li a {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}

.dark-mode .archive-intro {
  color: rgba(255, 255, 255, 0.54) !important;
}

.dark-mode a {
  color: rgba(255, 255, 255, 0.84);
}

.dark-mode input {
  color: rgba(255, 255, 255, 0.54);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode textarea {
  color: rgba(255, 255, 255, 0.54);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .entry-title a:hover {
  color: rgba(255, 255, 255, 0.84) !important;
  fill: rgba(255, 255, 255, 0.84) !important;
}

.dark-mode .social-sticky a {
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.dark-mode .social-sticky a svg {
  color: rgba(255, 255, 255, 0.54) !important;
  fill: rgba(255, 255, 255, 1) !important;
}

.dark-mode blockquote::before {
  background: #fff;
}

/* Video Section - Horizontal Row */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding-bottom: 3rem;
  align-items: stretch;
  height: auto;
  min-height: 0;
  width: 100%;
  overflow-x: visible;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 1400px) {
  .videos-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1200px) {
  .videos-grid {
    grid-template-columns: repeat(4, 1fr);
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .videos-grid {
    grid-template-columns: repeat(3, 1fr);
    overflow-x: auto;
  }
}

.video-card-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 12px !important;
}

/* Video card dividers removed - using Swiper dividers instead */

.video-card {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0 !important;
}

.video-thumbnail-link {
  display: block;
  position: relative;
  margin: 0 !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  flex-shrink: 0;
  width: 100%;
}

.video-thumbnail {
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  border-radius: 8px;
  background-color: #000;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

.video-thumbnail video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

.video-overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
  pointer-events: none;
}

.overlay-location {
  font-weight: 600;
  margin-bottom: 4px;
}

.overlay-date {
  font-size: 11px;
  opacity: 0.9;
}

.overlay-quote {
  position: absolute;
  bottom: 40px;
  left: 12px;
  right: 12px;
  font-size: 11px;
  line-height: 1.3;
}

.overlay-source {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 10px;
  opacity: 0.85;
}

.overlay-author {
  margin-bottom: 4px;
  font-weight: 500;
}

.overlay-role {
  font-size: 11px;
  opacity: 0.9;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

@media (min-width: 1024px) {
  .play-button {
    width: 56px;
    height: 56px;
  }
}

.play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.play-button svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.video-title {
  font-family: "Cabin", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(0, 0, 0, 0.9);
}

@media (min-width: 768px) {
  .video-title {
    font-size: 15px;
    line-height: 1.5;
  }
}

@media (min-width: 1024px) {
  .video-title {
    font-size: 16px;
    line-height: 1.4;
  }
}

.dark-mode .video-title {
  color: rgba(255, 255, 255, 0.84) !important;
}

.video-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.video-title a:hover {
  color: #6b7280; /* Pale gray hover */
  text-decoration: none;
}

.dark-mode .video-title a:hover {
  color: #9ca3af; /* Pale gray hover */
}

.video-divider {
  display: none;
}

/* Video Player Modal */
.video-player-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 9999 !important;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
  /* Ensure it's positioned relative to viewport, not transformed body */
  contain: layout style paint;
}

.video-player-modal video {
  width: 100%;
  height: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.video-player-modal button {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.video-player-modal button:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.video-player-modal button:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .video-player-modal .absolute.right-8 {
    right: 1rem;
  }

  .video-player-modal button svg {
    width: 24px;
    height: 24px;
  }
}

.instagram-embed-container {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.instagram-embed-container > div {
  width: 100% !important;
  max-width: 400px !important;
}

.instagram-embed-container iframe {
  border: none !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  .video-card-wrapper {
    flex: 0 0 60%;
    min-width: 280px;
  }

  .video-card {
    padding: 0 !important;
  }

  .video-card-wrapper {
    padding: 0 12px !important;
  }
}

/* Override hover:text-primary globally - use pale gray instead of blue */
/* Override color-default.css rules for links with hover:text-primary class */
/* Use attribute selector to match Tailwind's hover:text-primary class */
a[class*="hover:text-primary"]:hover,
a[class*="hover:text-primary"]:focus,
a[class*="hover:text-primary"]:active {
  color: #6b7280; /* gray-500 - pale gray hover */
  fill: #6b7280;
}

.dark-mode a[class*="hover:text-primary"]:hover,
.dark-mode a[class*="hover:text-primary"]:focus,
.dark-mode a[class*="hover:text-primary"]:active {
  color: #9ca3af; /* gray-400 - pale gray hover for dark mode */
  fill: #9ca3af;
}

/* Override entry-main-content links that have hover:text-primary */
.entry-main-content a[class*="hover:text-primary"]:hover,
.entry-main-content a[class*="hover:text-primary"]:focus,
.entry-main-content a[class*="hover:text-primary"]:active {
  color: #6b7280;
  fill: #6b7280;
}

.dark-mode .entry-main-content a[class*="hover:text-primary"]:hover,
.dark-mode .entry-main-content a[class*="hover:text-primary"]:focus,
.dark-mode .entry-main-content a[class*="hover:text-primary"]:active {
  color: #9ca3af;
  fill: #9ca3af;
}