/*
Theme Name: Wask 2026
Theme URI: https://blog.waskstudio.com
Author: Wask Studio
Description: Custom standalone theme for the Wask blog, matching the waskstudio.com Shopify store header and footer.
Version: 1.0
*/

/* =============================================
   COLOUR & FONT VARIABLES
============================================= */

:root,
.color-background-1,
.color-background-2 {
  --color-background: 244,241,230;
  --gradient-background: #f4f1e6;
  --color-foreground: 95,104,89;
  --color-shadow: 95,104,89;
  --color-button: 95,104,89;
  --color-button-text: 244,241,230;
  --color-link: 95,104,89;
  --alpha-link: 0.85;
}

:root {
  --font-body-family: "Bricolage Grotesque", sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-heading-family: "Tilt Warp", sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-scale: 1.0;
  --font-heading-scale: 1.2;
  --page-width: 120rem;
  --popup-border-width: 2px;
  --popup-border-opacity: 1.0;
  --popup-corner-radius: 12px;
  --popup-shadow-opacity: 1.0;
  --popup-shadow-horizontal-offset: 0px;
  --popup-shadow-vertical-offset: 2px;
  --popup-shadow-blur-radius: 0px;
  --duration-default: 200ms;
  --duration-short: 100ms;
  --duration-long: 500ms;
  --grid-desktop-vertical-spacing: 12px;
  --grid-desktop-horizontal-spacing: 12px;
  --grid-mobile-vertical-spacing: 6px;
  --grid-mobile-horizontal-spacing: 6px;
}

/* =============================================
   GRID SYSTEM
============================================= */

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--1-col .grid__item { max-width: 100%; width: 100%; }

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }
  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

/* =============================================
   BASE / RESET
============================================= */

html {
  box-sizing: border-box;
  font-size: calc(var(--font-body-scale) * 62.5%);
  height: 100%;
  overflow-y: scroll;
}

*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

@media screen and (min-width: 750px) { body { font-size: 1.6rem; } }

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) { .page-width { padding: 0 5rem; } }

.hidden { display: none !important; }

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

@media screen and (max-width: 749px) { .small-hide { display: none !important; } }
@media screen and (min-width: 750px) and (max-width: 989px) { .medium-hide { display: none !important; } }
@media screen and (min-width: 990px) { .large-up-hide { display: none !important; } }

/* =============================================
   HEADINGS
============================================= */

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

/* =============================================
   LINKS & ICONS
============================================= */

.link {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text { color: rgb(var(--color-foreground)); }
.link--text:hover { color: rgb(var(--color-foreground)); }

/* Global anchor reset — prevents browser default purple/blue on all links */
a { color: rgb(var(--color-foreground)); }
a:visited { color: rgb(var(--color-foreground)); }

summary { cursor: pointer; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary .icon-caret { position: absolute; height: 0.6rem; right: 1.5rem; top: calc(50% - 0.2rem); }
summary.list-menu__item { padding-right: 2.7rem; }

.icon { height: 2rem; width: 2rem; fill: none; vertical-align: middle; }
.icon-arrow { width: 1.5rem; }
.icon-caret { width: auto; height: 0.6rem; }

*:focus { outline: 0; box-shadow: none; }
.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/* =============================================
   LIST MENU
============================================= */

.list-menu { list-style: none; padding: 0; margin: 0; }
.list-menu--inline { display: inline-flex; flex-wrap: wrap; }
.list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); }

.list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; }
@media screen and (min-width: 750px) {
  .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; }
}

.gradient { background: rgb(var(--color-background)); background: var(--gradient-background); }

/* =============================================
   HEADER
============================================= */

.section-header { position: sticky; top: 0; z-index: 3; margin-bottom: 0; width: 100%; }
.shopify-section-group-header-group { z-index: 4; }
.header-wrapper { display: block; position: relative; width: 100%; background-color: rgb(var(--color-background)); }

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding: 11px 3rem;
}

@media screen and (min-width: 750px) {
  .header.page-width { padding-left: 3.2rem; padding-right: 3.2rem; }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
    padding-top: 21px;
    padding-bottom: 20px;
  }
  .header.page-width { padding-left: 5rem; padding-right: 5rem; }
}

