/*
Theme Name: MakanBola 2027
Theme URI: https://makanbola.com
Author: MakanBola Holdings Sdn. Bhd.
Author URI: https://makanbola.com
Description: MakanBola 2027: fast, clean news theme for MakanBola. Serif headlines, light by default with an optional dark mode, mobile-first sticky header, card-based homepage, built-in Schema.org (NewsArticle, BreadcrumbList, Organization) and Open Graph that switch off automatically when an SEO plugin is active.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: makanbola-2027
Domain Path: /languages
Tags: news, blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks
*/

/* =========================================================================
   Contents
   1. Design tokens (light by default, dark via html.dark)
   2. Reset and base   3. Utilities   4. Buttons   5. Header and nav
   6. Story cards      7. Sections    8. Breadcrumbs   9. Archive
   10. Article         11. Forms      12. Footer       13. Fixes
   14. WordPress core classes, blocks, widgets, comments
   ========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f5f5f2;
  --ink: #17181b;
  --muted: #5d5f66;          /* 6.4:1 on --bg */
  --line: #e3e3de;
  --line-strong: #b9bab4;    /* form borders, 3:1+ against bg */
  --brand: #ffc107;          /* MakanBola yellow: logo and small marks only */
  --danger: #b3261e;
  --success: #1e6b3a;

  --serif: "Gelasio", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --gap: 32px;
  --header-h: 64px;
  --radius: 6px;
  --tap: 48px;               /* minimum touch target */
}

/* Light is the default. Dark only applies after the reader picks it with the toggle (saved in localStorage). */
html.dark {
  color-scheme: dark;
  --bg: #131416;
  --surface: #1c1d20;
  --ink: #ecebe7;
  --muted: #a3a4a9;
  --line: #2c2d31;
  --line-strong: #55575d;
  --danger: #ff8a80;
  --success: #7fd69b;
}

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px); /* anchors clear the sticky header */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* One clear focus ring everywhere, keyboard only */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Utilities ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }
.muted { color: var(--muted); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 22px;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn {
  width: var(--tap); height: var(--tap);
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
}
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- 5. Header (sticky on every screen size) ---------- */
.site-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: var(--header-h);
}
.header-bar__start { display: flex; align-items: center; gap: 4px; margin-left: -12px; }
.header-bar__end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-right: -12px; }
.header-date { display: none; font-size: .8125rem; color: var(--muted); margin-left: 12px; }
.logo { display: flex; color: var(--ink); padding: 8px 0; }
.logo svg { height: 22px; width: auto; }

/* Theme toggle shows the icon of the mode you will switch to */
.theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* Primary nav: drawer on mobile, inline row on desktop */
.site-nav {
  display: none;
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--bg); overflow-y: auto;
  padding: 8px var(--gutter) 32px;
  border-top: 1px solid var(--line);
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.25rem;
}
.site-nav a[aria-current="page"], .site-nav .current-menu-item > a { font-weight: 600; }

/* Search panel, toggled from the header */
.site-search { border-top: 1px solid var(--line); padding-block: 16px; }
.site-search[hidden] { display: none; }
.search-form { display: flex; gap: 8px; }
.search-form input {
  flex: 1; min-width: 0; min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
}

@media (min-width: 960px) {
  .header-bar { min-height: 76px; }
  .menu-toggle { display: none; }
  .header-date { display: block; }
  .logo svg { height: 30px; }
  .site-nav {
    display: block; position: static; padding: 0; overflow: visible; border-top: 0;
  }
  .site-nav ul {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0 32px;
    border-top: 1px solid var(--line);
  }
  .site-nav a {
    min-height: var(--tap); border-bottom: 0;
    font-family: var(--sans); font-size: .9375rem; font-weight: 500; color: var(--muted);
  }
  .site-nav a[aria-current="page"], .site-nav .current-menu-item > a { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
  .site-nav a:hover { color: var(--ink); }
  html { scroll-padding-top: 140px; }
}

/* ---------- 6. Story cards (one structure, three sizes) ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.card__media { order: -1; }
.card__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--surface); border-radius: 2px;
}
.card__cat { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.card__title { font-size: 1.25rem; line-height: 1.25; }
/* Whole card is clickable through the title link (one tab stop per card) */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8125rem; color: var(--muted); }

/* Lead: the one big story */
.card--lead { gap: 14px; }
.card--lead .card__title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.01em; }

/* Row: thumbnail beside text */
.card--row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 16px; align-content: start; }
.card--row .card__media { grid-row: 1 / span 3; }
.card--row .card__title { font-size: 1.0625rem; }
@media (min-width: 640px) {
  .card--row { grid-template-columns: 200px minmax(0, 1fr); gap: 8px 20px; }
  .card--row .card__title { font-size: 1.25rem; }
}

.card-grid {
  display: grid; gap: 40px 28px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  list-style: none; margin: 0; padding: 0;
}

