/* ==========================================================================
   OstuGrupp — page-level templates
   404 · search results · content page · sidebar · search form · comments.
   Builds on the design tokens from main.css (slate + green, Space Grotesk +
   DM Sans). Self-enqueued from inc/widgets.php.
   ========================================================================== */

/* ---- Reusable search form ---- */
.ostu-searchform {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-width: 520px;
}
.ostu-searchform:focus-within { border-color: rgba(5,150,105,.55); box-shadow: 0 0 0 3px rgba(5,150,105,.12); }
.ostu-searchform__input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 13px 16px;
  font: inherit;
  color: var(--fg);
  outline: none;
  min-width: 0;
}
.ostu-searchform__btn {
  background: var(--green);
  color: #fff;
  border: 0;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 700;
  transition: background .2s ease;
}
.ostu-searchform__btn:hover { background: var(--green-dark); }
/* Holds the shared magnifier SVG now (it used to be a "→" text glyph). */
.ostu-searchform__btn { display: inline-flex; align-items: center; justify-content: center; }
.ostu-searchform__btn svg { display: block; }

/* ==========================================================================
   404 — "Lehte ei leitud"
   ========================================================================== */
.error-404__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.error-404__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 16vw, 140px);
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--slate-dark) 0%, var(--green) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--slate-dark);
  margin: 6px 0 4px;
}
.error-404__title {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 14px;
}
.error-404__lead {
  color: var(--slate-600);
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 26px;
}
.error-404__search {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.error-404__search .ostu-searchform { width: 100%; }
.error-404__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
}
.error-404__links { border-top: 1px solid var(--border); padding-top: 28px; }
.error-404__links-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--slate-500);
  margin-bottom: 14px;
}
.error-404__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.error-404__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--slate);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.error-404__chips a:hover {
  border-color: rgba(5,150,105,.5);
  color: var(--green);
  transform: translateY(-2px);
}

/* ==========================================================================
   Search results
   ========================================================================== */
.search-results__header { margin-bottom: 26px; }
.search-results__title {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 8px;
}
.search-results__term { color: var(--green); }
.search-results__count {
  color: var(--slate-500);
  font-size: 14px;
  font-weight: 600;
}

/* Results grid: the shared .post-grid is 2-col from 375px, but mixed
   product/post result cards carry a long title + price + a full "Vaata toodet"
   button — far too cramped in a ~155px column on a phone. Force a single column
   on phones, then step up to 2 (tablet) and 3 (desktop) as width allows. */
.search-results__grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .search-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .search-results__grid { grid-template-columns: repeat(3, 1fr); } }

