/*
 * ============================================================
 *  SITE-WIDE STYLESHEET — www.jntbgri.in
 *  Applicable to: home, blog, single posts, pages, archives,
 *  category/tag listings, search results, comments, contact,
 *  author pages, and any custom page templates.
 *
 *  Architecture:
 *  0. Design Tokens  (CSS custom properties)
 *  1. Base Reset & Box Model
 *  2. Typography
 *  3. Links
 *  4. Layout — Grid, Page Structure, Sidebar
 *  5. Header & Top Bar
 *  6. Navigation
 *  7. Buttons & CTAs
 *  8. Forms & Inputs
 *  9. Article Cards (listing pages)
 * 10. Single Post / Page
 * 11. Entry Meta
 * 12. Sidebar & Widgets
 * 13. Pagination
 * 14. Comments
 * 15. Footer
 * 16. Utility Classes
 * 17. Responsive (≤ 768 px)
 * 18. Print
 * ============================================================
 */


/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Colour palette --- */
  --color-text:          #222222;   /* primary body / heading text  */
  --color-text-subtle:   #575760;   /* meta, captions, descriptions */
  --color-text-muted:    #b2b2be;   /* placeholders, dividers       */

  --color-bg-page:       #f7f8f9;   /* outer page background        */
  --color-bg-subtle:     #f0f0f0;   /* borders, dropdown bg         */
  --color-bg-surface:    #ffffff;   /* cards, header, footer        */

  --color-accent:        #1e73be;   /* links, active nav, CTAs      */
  --color-accent-hover:  #155d97;   /* link / CTA hover state       */

  --color-topbar-bg:     #636363;   /* top utility bar bg           */
  --color-topbar-text:   #ffffff;   /* top utility bar text         */

  --color-btn-bg:        #55555e;   /* default button bg            */
  --color-btn-bg-hover:  #3f4047;   /* default button hover bg      */
  --color-btn-text:      #ffffff;

  --color-border:        #e0e0e6;   /* general borders / rules      */

  /* --- Spacing scale (4 px base) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Typography --- */
  --font-base:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
                  sans-serif;
  --font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   36px;
  --text-4xl:   42px;

  --leading-tight:  1.25;
  --leading-normal: 1.65;
  --leading-loose:  1.85;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:  10px;
  --radius-pill: 9999px;

  /* --- Shadows --- */
  --shadow-card:   0 0 10px rgba(0, 0, 0, 0.10);
  --shadow-header: 0 1px 4px  rgba(0, 0, 0, 0.08);
  --shadow-focus:  0 0 0 3px  rgba(30, 115, 190, 0.30);

  /* --- Motion --- */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Layout --- */
  --max-width:           1200px;
  --content-width:       70%;
  --sidebar-width:       30%;
  --article-padding:     40px;
  --article-padding-mob: 30px;
}


/* ============================================================
   1. BASE RESET & BOX MODEL
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

img.wp-smiley,
img.emoji {
  display: inline !important;
  height: 1em !important;
  width:  1em !important;
  margin: 0 0.07em !important;
  vertical-align: -0.1em !important;
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

img#wpstats {
  display: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-top: 0;
  margin-bottom: var(--space-5);
}

h1 { font-size: var(--text-3xl);  margin-bottom: var(--space-5); }
h2 { font-size: var(--text-2xl);  margin-bottom: var(--space-3); }
h3 { font-size: var(--text-xl);   margin-bottom: var(--space-3); }
h4 { font-size: var(--text-lg);   margin-bottom: var(--space-2); }
h5 { font-size: var(--text-md);   margin-bottom: var(--space-2); }
h6 { font-size: var(--text-base); margin-bottom: var(--space-2); }

p {
  margin-top: 0;
  margin-bottom: var(--space-5);
  line-height: var(--leading-normal);
}

ul,
ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}

li {
  margin-bottom: var(--space-1);
}

blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-subtle);
  font-size: 1.05em;
  line-height: var(--leading-loose);
}

.wp-block-pullquote {
  font-size: 1.5em;
  line-height: 1.6;
  border-top: 4px solid var(--color-accent);
  border-bottom: 4px solid var(--color-accent);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

pre,
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}

code {
  padding: 2px 5px;
}

pre {
  padding: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

pre code {
  background: none;
  padding: 0;
}

strong { font-weight: var(--weight-bold); }
em     { font-style: italic; }

small,
.text-sm { font-size: var(--text-sm); }


/* ============================================================
   3. LINKS
   ============================================================ */
