/**
 * Pencl — responsive styles.
 *
 * style.css is written for desktop. This file narrows it down, largest
 * breakpoint first. Breakpoints line up with the Bootstrap grid
 * (md 768px, lg 992px) plus the design's own 1050px collapse point.
 *
 *   1. Small desktop / tablet landscape  ≤ 1049px
 *   2. Tablet portrait                   ≤ 991px
 *   3. WordPress admin bar               ≤ 782px / ≤ 600px
 *   4. Large phone / small tablet        ≤ 767px
 *   5. Phone                             ≤ 575px
 */


/* ==========================================================================
   1. Small desktop / tablet landscape (≤ 1049px)
   The header switches to the hamburger menu and page gutters tighten.
   ========================================================================== */
@media (max-width: 1049.98px) {

	/* ---- Global ---- */
	:root {
		--pc-pad: 22px;
	}

	.band,
	.band--tint,
	.band--dark,
	.cta-band {
		padding: 64px 0;
	}

	/* ---- Global — Header: collapsible navigation panel ---- */
	.site-header__actions {
		order: 2;
		gap: 16px;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		display: none;
		order: 3;
		flex: 0 0 100%;
		margin-inline: calc(var(--pc-pad) * -1);
		padding-inline: var(--pc-pad);
		border-top: 1px solid var(--pc-line);
		background: #fff;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		display: block;
		padding: 10px 0 6px;
	}

	.site-nav__list a {
		padding: 11px 0;
		border-bottom: 1px solid #f4f1e8;
		font-size: 15px;
	}

	/* In the menu panel the active item gets a side bar instead of an underline. */
	.site-nav__list a::after {
		top: 10px;
		right: auto;
		bottom: 10px;
		left: calc(var(--pc-pad) * -1);
		width: 3px;
		height: auto;
		border-radius: 0 3px 3px 0;
		transform: scaleY(0);
	}

	.site-nav__list a:hover::after {
		transform: scaleY(0);
	}

	.site-nav__list .current-menu-item > a::after,
	.site-nav__list .current-menu-parent > a::after,
	.site-nav__list .current-menu-ancestor > a::after,
	.site-nav__list a[aria-current]::after {
		transform: scaleY(1);
	}

	.site-nav__list li:last-child a {
		border-bottom: 0;
	}

	/* ---- Homepage ---- */
	.hero {
		padding-bottom: 0;
	}

	.loop-band {
		padding: 30px 0 36px;
	}

	.card-grid {
		margin-top: calc(32px - var(--bs-gutter-y));
	}

	.columns-grid {
		margin-top: calc(40px - var(--bs-gutter-y));
	}

	/* ---- Quick Verdict: inputs above the verdict ---- */
	.qv {
		padding: 48px 0 72px;
	}

	.qv-card {
		grid-template-columns: 1fr;
	}

	/* ---- Blog Listing ---- */
	.blog-head {
		padding-bottom: 48px;
	}

	/* ---- Blog Detail ---- */
	.article-head {
		padding: 40px 0 44px;
	}

	.article-head.has-hero {
		padding-bottom: 128px;
	}

	.article-hero {
		margin-top: -96px;
	}

	/* ---- Blogs toolbar: search on top, categories scroll sideways underneath ---- */
	.blog-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 8px;
		border-radius: 22px;
	}

	.blog-search {
		flex: none;
		order: -1;
		min-width: 0;
	}

	.cat-filter {
		margin: 0 -8px -2px;
		padding: 0 8px;
	}

	/* ---- Legal & default pages ---- */
	.doc-head {
		padding-bottom: 44px;
	}

	.doc-band {
		padding-top: 48px;
	}
}

@media (max-width: 1049.98px) and (prefers-reduced-motion: no-preference) {
	.site-nav.is-open {
		animation: pcNavIn .2s ease both;
	}
}


/* ==========================================================================
   2. Tablet portrait (≤ 991px) — Bootstrap grids stack to 1–2 columns
   ========================================================================== */