.header__heading { margin: 0; line-height: 0; grid-area: heading; justify-self: center; }
.header__heading-link { grid-area: heading; justify-self: center; display: inline-block; padding: 0.75rem; text-decoration: none; word-break: break-word; }
.header__heading-logo { height: auto; max-width: 100%; filter: invert(41%) sepia(11%) saturate(438%) hue-rotate(53deg) brightness(60%) contrast(92%); opacity: 80%; }
.header__heading-logo-wrapper { width: 100%; display: inline-block; }

@media screen and (max-width: 989px) {
  .header__heading-link { margin-left: -4px; }
}

@media screen and (min-width: 990px) {
  .header__heading, .header__heading-link { justify-self: start; }
  .header--middle-left .header__heading-link { margin-left: -0.75rem; }
}

.header__inline-menu { margin-left: -1.2rem; grid-area: navigation; display: none; width: fit-content; }
@media screen and (min-width: 990px) { .header__inline-menu { display: block; margin-left: 0; } }
.header__inline-menu .list-menu--inline { display: inline-flex; }

.header__menu-item { padding: 1.2rem; text-decoration: none; color: rgb(var(--color-foreground)); }
a.header__menu-item { text-decoration: none; }
.header__menu-item:hover { color: rgb(var(--color-foreground)); text-decoration: none; }
.header__menu-item span { transition: text-decoration var(--duration-short) ease; }
.header__menu-item:hover span { text-decoration: underline; text-underline-offset: 0.3rem; }
.header__active-menu-item { color: rgb(var(--color-foreground)); text-decoration: underline; text-underline-offset: 0.3rem; }
.header__menu-item:hover .header__active-menu-item { text-decoration-thickness: 0.2rem; }

.header__inline-menu summary .icon-caret { position: absolute; right: 0.8rem; top: calc(50% - 0.3rem); height: 0.6rem; width: auto; }

header-menu > details, details-disclosure > details { position: relative; }

.header__submenu { transition: opacity var(--duration-default) ease, transform var(--duration-default) ease; }

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border: var(--popup-border-width) solid rgba(var(--color-foreground), var(--popup-border-opacity));
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: 100;
}

.header__submenu.list-menu { padding: 1rem 0; }
.header__submenu .header__menu-item { justify-content: space-between; padding: 0.8rem 2rem; }
.header__submenu .header__menu-item:hover { text-decoration: underline; text-underline-offset: 0.3rem; }

.js details > .header__submenu { opacity: 0; transform: translateY(-1.5rem); }
details[open] > .header__submenu { animation: animateMenuOpen var(--duration-default) ease; animation-fill-mode: forwards; z-index: 1; }

@keyframes animateMenuOpen {
  0%   { opacity: 0; transform: translateY(-1.5rem); }
  100% { opacity: 1; transform: translateY(0); }
}

header-drawer { justify-self: start; margin-left: -1.2rem; }
@media screen and (min-width: 990px) { header-drawer { display: none; } }

.menu-drawer-container { display: flex; }

.header__icons { display: flex; grid-area: icons; justify-self: end; padding-right: 0.8rem; }

.header__icon { color: rgb(var(--color-foreground)); height: 4.4rem; width: 4.4rem; padding: 0; display: flex; align-items: center; justify-content: center; }
.header__icon::after { content: none; }
.header__icon .icon { height: 2rem; width: 2rem; fill: none; vertical-align: middle; }
.header__icon--menu .icon { display: block; position: absolute; opacity: 1; transform: scale(1); transition: transform 150ms ease, opacity 150ms ease; }
.header__icon--summary { display: flex; align-items: center; justify-content: center; }

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger { visibility: hidden; opacity: 0; transform: scale(0.8); }

@media (prefers-reduced-motion) { .motion-reduce { transition: none !important; animation: none !important; } }

/* X close button position */
.header__icon--menu {
  position: initial;
  margin-right: 1.2rem;
  margin-left: -10px;
  margin-top: -20px;
}

/* Drawer link overrides */
.menu-drawer__menu-item,
.menu-drawer__menu-item.link,
.menu-drawer .link {
  text-decoration: none !important;
  font-size: 1.8rem !important;
}
.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus { text-decoration: none !important; }

/* =============================================
   HERO BANNER
============================================= */