/* ---------- 7. Page sections ---------- */
.page { padding-block: 32px 0; }
.section { margin-top: 56px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 24px;
}
.section-head h2 { font-size: 1.5rem; }
.section-head a { font-size: .875rem; color: var(--muted); padding: 12px 0; }

/* Homepage headline block: 1 large story left, 3 stacked right */
.headline { display: grid; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.headline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; align-content: start; }
.headline__list > li + li { border-top: 1px solid var(--line); padding-top: 24px; }
@media (min-width: 900px) {
  .headline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Main column + sidebar */
.layout { display: grid; gap: 56px; }
@media (min-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .layout > .sidebar { position: -webkit-sticky; position: sticky; top: 140px; align-self: start; }
}

/* Trending list: a ranking, so numbers carry meaning */
.trending { border-top: 1px solid var(--ink); padding-top: 14px; }
.trending h2 { font-size: 1.25rem; margin-bottom: 4px; }
.trending ol { list-style: none; counter-reset: rank; margin: 0; padding: 0; }
.trending li {
  counter-increment: rank;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.trending li::before {
  content: counter(rank); font-family: var(--serif); font-style: italic; font-size: 1.375rem;
  line-height: 1.1; color: var(--muted);
}
.trending a { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; }

/* Newsletter */
.newsletter { border: 1px solid var(--line); padding: 24px; margin-top: 40px; }
.newsletter h2 { font-size: 1.3125rem; margin-bottom: 8px; }
.newsletter p { font-size: .9375rem; color: var(--muted); margin-bottom: 16px; }
.newsletter .field { margin-bottom: 12px; }
.newsletter .btn { width: 100%; }

/* ---------- 8. Breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: .875rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.breadcrumbs a { display: inline-block; padding: 12px 0; }
.breadcrumbs [aria-current="page"] { color: var(--ink); padding: 12px 0; display: inline-block; }

/* ---------- 9. Archive / category ---------- */
.archive-head { padding-bottom: 32px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.archive-head h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin: 8px 0 12px; }
.archive-head p { max-width: 62ch; color: var(--muted); font-size: 1.0625rem; }
.load-more { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 56px; }
.pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pagination a, .pagination span {
  display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0 12px;
  border-radius: var(--radius); font-size: .9375rem;
}
.pagination a:hover { background: var(--surface); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--ink); color: var(--bg); font-weight: 600; }

/* ---------- 10. Article ---------- */
.article-head { max-width: 760px; }
.article-head h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.1; letter-spacing: -.01em; margin: 8px 0 16px; }
.standfirst { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--muted); margin-bottom: 24px; }
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  padding-block: 16px; border-block: 1px solid var(--line);
  font-size: .875rem; color: var(--muted);
}
.byline strong { color: var(--ink); font-weight: 600; }
.article-hero { margin: 32px 0; }
.article-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
figcaption { font-size: .8125rem; color: var(--muted); margin-top: 10px; line-height: 1.45; }

