/*
Theme Name: Essentials
Theme URI: https://example.com/themes/essentials
Author: Your Team
Author URI: https://example.com
Description: A lightweight classic WordPress theme with a main content + sticky sidebar layout, accessible header/footer, dark mode, AJAX search, and Customizer-controlled theme color.
Version: 1.0.0
Text Domain: essentials
Domain Path: /languages
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, custom-colors, accessibility-ready, translation-ready
*/

/* FILE PURPOSE: Core stylesheet entry with CSS variables, typography, layout primitives, and base theme styles. */

/* CSS Variables */
:root {
  --ess-theme-color: #2a7ae2;
  --ess-bg: #ffffff;
  --ess-text: #111111;
  --ess-muted: #666666;
  --ess-border: #e5e7eb;
  --ess-header-height: 60px;
  --ess-footer-height: 60px;
}

/* Dark mode */
html[data-theme="dark"] {
  --ess-bg: #0b0f14;
  --ess-text: #e6e6e6;
  --ess-muted: #a3a3a3;
  --ess-border: #1f2937;
}

/* Base resets */
html, body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--ess-text);
  background: var(--ess-bg);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

/* Offset for fixed header */
body { padding-top: calc(var(--ess-header-height) + env(safe-area-inset-top)); }
body.admin-bar { padding-top: calc(var(--ess-header-height) + 32px + env(safe-area-inset-top)); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif', Georgia, Cambria, "Times New Roman", Times, serif;
  color: var(--ess-text);
  margin: 1.25rem 0 0.75rem;
}

a {
  color: var(--ess-theme-color);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
}

/* Header */
.ess-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--ess-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--ess-bg);
  border-bottom: 1px solid var(--ess-border);
  /* Ensure header appears below mobile status bar */
  padding-top: env(safe-area-inset-top);
}

/* Ensure correct placement under admin bar */
body.admin-bar .ess-header { top: 32px; }

/* Reading progress bar */
.ess-reading-progress {
  position: fixed;
  top: calc(var(--ess-header-height) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  height: 5px;
  background: #E6E6E6;
  z-index: 50;
}

body.admin-bar .ess-reading-progress {
  top: calc(var(--ess-header-height) + 32px + env(safe-area-inset-top));
}

.ess-progress-bar {
  height: 100%;
  background: var(--ess-theme-color);
  width: 0%;
  transition: width 0.1s ease;
}

.ess-header .ess-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ess-header .ess-brand img {
  height: 36px;
  width: auto;
  display: block;
}

/* Normalize WordPress custom logo output */
.ess-header .custom-logo,
.ess-header .custom-logo-link img {
  max-height: 36px;
  height: 36px;
  width: auto;
}

.ess-header .ess-brand a {
  display: flex;
  align-items: center;
  height: var(--ess-header-height);
}

/* Light/Dark logo swap (scoped with strong specificity) */
.ess-header .ess-brand .ess-logo-light { display: block !important; }
.ess-header .ess-brand .ess-logo-dark { display: none !important; }
html[data-theme="dark"] .ess-header .ess-brand .ess-logo-light { display: none !important; }
html[data-theme="dark"] .ess-header .ess-brand .ess-logo-dark { display: block !important; }

.ess-breadcrumbs { color: var(--ess-text); opacity: 0.6; font-size: 0.95rem; }
.ess-breadcrumbs a { color: var(--ess-text); text-decoration: none; }
.ess-breadcrumbs a:hover { text-decoration: underline; }
.ess-breadcrumbs .sep { margin: 0 6px; }

.ess-header .ess-primary-menu > ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  gap: 16px;
}
.ess-header .ess-primary-menu > ul > li {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.ess-header .ess-primary-menu a { color: var(--ess-text); }
.ess-header .ess-primary-menu a:hover { color: var(--ess-theme-color); }

/* Dropdown submenu (desktop) */
.ess-header .ess-primary-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  min-width: 180px;
  padding: 8px 0;
  margin-top: 8px; /* hover buffer to avoid gap flicker */
  margin: 0;
  list-style: none;
  background: var(--ess-bg);
  border: 1px solid var(--ess-border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  z-index: 70;
}
.ess-header .ess-primary-menu li:hover > .sub-menu,
.ess-header .ess-primary-menu li:focus-within > .sub-menu,
.ess-header .ess-primary-menu .sub-menu:hover { display: flex; }
.ess-header .ess-primary-menu .sub-menu li { display: block; }
.ess-header .ess-primary-menu .sub-menu a {
  display: block;
  padding: 8px 12px;
  color: var(--ess-text);
  white-space: nowrap;
}
.ess-header .ess-primary-menu .sub-menu a:hover { background: rgba(0,0,0,0.04); }
html[data-theme="dark"] .ess-header .ess-primary-menu .sub-menu a:hover { background: rgba(255,255,255,0.06); }

/* Nested submenus flyout */
.ess-header .ess-primary-menu .sub-menu li { position: relative; }
.ess-header .ess-primary-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: 8px; /* hover buffer */
}