a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover,
a:focus,
a:active {
  color: var(--color-text);
  text-decoration: underline;
}

/* Remove underline on specific interactive elements */
.entry-title a,
.site-branding a,
a.button,
.wp-block-button__link,
.main-navigation a,
.widget-title a,
.read-more {
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   4. LAYOUT — GRID, PAGE STRUCTURE, SIDEBAR
   ============================================================ */
.grid-container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* Main page flex wrapper */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Content + sidebar row */
.site-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

#primary.content-area {
  width: var(--content-width);
  min-width: 0; /* prevents overflow in flex */
}

#right-sidebar,
#left-sidebar,
.widget-area {
  width: var(--sidebar-width);
  min-width: 0;
}

.is-right-sidebar { width: var(--sidebar-width); }
.is-left-sidebar  { width: var(--sidebar-width); }
.site-content .content-area { width: var(--content-width); }

/* No sidebar / full-width pages */
body.no-sidebar #primary.content-area,
body.full-width-content #primary.content-area {
  width: 100%;
}

/* Container utility (used in converter / inner blocks) */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5);
  border: 1px solid #cccccc;
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
}

/* WP inner-container block */
.wp-block-group__inner-container {
  max-width: var(--max-width);
  margin-left:  auto;
  margin-right: auto;
}

.site-main .wp-block-group__inner-container {
  padding: var(--article-padding);
}

/* Layout alignments */
.has-text-align-justify { text-align: justify; }

body .is-layout-flow > .alignleft  { float: left;  margin-inline: 0 2em; }
body .is-layout-flow > .alignright { float: right; margin-inline: 2em 0; }
body .is-layout-flow > .aligncenter,
body .is-layout-constrained > .aligncenter {
  margin-left:  auto !important;
  margin-right: auto !important;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size, 65ch);
  margin-left:  auto !important;
  margin-right: auto !important;
}

body .is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size, var(--max-width));
}

body .is-layout-flex  { display: flex;  flex-wrap: wrap; align-items: center; }
body .is-layout-flex  > * { margin: 0; }
body .is-layout-grid  { display: grid; }
body .is-layout-grid  > * { margin: 0; }

:where(.is-layout-flex)  { gap: 0.5em; }
:where(.is-layout-grid)  { gap: 0.5em; }
:where(.wp-block-columns.is-layout-flex),
:where(.wp-block-columns.is-layout-grid) { gap: 2em; }
:where(.wp-block-post-template.is-layout-flex),
:where(.wp-block-post-template.is-layout-grid) { gap: 1.25em; }

/* Alignwide / alignfull inside articles */
.entry-content .alignwide,
body:not(.no-sidebar) .entry-content .alignfull {
  margin-left: calc(-1 * var(--article-padding));
  width:     calc(100% + 2 * var(--article-padding));
  max-width: calc(100% + 2 * var(--article-padding));
}


/* ============================================================
   5. HEADER & TOP BAR
   ============================================================ */
.top-bar {
  background-color: var(--color-topbar-bg);
  color: var(--color-topbar-text);
  font-size: var(--text-sm);
}

.inside-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
}

.top-bar a {
  color: var(--color-topbar-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.top-bar a:hover {
  color: #303030;
}

/* Site header */
.site-header,
#masthead {
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-header);
  position: relative;
  z-index: 100;
}

.inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Site branding */
.site-branding {
  display: flex;
  flex-direction: column;
}

.main-title,
.site-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin: 0;
  line-height: 1.2;
}

.main-title a,
.main-title a:hover,
.site-title a,
.site-title a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.site-description {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

/* Header logo */
.site-logo img,
.custom-logo {
  max-height: 60px;
  width: auto;
}

/* Back-to-top */
a.generate-back-to-top {
  background-color: rgba(0, 0, 0, 0.40);
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
  background-color: rgba(0, 0, 0, 0.60);
  color: #ffffff;
}


/* ============================================================
   6. NAVIGATION
   ============================================================ */
.main-navigation,
.main-navigation ul ul {
  background-color: var(--color-bg-surface);
}

.main-navigation .inside-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Nav above / below header inner padding */
.nav-below-header .main-navigation .inside-navigation.grid-container,
.nav-above-header  .main-navigation .inside-navigation.grid-container {
  padding: 0 var(--space-5);
}

/* Nav links */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  padding: var(--space-4) var(--space-5);
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

/* Active / current page */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--color-accent);
}