.search-result { display: flex; flex-direction: column; }
.search-result__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--muted);
  overflow: hidden;
}
.search-result__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.search-result:hover .search-result__media img { transform: scale(1.04); }
.search-result__body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.search-result__type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
}
.search-result__title { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.search-result__title a:hover { color: var(--green); }
.search-result__excerpt { color: var(--slate-600); font-size: 14px; line-height: 1.6; }
.search-result__price.price {
  color: var(--slate-dark);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.search-result__price .price del { color: var(--slate-500); font-weight: 500; opacity: .7; margin-right: 6px; }
.search-result__price ins { text-decoration: none; color: var(--green-dark); }
.search-result__more {
  margin-top: auto;
  font-weight: 600;
  color: var(--green);
  font-size: 14px;
}
.search-result__more:hover { color: var(--green-dark); }
.search-result__btn { margin-top: auto; align-self: flex-start; }

/* empty state */
.search-empty { max-width: 640px; margin-inline: auto; }
.search-empty__inner { padding: 40px 28px; text-align: center; }
.search-empty__title { font-size: 24px; margin-bottom: 10px; }
.search-empty__text {
  color: var(--slate-600);
  font-size: 16px;
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 22px;
}
.search-empty__form { display: flex; justify-content: center; margin-bottom: 22px; }
.search-empty__form .ostu-searchform { width: 100%; }

/* Numbered pagination (the_posts_pagination on the search page).
   blog.css owns the .blog-pagination variant but only loads on blog contexts;
   pages.css loads on search, so the search results need their own on-brand
   numbered pagination here. Mirrors the blog look (44px tappable cells). */
.search-results__pagination { margin-top: 48px; }
.search-results__pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.search-results__pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--slate);
  font-weight: 600; box-shadow: var(--shadow-card); transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.search-results__pagination a.page-numbers:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.search-results__pagination .page-numbers.current { background: var(--green); color: #fff; border-color: var(--green); box-shadow: var(--shadow-green); }
.search-results__pagination .page-numbers.dots { border: 0; box-shadow: none; background: transparent; min-width: 0; padding: 0 4px; }

/* ==========================================================================
   Content page (page.php)
   ========================================================================== */
.page-wrap { display: block; }
.page-wrap.has-sidebar { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1000px) {
  .page-wrap.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

.page-article { max-width: 760px; }
.page-wrap:not(.has-sidebar) .page-article { margin-inline: auto; }

.page-breadcrumb {
  font-size: 13px;
  color: var(--slate-500);
  margin-bottom: 14px;
}
.page-breadcrumb a { color: var(--slate-500); }
.page-breadcrumb a:hover { color: var(--green); }
.page-breadcrumb .sep { margin: 0 6px; color: var(--slate-300); }
.page-breadcrumb__current { color: var(--slate); font-weight: 600; }

.page-article__title { font-size: clamp(30px, 4.5vw, 44px); margin-bottom: 22px; }
.page-article__media { margin: 0 0 28px; }
.page-article__image { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* readable typography for body copy */
.page-article__content {
  color: var(--slate);
  font-size: 17px;
  line-height: 1.8;
}
.page-article__content > * + * { margin-top: 1.1em; }
.page-article__content h2 {
  font-size: 26px;
  margin-top: 1.6em;
  padding-top: .2em;
}
.page-article__content h3 { font-size: 21px; margin-top: 1.4em; }
.page-article__content h4 { font-size: 18px; margin-top: 1.3em; }
.page-article__content p { color: var(--slate); }
.page-article__content a:not(.wp-block-button__link) { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.page-article__content a:not(.wp-block-button__link):hover { color: var(--green); }
.page-article__content ul,
.page-article__content ol { padding-left: 1.4em; }
.page-article__content ul { list-style: disc; }
.page-article__content ol { list-style: decimal; }
.page-article__content li { margin: .4em 0; }
.page-article__content li::marker { color: var(--green); }
.page-article__content blockquote {
  border-left: 4px solid var(--green);
  background: var(--muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 20px;
  color: var(--slate-dark);
  font-style: italic;
}
.page-article__content img { border-radius: var(--radius); margin-block: .6em; }
.page-article__content hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.page-article__content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15px;
}
.page-article__content th,
.page-article__content td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.page-article__content th { background: var(--muted); color: var(--slate-dark); font-weight: 700; }
/* Classic (non-block) tables can't scroll a wrapper, so let the table itself
   scroll on phones rather than overflow the page or squash unreadably. */
@media (max-width: 600px) {
  .page-article__content > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
.page-article__content code {
  background: var(--muted);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .9em;
}

.page-links { margin-top: 1.6em; font-weight: 600; display: flex; gap: 8px; flex-wrap: wrap; }
.page-links a, .page-links > span { border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; }
.page-article__edit { margin-top: 24px; font-size: 13px; }
.page-article__edit a { color: var(--green); }

/* ==========================================================================
   Shop sidebar (sidebar.php) + widgets
   ========================================================================== */
.shop-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.shop-widget {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.shop-widget__title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate-dark);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--muted);
}
.shop-widget ul { display: flex; flex-direction: column; gap: 2px; }
.shop-widget li { font-size: 14px; }
.shop-widget li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--slate);
  font-weight: 500;
  transition: background .2s ease, color .2s ease;
}
.shop-widget li a:hover { background: var(--muted); color: var(--green); }
.shop-widget .count { color: var(--slate-500); font-size: 12px; font-weight: 600; }
.shop-widget select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font: inherit;
  color: var(--slate);
}

/* ==========================================================================
   Comments
   Scoped to non-blog templates (body:not(.single-post)) so these rules do not
   bleed onto blog single posts, where blog.css owns the comment styling.
   ========================================================================== */
body:not(.single-post) .comments-area {
  max-width: 760px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
body:not(.single-post) .comments-area__title { font-size: 22px; margin-bottom: 22px; }
body:not(.single-post) .comment-list { display: flex; flex-direction: column; gap: 18px; }
body:not(.single-post) .comment-list ol.children { list-style: none; padding-left: 24px; margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
body:not(.single-post) .comment-body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
body:not(.single-post) .comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
body:not(.single-post) .comment-author .avatar { border-radius: 50%; }
body:not(.single-post) .comment-author .fn { font-family: var(--font-display); font-weight: 700; color: var(--slate-dark); font-style: normal; }
body:not(.single-post) .comment-author .says { display: none; }
body:not(.single-post) .comment-meta { font-size: 12.5px; color: var(--slate-500); }
body:not(.single-post) .comment-meta a { color: var(--slate-500); }
body:not(.single-post) .comment-meta a:hover { color: var(--green); }
body:not(.single-post) .comment-content { color: var(--slate); line-height: 1.7; }
body:not(.single-post) .comment-content > * + * { margin-top: .8em; }
body:not(.single-post) .reply { margin-top: 10px; }
body:not(.single-post) .comment-reply-link {
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  transition: border-color .2s ease, background .2s ease;
}
body:not(.single-post) .comment-reply-link:hover { border-color: rgba(5,150,105,.5); background: var(--muted); }
body:not(.single-post) .comments-area__closed { color: var(--slate-500); font-style: italic; }

/* comment form */
body:not(.single-post) .comment-respond { margin-top: 36px; }
body:not(.single-post) .comment-reply-title { font-size: 20px; margin-bottom: 8px; }
body:not(.single-post) .comment-notes { color: var(--slate-500); font-size: 13.5px; margin-bottom: 18px; }
body:not(.single-post) .comment-form { display: flex; flex-direction: column; gap: 16px; }
body:not(.single-post) .comment-form p { margin: 0; }
body:not(.single-post) .comment-form label { display: block; font-weight: 600; color: var(--slate); margin-bottom: 6px; }
body:not(.single-post) .comment-form .required { color: var(--green); }
body:not(.single-post) .comment-form input[type="text"],
body:not(.single-post) .comment-form input[type="email"],
body:not(.single-post) .comment-form input[type="url"],
body:not(.single-post) .comment-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: inherit;
  background: #fff;
  color: var(--fg);
  transition: border-color .2s ease, box-shadow .2s ease;
}
body:not(.single-post) .comment-form input:focus,
body:not(.single-post) .comment-form textarea:focus {
  outline: none;
  border-color: rgba(5,150,105,.55);
  box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
body:not(.single-post) .comment-form-author,
body:not(.single-post) .comment-form-email { display: inline-block; width: 100%; }
@media (min-width: 600px) {
  body:not(.single-post) .comment-form-author,
  body:not(.single-post) .comment-form-email { width: calc(50% - 8px); }
  body:not(.single-post) .comment-form-author { margin-right: 16px; }
}
body:not(.single-post) .comment-form .form-submit { margin-top: 4px; }
body:not(.single-post) .comment-form .form-submit .submit { cursor: pointer; }
/* Phones: tighten nested-reply indent so threads stay readable. */
@media (max-width: 480px) {
  body:not(.single-post) .comment-list ol.children { padding-left: 14px; }
  body:not(.single-post) .comment-body { padding: 16px 16px; }
}

/* ==========================================================================
   Gutenberg blocks (scoped to .page-article__content / .entry-content)
   On-brand styling for core blocks + wide/full alignment. All rules stay
   scoped to the page content wrappers — no bare global .wp-block-* selectors —
   and reuse the :root tokens so dark mode inherits.
   ========================================================================== */

/* ---- Button block ---- */
/* The content-link rule above excludes .wp-block-button__link, so style it here. */
.page-article__content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  background: var(--green);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-green);
  transition: background .2s;
}
.page-article__content .wp-block-button__link:hover { background: var(--green-dark); }
.page-article__content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--green-dark);
  box-shadow: inset 0 0 0 2px var(--green);
}