/* Indicate items with submenus */
.ess-header .ess-primary-menu > ul > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
}
.ess-header .ess-primary-menu .sub-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9,18 15,12 9,6'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9,18 15,12 9,6'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
}

.ess-header .ess-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ess-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 6px;
  border: 1px solid var(--ess-border);
  background: transparent;
  color: var(--ess-text);
  cursor: pointer;
}

.ess-icon-btn:hover {
  background: rgba(0,0,0,0.04);
}

html[data-theme="dark"] .ess-icon-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* Dark mode icon switching */
.ess-dark-icon-moon { display: block; }
.ess-dark-icon-sun { display: none; }

html[data-theme="dark"] .ess-dark-icon-moon { display: none; }
html[data-theme="dark"] .ess-dark-icon-sun { display: block; }

/* Layout */
.ess-container {
  max-width: 1368px; /* 1000px + 320px + 24px gap + padding */
  margin: 0 auto;
  padding: 24px 16px;
}

/* Single post and page containers */
.single .ess-container,
.page .ess-container {
  max-width: 1168px; /* 800px + 320px + 24px gap + padding */
}

.ess-main-area {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  max-width: 1344px; /* 1000px + 320px + 24px gap */
}

/* Single post and page layouts */
.single .ess-main-area,
.page .ess-main-area {
  max-width: 1144px; /* 800px + 320px + 24px gap */
}

@media (max-width: 960px) {
  .ess-main-area {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* Sticky sidebar */
.ess-sidebar {
  position: sticky;
  top: var(--ess-header-height);
  height: max-content;
  align-self: start;
}

/* Footer */
.ess-footer {
  height: var(--ess-footer-height);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid var(--ess-border);
}

.ess-footer .ess-footer-left { justify-self: start; }
.ess-footer .ess-footer-right { justify-self: end; }
.ess-footer .ess-footer-menu { display: flex; gap: 16px; }
.ess-footer .ess-footer-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.ess-footer .ess-footer-menu a { color: var(--ess-text); }
.ess-footer .ess-footer-menu a:hover { color: var(--ess-theme-color); }
/* Footer submenu indicators inherit color */
.ess-footer .ess-footer-menu li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
}

/* Ensure copyright text never wraps */
.ess-footer .ess-footer-left { white-space: nowrap; }

/* Navigation */
.ess-primary-menu {
  display: flex;
  gap: 16px;
  align-items: center;
}

.ess-mobile-menu-btn {
  display: none;
}

@media (max-width: 960px) {
  .ess-primary-menu {
    display: none;
  }
  .ess-mobile-menu-btn {
    display: inline-flex;
  }
}

/* Footer responsiveness (tablet and below) */
@media (max-width: 960px) {
  .ess-footer {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .ess-footer .ess-footer-left { justify-self: center; }
  .ess-footer .ess-footer-right { justify-self: center; }
  .ess-footer .ess-footer-menu ul { justify-content: center; }
}

/* Popups */
.ess-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  z-index: 100;
}

.ess-modal[aria-hidden="false"] {
  display: flex;
}

.ess-modal-dialog {
  width: min(720px, 92vw);
  background: var(--ess-bg);
  color: var(--ess-text);
  border: 1px solid var(--ess-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.ess-modal-header, .ess-modal-footer {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ess-border);
}

.ess-modal-body {
  padding: 12px 16px;
}

.ess-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ess-border);
  border-radius: 6px;
  background: transparent;
  color: var(--ess-text);
}

.ess-search-results {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.ess-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--ess-border);
  background: var(--ess-theme-color);
  color: #ffffff;
}

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