.wask-hero-banner__content ::selection { background-color: #F4F1E6; color: #778471; }
.wask-hero-banner { background-color: #778471; width: 100%; text-align: center; }
.wask-hero-banner__content { padding: 6rem 2rem; }
.wask-hero-banner__heading {
  color: #F4F1E6 !important;
  margin: 0 0 1.2rem;
  font-family: var(--font-heading-family);
  font-size: calc(var(--font-heading-scale) * 4rem);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}
.wask-hero-banner__subtext { color: #F4F1E6 !important; font-size: 1.8rem; letter-spacing: 0.06rem; margin: 0; }
.wask-hero-banner__scallop-wrap { height: 30px; position: relative; overflow: hidden; margin-bottom: -30px; z-index: 2; }
.wask-hero-banner__scallop-track { position: absolute; top: 0; left: 0; display: flex; width: max-content; height: 30px; animation: wask-scallop-move 28s linear infinite; }
.wask-hero-banner__scallop-track svg { display: block; width: 1200px; height: 30px; flex-shrink: 0; }
@keyframes wask-scallop-move { from { transform: translateX(0); } to { transform: translateX(-1200px); } }
@media (prefers-reduced-motion: reduce) { .wask-hero-banner__scallop-track { animation: none; } }

/* =============================================
   FOOTER
============================================= */

.footer { margin-top: 63px; }
.footer-padding { padding-top: 27px; padding-bottom: 27px; }
@media screen and (min-width: 750px) {
  .footer { margin-top: 84px; }
  .footer-padding { padding-top: 36px; padding-bottom: 36px; }
}

.footer__content-top { padding-bottom: 5rem; }

.footer-block__image-wrapper img {
  display: block;
  height: auto;
  max-width: 100%;
}

.omgwriteme b { display: none; }

.footer .list-unstyled,
.footer .list-social,
.footer-block__details-content {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Mobile footer */
@media screen and (max-width: 749px) {
  .footer .grid { display: block !important; }
  .footer .footer-block.grid__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 4rem 0;
  }
  .footer .footer-block.grid__item:first-child { margin-top: 0; }
  .footer__content-top {
    padding-left: calc(4rem / var(--font-body-scale));
    padding-right: calc(4rem / var(--font-body-scale));
    padding-bottom: 3rem;
  }
}

/* Footer menu links */
.footer-block__details-content .list-menu__item--link {
  text-decoration: none !important;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: block;
}

@media screen and (min-width: 750px) {
  .footer-block__details-content .list-menu__item--link {
    display: inline-block;
    font-size: 1.4rem;
  }
}

.footer-block__details-content .list-menu__item--link.list-menu__item--active {
  text-decoration: underline !important;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-foreground));
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}
@media screen and (min-width: 750px) { .caption { font-size: 1.2rem; } }

.footer__copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

/* =============================================
   BLOG CONTENT AREA
============================================= */

.site-main {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 10rem 1.5rem 5rem;
}

@media screen and (min-width: 750px) {
  .site-main { padding: 10rem 5rem 5rem; }
}

@media screen and (max-width: 749px) {
  .site-main { padding: 6rem 1.5rem 4rem; }
}

/* Post listing — side by side */
.post-inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.post-text { flex: 1 1 0; min-width: 0; }

.post-inner .post-thumbnail {
  flex: 0 0 32%;
  order: 2;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1.2rem;
}

.post-inner .post-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

.post-inner .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 749px) {
  .post-inner {
    flex-direction: column;
  }
  .post-inner .post-thumbnail {
    flex: 0 0 auto;
    width: 100%;
    order: -1;
    aspect-ratio: 16 / 9;
  }
}

article.post, article.page {
  margin-bottom: 5rem;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

article.post:last-of-type { border-bottom: none; }

.entry-title {
  font-size: calc(var(--font-heading-scale) * 2.4rem);
  margin-top: 0;
  margin-bottom: 1rem;
}

.entry-title a {
  text-decoration: none;
  color: rgb(var(--color-foreground));
}

.entry-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.entry-meta {
  font-size: 1.3rem;
  color: rgb(var(--color-foreground));
  margin-bottom: 2rem;
}

.entry-content {
  color: rgb(var(--color-foreground));
}

.entry-content a {
  color: rgb(var(--color-foreground));
  text-underline-offset: 0.3rem;
}

.entry-content img { max-width: 100%; height: auto; margin-bottom: 15px; }

.more-link {
  display: inline-block;
  margin-top: 1.5rem;
  margin-right: 15px;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  font-size: 1.4rem;
}

.post-thumbnail { margin-bottom: 2.5rem; }
.post-thumbnail img { width: 100%; height: auto; display: block; }

/* Single post */
.single-post-header { margin-bottom: 3rem; }
.single-post-header .entry-title {
  font-size: calc(var(--font-heading-scale) * 3.2rem);
}

/* Post navigation (single post prev/next) —
   the_post_navigation() generates its own .nav-links div so we style
   it via the parent .post-navigation to avoid double borders */
.post-navigation {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.post-navigation .nav-links a,
.post-navigation .nav-links a:visited {
  display: inline-block;
  font-size: 1.4rem;
  padding: 0.6rem 1.6rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.35);
  border-radius: 4rem;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.post-navigation .nav-links a:hover {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-foreground));
}