@media (max-width: 991.98px) {

	/* ---- Homepage ---- */
	.verdict__head {
		gap: 28px 40px;
	}

	.founding__copy {
		flex-basis: 100%;
	}
}


/* ==========================================================================
   3. WordPress admin bar offsets for the sticky header
   ========================================================================== */
@media (max-width: 782px) {
	.admin-bar .site-header.is-sticky {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header.is-sticky {
		top: 0; /* the admin bar scrolls away on small screens */
	}
}


/* ==========================================================================
   4. Large phone / small tablet (≤ 767px)
   ========================================================================== */
@media (max-width: 767.98px) {

	/* ---- Homepage ---- */
	.verdict__ring,
	.verdict__ring svg {
		width: 168px;
		height: 168px;
	}

	.verdict__num {
		font-size: 44px;
	}

	.verdict__copy {
		text-align: center;
	}

	.article-hero {
		margin-bottom: 36px;
	}

	.prose--article {
		font-size: 18.5px;
		line-height: 1.68;
	}

	.share {
		flex-direction: column;
		align-items: flex-start;
	}

	/* ---- Legal & default pages ---- */
	.doc-body {
		padding: 36px 32px 40px;
	}
}


/* ==========================================================================
   5. Phone (≤ 575px)
   ========================================================================== */
@media (max-width: 575.98px) {

	/* ---- Global ---- */
	.band,
	.band--tint,
	.band--dark,
	.cta-band {
		padding: 56px 0;
	}

	.btn-row {
		gap: 16px 22px;
	}

	.section-intro {
		font-size: 19px;
	}

	/* ---- Global — Footer: stack brand above links ---- */
	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-block: 22px;
	}

	/* ---- Homepage ---- */
	.hero {
		padding-bottom: 0;
	}

	.hero__text {
		font-size: 16px;
	}

	.napkin {
		margin-top: 40px;
	}

	.loop-band {
		padding: 24px 0 30px;
	}

	.pc-card,
	.pc-card--tint {
		padding: 24px 22px;
	}

	.pc-card--list {
		padding: 26px 22px;
	}

	.founding {
		padding: 24px 22px;
	}

	.plan {
		padding: 30px 24px;
	}

	.plan__amount {
		font-size: 42px;
	}

	/* ---- Quick Verdict ---- */
	.qv-form {
		padding: 28px 22px 32px;
	}

	.qv-result {
		padding: 36px 22px 28px;
	}

	.qv-field__input {
		font-size: 18px;
	}

	/* ---- Blog Listing ---- */
	.blog-head {
		padding-bottom: 40px;
	}

	/* ---- Blog Detail ---- */
	.article-head {
		padding: 32px 0 36px;
	}

	.article-head.has-hero {
		padding-bottom: 88px;
	}

	.article-hero {
		margin-top: -64px;
	}

	.article-hero img {
		border-radius: 14px;
	}

	.article-meta {
		gap: 16px 0;
	}

	.article-meta > li {
		padding: 0 18px;
	}

	.article-meta > .article-meta__author {
		flex-basis: 100%;
		padding-left: 0;
	}

	.article-meta > .article-meta__author + li {
		padding-left: 0;
		border-left: 0;
	}

	.article-foot {
		padding-bottom: 56px;
	}


	/* ---- Blog cards (listing, archives, related posts) ---- */
	.post-card__body {
		padding: 22px 22px 24px;
	}

	.post-card__title {
		font-size: 20px;
	}

	/* ---- Legal & default pages ---- */
	.doc-head {
		padding-bottom: 36px;
	}

	.doc-band {
		padding-top: 32px;
	}

	.doc-body {
		padding: 28px 22px 32px;
		border-radius: 16px;
	}

	.doc-body {
		--doc-gap: 16px;
		font-size: 17px;
	}

	.doc-body h2 {
		font-size: 21px;
	}

	.doc-body h2:not(:first-child) {
		margin-top: 36px;
		padding-top: 28px;
	}

	/* ---- 404 ---- */
	.error-404 {
		padding: 56px 0;
	}

	.error-404__text {
		font-size: 18px;
	}
}