/* Single post navigation */
.post-navigation {
  margin-top: 24px;
}
.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .post-navigation .nav-links { grid-template-columns: 1fr; }
}
.post-navigation a {
  display: block;
  padding: 12px;
  border: 1px solid var(--ess-border);
  border-radius: 8px;
  background: var(--ess-bg);
  color: var(--ess-text);
}
.post-navigation a:hover {
  border-color: var(--ess-theme-color);
  text-decoration: none;
}
.post-navigation .nav-label {
  display: block;
  font-size: 0.85rem;
  color: var(--ess-muted);
  margin-bottom: 4px;
}
.post-navigation .nav-title {
  display: block;
  font-weight: 600;
}

/* Comments */
.comments-area { margin-top: 20px; }
.comments-area .comments-title { margin: 0 0 16px; font-size: 1.25rem; }
.comment-list, .commentlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.comment-list > li, .commentlist > li { margin: 0; }
.comment-list .children, .commentlist .children { list-style: none; margin-left: 24px; padding-left: 0; display: grid; gap: 16px; }
.comment-list > li > .children, .commentlist > li > .children { margin-top: 12px; }
.comment-body + .children { margin-top: 12px; }
.commentlist { counter-reset: none; }
.commentlist > li { list-style: none; }
.commentlist > li::marker { content: none; }
.comment-body { border: none; border-radius: 0; background: transparent; padding: 0; }
.ess-comment { display: grid; grid-template-columns: 40px 1fr; gap: 8px; }
.ess-comment-avatar .avatar { border-radius: 50%; width: 40px; height: 40px; }
.ess-comment-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 4px; }
.ess-comment-head .fn { font-weight: 600; color: var(--ess-text); overflow-wrap: anywhere; line-height: 1.2; }
.ess-comment-date { color: var(--ess-muted); font-size: 0.9rem; text-decoration: none; line-height: 1.2; }
.ess-comment-date:hover { text-decoration: underline; }
.comment-content { color: var(--ess-text); }
.comment-content p { margin: 0 0 8px; overflow-wrap: anywhere; }
.reply { margin-top: 2px; margin-bottom: 10px; }
.reply a { display: inline; padding: 0; border: none; border-radius: 0; font-size: 0.85rem; font-weight: 600; color: var(--ess-theme-color); margin-top: 2px; text-decoration: none; }
.reply a:hover { text-decoration: underline; }

.comment-respond { margin-top: 20px; border-top: 1px solid var(--ess-border); padding-top: 12px; }
.comment-respond .comment-reply-title { margin: 0 0 12px; font-size: 1.1rem; }
.comment-respond label { display: block; margin-bottom: 6px; color: var(--ess-muted); font-size: 0.9rem; }

/* Base input styles */
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ess-border);
  border-radius: 8px;
  background: transparent;
  color: var(--ess-text);
  box-sizing: border-box;
}

.comment-respond textarea { min-height: 140px; resize: vertical; }

/* Side-by-side layout for name and email using CSS Grid */
@media (min-width: 640px) {
  .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    row-gap: 8px; /* Reduce vertical spacing */
  }
  
  .comment-form-comment {
    grid-column: 1 / -1; /* Span full width */
    margin-bottom: 0; /* Remove margin after comment field */
  }
  
  .comment-form-cookies-consent {
    grid-column: 1 / -1; /* Span full width */
  }
  
  .comment-form-cookies-consent input[type="checkbox"] {
    display: inline-block;
    margin-right: 8px;
    vertical-align: top;
  }
  
  .comment-form-cookies-consent label {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top;
  }
  
  .form-submit {
    grid-column: 1 / -1; /* Span full width */
    text-align: right;
  }
}
.comment-respond .form-submit input[type="submit"] {
  cursor: pointer;
  margin-top: 8px;
  border: 1px solid var(--ess-border);
  border-radius: 8px;
  background: var(--ess-theme-color);
  color: #fff;
  padding: 10px 14px;
}
.comment-respond .form-submit input[type="submit"]:hover { filter: brightness(0.95); }

/* Modernized comment form */
.comment-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 640px) {
  .comment-form {
    grid-template-columns: 1fr 1fr;
  }
  .comment-form .comment-form-comment,
  .comment-form .form-submit,
  .comment-form .comment-form-cookies-consent,
  .comment-form .comment-notes {
    grid-column: 1 / -1;
  }
}

.comment-form .comment-notes {
  margin: 0 0 2px;
  color: var(--ess-muted);
  font-size: .85rem;
}