/* Pagination (blog listing page) */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  flex-wrap: wrap;
}

.nav-links a, .nav-links span {
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.nav-links a:hover { text-decoration: underline; text-underline-offset: 0.3rem; }

/* Comment count link on listings */
.entry-comment-count {
  display: inline-block;
  font-size: 1.3rem;
  margin-top: 1rem;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  opacity: 0.7;
}

.entry-comment-count:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3rem; }
.entry-comment-count:visited { color: rgb(var(--color-foreground)); }

/* Comments — single border only (comments.php provides the wrapper) */
.comments-area {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.comment-list { list-style: none; padding: 0; }
/* #comments scroll target offset so sticky header doesn't cover it */
#comments {
  scroll-margin-top: 80px;
}

/* .comment is the <li> — no border here, border lives on .comment-body below */
.comment { margin-bottom: 0; padding-bottom: 0; }

/* Hero banner heading as a link */
.wask-hero-blog-link { text-decoration: none; display: block; }
.wask-hero-banner__heading { transition: color 0.2s ease; }
.wask-hero-blog-link:hover .wask-hero-banner__heading { color: #ffffff !important; }

/* Comments area — override browser defaults */
.comments-area a,
.comments-area a:visited {
  color: rgb(var(--color-foreground));
  text-underline-offset: 0.3rem;
}

/* =============================================
   HEADER SEARCH
============================================= */

/* Desktop: wide inline search bar */
.wask-header-search {
  display: flex;
  align-items: center;
  border: 0.1rem solid rgba(var(--color-foreground), 0.3);
  border-radius: 4rem;
  overflow: hidden;
  height: 3.6rem;
  width: 45rem;
}

.wask-header-search:focus-within {
  border-color: rgb(var(--color-foreground));
}

.wask-header-search-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0 1.5rem;
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
  outline: none;
  min-width: 0;
}

.wask-header-search-input::placeholder {
  color: rgba(var(--color-foreground), 0.5);
}

.wask-header-search-submit {
  background: none;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  padding: 0 1rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wask-header-search-submit .icon { height: 1.6rem; width: 1.6rem; }
.wask-header-search-submit:hover { opacity: 0.7; }

/* Mobile: hide the wide bar, show icon button */
.wask-search-mobile-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  padding: 0.4rem;
  align-items: center;
  justify-content: center;
}

.wask-search-mobile-btn .icon { height: 2rem; width: 2rem; }

/* Mobile search dropdown */
.wask-search-dropdown {
  background: rgb(var(--color-background));
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
  padding: 1.2rem 0;
}

.wask-search-dropdown .wask-header-search {
  width: 100%;
  border-radius: 4rem;
}

@media screen and (max-width: 989px) {
  .header__icons .wask-header-search { display: none; }
  .wask-search-mobile-btn { display: flex; }
  .wask-search-dropdown .wask-header-search { display: flex; width: 100%; }
}

/* =============================================
   COMMENTS
============================================= */

.comments-title {
  font-size: calc(var(--font-heading-scale) * 2rem);
  margin-bottom: 3rem;
}

/* Comment list */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
}

.comment-list .children {
  list-style: none;
  padding-left: 2rem;
  margin-top: 1rem;
}

@media screen and (min-width: 750px) {
  .comment-list .children { padding-left: 4rem; }
}

.comment-body {
  padding: 2rem 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.comment-list > li:last-child > .comment-body,
.children > li:last-child > .comment-body {
  border-bottom: none;
}

/* Comment meta: avatar left spanning both rows,
   name top-right, date bottom-right */
.comment-meta {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 1.2rem;
  align-items: start;
  margin-bottom: 1.2rem;
}

/* Dissolve vcard wrapper so its children join the parent grid */
.comment-author.vcard {
  display: contents;
}

.comment-author .avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
}