.prose { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.75; max-width: 680px; }
.prose p { margin: 0 0 1.25em; }
.prose h2 { font-size: 1.5rem; margin: 2em 0 .6em; }
.prose figure { margin: 2em 0; }
.prose blockquote {
  margin: 2em 0; padding-left: 20px; border-left: 3px solid var(--brand);
  font-size: 1.375rem; line-height: 1.45; font-style: italic;
}
.prose ul { padding-left: 1.2em; margin: 0 0 1.25em; }
.prose li { margin-bottom: .4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 32px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.share__label { font-size: .875rem; font-weight: 600; margin-right: 8px; }
.share .icon-btn { border: 1px solid var(--line); }
.share__status { font-size: .875rem; color: var(--success); margin-left: 8px; }

/* ---------- 11. Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field .hint { font-size: .8125rem; color: var(--muted); }
.field input, .field select, .field textarea {
  min-height: var(--tap); padding: 10px 14px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
  -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.field textarea { min-height: 160px; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field .error { font-size: .875rem; color: var(--danger); min-height: 0; }
.field .error:empty { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-status { font-weight: 600; color: var(--success); }
.form-status:empty { display: none; }

.static-page { max-width: 760px; }
.static-page h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin: 8px 0 20px; }
.static-page h2 { font-size: 1.5rem; margin: 48px 0 16px; }

/* ---------- 12. Footer ---------- */
.site-footer { margin-top: 80px; background: var(--surface); border-top: 1px solid var(--line); font-size: .9375rem; }
.footer-grid { display: grid; gap: 32px; padding-block: 48px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.footer-about { grid-column: 1 / -1; max-width: 420px; }
.footer-about svg { height: 24px; width: auto; color: var(--ink); margin-bottom: 14px; }
.footer-about p { color: var(--muted); }
.site-footer h2 { font-family: var(--sans); font-size: .9375rem; font-weight: 600; margin-bottom: 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding: 8px 0; color: var(--muted); min-height: 40px; }
.site-footer li a:hover { color: var(--ink); }
.footer-legal { border-top: 1px solid var(--line); padding-block: 20px 32px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .8125rem; color: var(--muted); }
@media (min-width: 960px) { .footer-about { grid-column: span 2; } }

/* ---------- 13. Late fixes ---------- */
/* Row cards: text always sits in the second column */
.card--row > :not(.card__media) { grid-column: 2; }
/* Drawer content uses the container's own padding */
@media (max-width: 959.98px) { .site-nav { padding: 8px 0 32px; } }
.card__cat a { position: relative; z-index: 1; }


/* ---------- 14. WordPress core classes ---------- */
.screen-reader-text:focus {
  clip: auto !important; clip-path: none; width: auto; height: auto; margin: 0;
  background: var(--bg); color: var(--ink); padding: 12px 18px; z-index: 100000; top: 8px; left: 8px;
}
.site-title { margin: 0; font-size: inherit; line-height: 1; }
.custom-logo-link { display: flex; padding: 8px 0; color: var(--ink); }
/* Fixed height, width from the image's own proportions. SVG logos have no
   intrinsic size, so a max-height alone would collapse them to 0 x 0. */
.custom-logo { display: block; height: 22px; width: auto; max-width: 60vw; }
@media (min-width: 960px) { .custom-logo { height: 30px; } }

.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { margin-inline: calc(-1 * min(80px, 6vw)); max-width: calc(100% + 2 * min(80px, 6vw)); }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.wp-caption, .wp-block-image { max-width: 100%; }
.wp-caption-text, .wp-element-caption, .gallery-caption { font-family: var(--sans); font-size: .8125rem; color: var(--muted); margin-top: 10px; }
.entry-content img, .entry-content video, .entry-content iframe { max-width: 100%; height: auto; }
.entry-content .wp-block-embed iframe { width: 100%; }
.wp-block-quote, .wp-block-pullquote { border-left: 3px solid var(--brand); padding-left: 20px; margin: 2em 0; }
.wp-block-pullquote { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 24px 0; text-align: left; }
.wp-block-table { overflow-x: auto; }
.wp-block-table table, .entry-content table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .9375rem; }
.entry-content th, .entry-content td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry-content pre { overflow-x: auto; background: var(--surface); padding: 16px; font-size: .875rem; }
.entry-content::after { content: ""; display: table; clear: both; }
.sticky, .bypostauthor { /* styled through cards and comments; selectors kept for theme review */ }
.page-links { font-family: var(--sans); font-size: .9375rem; display: flex; gap: 8px; align-items: center; margin: 24px 0; }

/* Forms placed by plugins inside content (contact forms, polls) */
.entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.entry-content select, .entry-content textarea, .comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea {
  font-family: var(--sans); font-size: 1rem; width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink);
}
.entry-content input[type="submit"], .entry-content button[type="submit"] {
  min-height: var(--tap); padding: 0 22px; border: 0; border-radius: var(--radius);
  background: var(--ink); color: var(--bg); font-family: var(--sans); font-weight: 600;
}

/* Pagination from the_posts_pagination() */
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0 12px;
  border-radius: var(--radius); font-size: .9375rem;
}
.pagination a.page-numbers:hover { background: var(--surface); text-decoration: none; }
.pagination .page-numbers.current { background: var(--ink); color: var(--bg); font-weight: 600; }

/* Search form */
.archive-head .search-form, .no-results .search-form { max-width: 520px; margin-top: 20px; }
.no-results { padding: 24px 0; }
.no-results h2 { font-size: 1.5rem; margin-bottom: 8px; }

/* Tags under an article */
.tag-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; }

/* Widgets */
.sidebar > * + * { margin-top: 40px; }
.widget { font-size: .9375rem; }
.widget-title { font-size: 1.25rem; border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 12px; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.newsletter--empty { font-size: .875rem; color: var(--muted); }

/* Footer menus from wp_nav_menu() */
.site-footer .menu { list-style: none; margin: 0; padding: 0; }

/* Comments */
.comments-area { margin-top: 48px; max-width: 680px; }
.comments-title, .comment-reply-title { font-size: 1.5rem; border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 24px; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 24px; border-left: 1px solid var(--line); }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--line); }
.comment-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .875rem; color: var(--muted); margin-bottom: 8px; }
.comment-author { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .says { display: none; }
.comment-content { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.65; }
.comment-content p { margin: 0 0 1em; }
.reply a, .comment-reply-link { display: inline-flex; align-items: center; min-height: 40px; font-size: .875rem; font-weight: 600; }
.comment-form { display: grid; gap: 16px; }
.comment-form label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
.comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.comment-form .submit { min-height: var(--tap); }
.no-comments { color: var(--muted); }