/* Hover / focus state */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
  color: var(--color-accent);
}

/* Dropdown sub-menu */
.main-navigation ul ul {
  background-color: var(--color-bg-subtle);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-sm);
  min-width: 180px;
}

.main-navigation ul ul li a {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* Mobile menu toggle */
#mobile-menu-control-wrapper,
.mobile-menu-control-wrapper .menu-toggle {
  display: none;
}

.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
  background-color: rgba(0, 0, 0, 0.02);
}

button.menu-toggle:hover,
button.menu-toggle:focus {
  color: var(--color-text);
}

/* GP icon wrapper */
.gp-icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-1);
  vertical-align: middle;
}

/* Navigation search */
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus,
.main-navigation .main-nav ul li.search-item.active > a,
.main-navigation .menu-bar-items .search-item.active > a {
  color: var(--color-accent);
}

/* Search modal */
:root {
  --gp-search-modal-bg-color:         var(--color-bg-surface);
  --gp-search-modal-text-color:       var(--color-text);
  --gp-search-modal-overlay-bg-color: rgba(0, 0, 0, 0.2);
}

/* RTL support for dropdowns */
.rtl .menu-item-has-children .dropdown-menu-toggle { padding-left: var(--space-5); }
.rtl .main-navigation .main-nav ul li.menu-item-has-children > a { padding-right: var(--space-5); }


/* ============================================================
   7. BUTTONS & CTAs
   ============================================================ */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
.wp-block-button__link,
a.wp-block-button__link:not(.has-background) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
.wp-block-button__link:hover,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):hover {
  background-color: var(--color-btn-bg-hover);
  color: var(--color-btn-text);
}

button:focus-visible,
a.button:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* Read more link */
a.read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a.read-more:hover,
a.read-more:focus {
  color: var(--color-accent-hover);
}

/* WP file block */
.wp-block-file__button {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  text-decoration: none;
}


/* ============================================================
   8. FORMS & INPUTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  background-color: var(--color-bg-page);
  border: 1px solid var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow    var(--duration-fast) var(--ease-out);
  appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  color: var(--color-text);
  background-color: var(--color-bg-page);
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-focus);
  outline: none;
}

label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Search form */
.search-form {
  display: flex;
  gap: var(--space-2);
}

.search-form input[type="search"] {
  flex: 1;
  margin-bottom: 0;
}

/* Converter widget (used across unit conversion pages) */
.converter {
  margin-bottom: var(--space-8);
}

.converter label {
  font-weight: var(--weight-medium);
}


/* ============================================================
   9. ARTICLE CARDS (LISTING PAGES — blog, archive, category, search)
   ============================================================ */

/* Separate containers layout — each article is its own surface */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.inside-page-header {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.inside-article {
  padding: var(--article-padding);
}

/* One-container layout */
.one-container .container {
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
}

/* Entry header */
.entry-header {
  margin-bottom: var(--space-4);
}

.entry-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.entry-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.entry-title a:hover {
  color: var(--color-text-subtle);
}

/* Featured image */
.post-image,
.entry-featured-image {
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.post-image img,
.entry-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--duration-base) var(--ease-out);
}

.post-image img:hover,
.entry-featured-image img:hover {
  transform: scale(1.02);
}

/* Entry summary (excerpt) */
.entry-summary {
  color: var(--color-text-subtle);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

/* Article spacing between posts */
article + article {
  margin-top: var(--space-5);
}


/* ============================================================
  10. SINGLE POST / PAGE
   ============================================================ */
.entry-content {
  line-height: var(--leading-loose);
  font-size: var(--text-md);
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content pre,
.entry-content table {
  margin-bottom: var(--space-6);
}

.entry-content h2 { margin-top: var(--space-10); }
.entry-content h3 { margin-top: var(--space-8);  }
.entry-content h4 { margin-top: var(--space-6);  }

/* Tables inside content */
.entry-content table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.entry-content th,
.entry-content td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--text-sm);
}