.comment-author .fn {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.5rem;
  line-height: 1.4;
  padding-top: 0.4rem;
  font-style: normal;
}

.comment-author .fn a,
.comment-author .fn a:visited {
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.comment-author .fn a:hover { text-decoration: underline; }

/* Hide "says:" */
.comment-author .says { display: none; }

.comment-metadata {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.2rem;
  opacity: 0.65;
}

.comment-metadata a,
.comment-metadata a:visited {
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.comment-metadata a:hover { text-decoration: underline; }

.comment-content {
  font-size: 1.5rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  margin-bottom: 1rem;
}

.comment-content a,
.comment-content a:visited {
  color: rgb(var(--color-foreground));
  text-underline-offset: 0.3rem;
}

.comment-content p { margin: 0 0 1rem; }
.comment-content p:last-child { margin-bottom: 0; }

.reply { margin-top: 0.8rem; }

.comment-reply-link {
  font-size: 1.3rem;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.comment-reply-link:hover { opacity: 0.7; }

.bypostauthor > .comment-body { background: rgba(var(--color-foreground), 0.03); padding: 2rem; border-radius: 0.4rem; }

/* Comment navigation */
.comment-navigation,
.comments-pagination {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
  font-size: 1.4rem;
}

.comment-navigation a,
.comments-pagination a {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* Comment form — AJAX submission feedback */
.wask-comment-success {
  padding: 2.5rem;
  background: rgba(var(--color-foreground), 0.04);
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
  border-radius: 1.2rem;
}

.wask-comment-success__heading {
  font-family: var(--font-heading-family);
  font-size: 1.8rem;
  color: rgb(var(--color-foreground));
  margin: 0 0 0.8rem;
}

.wask-comment-success__note {
  font-size: 1.3rem;
  opacity: 0.7;
  margin: 0;
}

.wask-comment-error {
  font-size: 1.4rem;
  color: #b94040;
  padding: 1rem 0;
  margin: 0 0 1.5rem;
}

/* Comment form */
.comment-respond {
  margin-top: 4rem;
  padding-top: 0;
}

.comment-reply-title {
  font-size: calc(var(--font-heading-scale) * 2rem);
  margin-bottom: 2rem;
}

.comment-reply-title small {
  font-size: 1.3rem;
  font-family: var(--font-body-family);
  font-weight: 400;
  margin-left: 1rem;
}

.comment-reply-title small a,
.comment-reply-title small a:visited {
  color: rgb(var(--color-foreground));
}

.comment-form label {
  display: block;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: transparent;
  border: 0.1rem solid rgba(var(--color-foreground), 0.3);
  border-radius: 1.2rem;
  padding: 1rem 1.5rem;
  font-family: var(--font-body-family);
  font-size: 1.5rem;
  color: rgb(var(--color-foreground));
  outline: none;
  display: block;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: rgb(var(--color-foreground));
}

.comment-form textarea { min-height: 14rem; resize: vertical; }

.comment-form p { margin-bottom: 1.5rem; }

.comment-form .form-submit { margin-top: 2rem; }

.comment-form input[type="submit"] {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border: none;
  border-radius: 4rem;
  padding: 1.2rem 3rem;
  font-family: var(--font-body-family);
  font-size: 1.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.comment-form input[type="submit"]:hover { opacity: 0.85; }

.comment-form .comment-notes {
  font-size: 1.3rem;
  opacity: 0.7;
  margin-bottom: 2rem;
}

.no-comments {
  font-style: italic;
  opacity: 0.7;
}

/* Tags */
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.entry-tag {
  display: inline-block;
  font-size: 1.2rem;
  padding: 0.3rem 1.1rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.35);
  border-radius: 4rem;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  transition: background 0.15s ease, color 0.15s ease;
}

.entry-tag:visited { color: rgb(var(--color-foreground)); }

.entry-tag:hover {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-foreground));
}

/* Archive page header */
.page-header { margin-bottom: 4rem; }
.page-header .page-title {
  font-size: calc(var(--font-heading-scale) * 2.8rem);
  margin: 0 0 0.8rem;
}
.archive-description { color: rgb(var(--color-foreground)); font-size: 1.5rem; }

/* WordPress admin bar: push sticky header down */
.admin-bar .section-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .section-header { top: 46px; }
}