/* ---- Wide / full alignment (break out of the 760px measure) ---- */
.page-article__content .alignwide { max-width: 1100px; margin-inline: auto; }
.page-article__content .alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* In the 2-column sidebar layout the article isn't viewport-centered, so the
   100vw full-bleed math would bleed asymmetrically — constrain wide/full there. */
.page-wrap.has-sidebar .page-article__content .alignfull,
.page-wrap.has-sidebar .page-article__content .alignwide {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ---- Columns ---- */
.page-article__content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.page-article__content .wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; }
.page-article__content .wp-block-columns > .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
/* Stack columns on phones (mirrors core's <782px behaviour) — min-width:0 lets
   them shrink side-by-side and squash, so force full-width below 600px. */
@media (max-width: 600px) {
  .page-article__content .wp-block-columns:not(.is-not-stacked-on-mobile) { display: block; }
  .page-article__content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
  .page-article__content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column { margin-top: 24px; }
}

/* ---- Group / Cover ---- */
.page-article__content .wp-block-group.has-background,
.page-article__content .wp-block-cover {
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--radius-lg);
}
.page-article__content .wp-block-cover { overflow: hidden; }

/* ---- Media & Text ---- */
.page-article__content .wp-block-media-text {
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}
.page-article__content .wp-block-media-text .wp-block-media-text__media img { border-radius: var(--radius); }

/* ---- Table ---- */
/* The .wp-block-table figure scrolls horizontally so a wide table never
   overflows the page or gets squished on a 375px phone. */
.page-article__content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-article__content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15px;
}
.page-article__content .wp-block-table th,
.page-article__content .wp-block-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.page-article__content .wp-block-table th { background: var(--muted); color: var(--slate-dark); font-weight: 700; }
.page-article__content .wp-block-table figcaption { margin-top: 8px; font-size: 13px; color: var(--slate-500); }

/* ---- Quote / Pullquote ---- */
.page-article__content .wp-block-quote,
.page-article__content .wp-block-pullquote {
  border-left: 4px solid var(--green);
  padding: 14px 20px;
  color: var(--slate-dark);
  font-style: italic;
}
.page-article__content .wp-block-quote cite,
.page-article__content .wp-block-pullquote cite { display: block; margin-top: 8px; font-size: 14px; color: var(--slate-500); font-style: normal; }

/* ---- Separator ---- */
.page-article__content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--border);
  max-width: 100%;
}
.page-article__content .wp-block-separator.is-style-dots {
  border-top: 0;
  text-align: center;
  line-height: 1;
  color: var(--border);
}

/* ---- Image / figcaption ---- */
.page-article__content .wp-block-image figcaption { margin-top: 8px; font-size: 13px; color: var(--slate-500); text-align: center; }

/* ---- Gallery ---- */
.page-article__content .wp-block-gallery { gap: 12px; }