.comment-form .comment-form-comment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--ess-border);
  border-radius: 10px;
  background: transparent;
  color: var(--ess-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.comment-form .comment-form-comment textarea {
  min-height: 96px;
  resize: vertical;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form .comment-form-comment textarea:focus {
  outline: none;
  border-color: var(--ess-theme-color);
  box-shadow: 0 0 0 3px rgba(42,122,226,.15);
}

.comment-form .required { color: var(--ess-theme-color); }

.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-comment {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 0;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--ess-theme-color);
}

.comment-form .form-submit {
  display: flex;
  justify-content: flex-end;
}

.comment-form .form-submit .submit {
  appearance: none;
  border: none;
  border-radius: 10px;
  background: var(--ess-theme-color);
  color: #fff;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, transform .02s ease;
}

.comment-form .form-submit .submit:hover { filter: brightness(.95); }
.comment-form .form-submit .submit:active { transform: translateY(1px); }
.comment-respond .comment-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .comment-respond .comment-form {
    grid-template-columns: 1fr 1fr;
  }
  .comment-respond .comment-form-comment,
  .comment-respond .form-submit,
  .comment-respond .comment-form-cookies-consent {
    grid-column: 1 / -1;
  }
}

.comment-respond .comment-notes {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: var(--ess-muted);
  font-size: .9rem;
}

.comment-respond .comment-form-comment textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--ess-border);
  border-radius: 10px;
  background: transparent;
  color: var(--ess-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.comment-respond .comment-form-comment textarea {
  min-height: 140px;
  resize: vertical;
}

.comment-respond input[type="text"]:focus,
.comment-respond input[type="email"]:focus,
.comment-respond .comment-form-comment textarea:focus {
  outline: none;
  border-color: var(--ess-theme-color);
  box-shadow: 0 0 0 3px rgba(42,122,226,.15);
}

.comment-respond .required { color: var(--ess-theme-color); }

.comment-respond .comment-form-author,
.comment-respond .comment-form-email,
.comment-respond .comment-form-comment {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-respond .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
}

.comment-respond .comment-form-cookies-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ess-theme-color);
}

.comment-respond .form-submit {
  display: flex;
  justify-content: flex-end;
}

.comment-respond .form-submit .submit {
  appearance: none;
  border: none;
  border-radius: 10px;
  background: var(--ess-theme-color);
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, transform .02s ease;
}

.comment-respond .form-submit .submit:hover { filter: brightness(.95); }
.comment-respond .form-submit .submit:active { transform: translateY(1px); }

/* Comment truncation */
.comment-content.ess-collapsed {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.ess-readmore {
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 6px;
  color: var(--ess-theme-color);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.ess-readmore:hover { text-decoration: underline; }

/* Inline read more overlay anchored to last visible line */
.ess-readmore-inline {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding-left: 6px;
  /* Solid mask covering the right half of the last visible line to force a mid-line cutoff */
  width: 50%;
  background: var(--ess-bg);
}

.ess-readmore-inline .ess-readmore { margin: 0; }

/* Ad styling */
.ess-ad {
  margin: 24px 0;
  text-align: center;
}

.ess-dummy-ad {
  background: #f5f5f5;
  border: 2px dashed #ccc;
  padding: 40px 20px;
  border-radius: 8px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ess-dummy-ad h2 {
  color: #999;
  font-size: 2rem;
  margin: 0;
  font-weight: 700;
}

html[data-theme="dark"] .ess-dummy-ad {
  background: #1a1a1a;
  border-color: #444;
}

html[data-theme="dark"] .ess-dummy-ad h2 {
  color: #666;
}

.ess-infinite-ad {
  margin: 32px 0;
}

/* Make injected ad rows span full grid width in archives */
.ess-infinite-ad-row {
  grid-column: 1 / -1;
  margin: 16px 0 24px;
}

/* Two-up ad row layout */
.ess-ad-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.ess-ad-col > .ess-ad { margin: 0; }
.ess-infinite-ad-row .ess-ad-row { margin: 0; }

/* Content media responsiveness and overflow safety */
.entry-content img,
.entry-content figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.entry-content figure {
  margin: 0 0 1rem;
}

.entry-content iframe,
.entry-content video,
.entry-content embed {
  max-width: 100%;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content pre,
.entry-content code {
  overflow-x: auto;
}