.entry-content th {
  background-color: var(--color-bg-subtle);
  font-weight: var(--weight-semi);
}

.entry-content tr:nth-child(even) {
  background-color: var(--color-bg-page);
}

/* Page header */
.page-header,
.inside-page-header {
  padding: var(--article-padding);
  margin-bottom: var(--space-5);
}

.page-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}


/* ============================================================
  11. ENTRY META
   ============================================================ */
.entry-meta {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.entry-meta a {
  color: var(--color-text-subtle);
  text-decoration: none;
}

.entry-meta a:hover {
  color: var(--color-accent);
}

/* Meta icons */
.gp-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

.cat-links,
.tags-links,
.comments-link,
.posted-on,
.byline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
  12. SIDEBAR & WIDGETS
   ============================================================ */
.sidebar .widget,
.widget-area .widget {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  margin-bottom: var(--space-5);
}

.widget-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

/* Widget search */
.widget_search .search-form {
  display: flex;
  gap: var(--space-2);
}

.widget_search input[type="search"] {
  margin-bottom: 0;
}

/* Latest posts widget */
.wp-block-latest-posts__list {
  padding: 0;
  list-style: none;
  margin: 0;
}

.wp-block-latest-posts__list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  margin-bottom: 0;
}

.wp-block-latest-posts__list li:last-child {
  border-bottom: none;
}

.wp-block-latest-posts__list a {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.wp-block-latest-posts__list a:hover {
  color: var(--color-accent);
}

/* Footer widgets */
.footer-widgets {
  background-color: var(--color-bg-surface);
  padding: var(--space-10) 0;
}

.footer-widgets-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer-widgets .widget {
  flex: 1;
  min-width: 200px;
}


/* ============================================================
  13. PAGINATION
   ============================================================ */
.paging-navigation,
#nav-below {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.separate-containers .paging-navigation {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-color: var(--color-bg-surface);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  background-color: var(--color-bg-subtle);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.page-numbers:hover,
.page-numbers:focus {
  background-color: var(--color-accent);
  color: #ffffff;
}

.page-numbers.current {
  background-color: var(--color-accent);
  color: #ffffff;
  cursor: default;
}


/* ============================================================
  14. COMMENTS
   ============================================================ */
.comments-area {
  padding: var(--article-padding);
  margin-top: var(--space-5);
}

.comments-title,
.comment-reply-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}

.comment-list .comment {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.comment-list .children {
  list-style: none;
  padding-left: var(--space-10);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.comment-author img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.comment-metadata {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.comment-form label {
  font-weight: var(--weight-medium);
}


/* ============================================================
  15. FOOTER
   ============================================================ */
.site-footer {
  margin-top: auto;
}

.site-info {
  background-color: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
}

.inside-site-info {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.inside-site-info a {
  color: var(--color-text-subtle);
  text-decoration: none;
}

.inside-site-info a:hover {
  color: var(--color-accent);
}

.copyright-bar {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-bg-subtle);
}

/* Footer navigation */
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-accent);
}


/* ============================================================
  16. UTILITY CLASSES
   ============================================================ */

/* WordPress colour utilities (keep aligned with theme tokens) */
:root .has-contrast-color            { color: var(--color-text); }
:root .has-contrast-background-color { background-color: var(--color-text); }
:root .has-contrast-2-color          { color: var(--color-text-subtle); }
:root .has-contrast-2-background-color { background-color: var(--color-text-subtle); }
:root .has-contrast-3-color          { color: var(--color-text-muted); }
:root .has-contrast-3-background-color { background-color: var(--color-text-muted); }
:root .has-base-color                { color: var(--color-bg-subtle); }
:root .has-base-background-color     { background-color: var(--color-bg-subtle); }
:root .has-base-2-color              { color: var(--color-bg-page); }
:root .has-base-2-background-color   { background-color: var(--color-bg-page); }
:root .has-base-3-color              { color: var(--color-bg-surface); }
:root .has-base-3-background-color   { background-color: var(--color-bg-surface); }
:root .has-accent-color              { color: var(--color-accent); }
:root .has-accent-background-color   { background-color: var(--color-accent); }

/* WP font-size utilities */
.has-small-font-size  { font-size: var(--text-sm)   !important; }
.has-medium-font-size { font-size: var(--text-lg)   !important; }
.has-large-font-size  { font-size: var(--text-3xl)  !important; }
.has-x-large-font-size { font-size: var(--text-4xl) !important; }

/* Visibility / accessibility */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-left    { text-align: left; }
.text-muted   { color: var(--color-text-subtle); }
.text-accent  { color: var(--color-accent); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }


/* ============================================================
  17. RESPONSIVE — ≤ 768 px
   ============================================================ */
@media (max-width: 768px) {

  /* Layout: stack content + sidebar vertically */
  .site-content {
    flex-direction: column;
    gap: var(--space-5);
  }

  #primary.content-area,
  .site-content .content-area,
  .is-right-sidebar,
  .is-left-sidebar,
  .widget-area {
    width: 100%;
  }

  /* Article padding */
  .inside-article,
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation,
  .one-container .site-content,
  .inside-page-header {
    padding: var(--article-padding-mob);
  }

  .site-main .wp-block-group__inner-container {
    padding: var(--article-padding-mob);
  }

  /* Alignwide / alignfull fix for mobile */
  .entry-content .alignwide,
  body:not(.no-sidebar) .entry-content .alignfull {
    margin-left: calc(-1 * var(--article-padding-mob));
    width:     calc(100% + 2 * var(--article-padding-mob));
    max-width: calc(100% + 2 * var(--article-padding-mob));
  }

  /* Header */
  .inside-top-bar,
  .inside-header {
    padding-right: var(--article-padding-mob);
    padding-left:  var(--article-padding-mob);
  }

  /* Navigation — show mobile toggle, hide desktop menu */
  .main-navigation .menu-toggle,
  .sidebar-nav-mobile:not(#sticky-placeholder) {
    display: block;
  }

  .main-navigation ul,
  .gen-sidebar-nav,
  .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,
  .has-inline-mobile-toggle #site-navigation .inside-navigation > :not(.navigation-search):not(.main-nav) {
    display: none;
  }

  #mobile-menu-control-wrapper,
  .mobile-menu-control-wrapper .menu-toggle {
    display: block;
  }

  .nav-align-right .inside-navigation,
  .nav-align-center .inside-navigation {
    justify-content: space-between;
  }

  .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .has-inline-mobile-toggle .inside-header {
    flex-flow: wrap;
    text-align: left;
  }

  .has-inline-mobile-toggle .header-widget,
  .has-inline-mobile-toggle #site-navigation {
    flex-basis: 100%;
  }

  .nav-float-left .has-inline-mobile-toggle #site-navigation {
    order: 10;
  }

  .main-navigation .menu-bar-item:hover > a,
  .main-navigation .menu-bar-item.sfHover > a {
    background: none;
    color: var(--color-text);
  }

  /* Sidebar & widgets */
  .widget-area .widget {
    padding: var(--article-padding-mob);
  }

  /* Footer */
  .footer-widgets-container {
    padding: var(--article-padding-mob);
  }

  .inside-site-info {
    padding-right: var(--article-padding-mob);
    padding-left:  var(--article-padding-mob);
    flex-direction: column;
    text-align: center;
  }

  /* One-container pagination */
  .one-container .site-main .paging-navigation {
    margin-bottom: var(--space-5);
  }

  /* Headings */
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl);  }
  h3 { font-size: var(--text-lg);  }

  /* Tables */
  .entry-content table {
    display: block;
    overflow-x: auto;
  }

  /* Comment nesting — reduce indent on mobile */
  .comment-list .children {
    padding-left: var(--space-5);
  }

  /* Footer nav */
  .footer-nav ul {
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
  }
}


/* ============================================================
  18. PRINT
   ============================================================ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* Hide non-content elements */
  .site-header,
  .top-bar,
  .main-navigation,
  #right-sidebar,
  #left-sidebar,
  .widget-area,
  .site-footer,
  .paging-navigation,
  .comment-reply-link,
  a.generate-back-to-top,
  .gp-icon {
    display: none !important;
  }

  #primary.content-area {
    width: 100%;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 { font-size: 22pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}