/* ---------------------------------------------------------------------------
   Aero Lube — default templates: page, single post, archive, search, 404.
   Uses the theme's design tokens: navy #041C36 / #062A50, blue #1268B3,
   amber #E7B364, text #42546B, borders #E3E8EF, Manrope + IBM Plex Mono.
   The hero reuses the brand page hero (.al-brandhero-*).
   --------------------------------------------------------------------------- */

/* hero */
.al-page-hero { padding-bottom: clamp(48px, 5.6vw, 76px) }
.al-page-hero .al-brandhero-reveal-a { max-width: 22ch }
.al-page-hero-text { max-width: 60ch; margin: clamp(18px, 2vw, 24px) 0 0; font-size: clamp(16.5px, 1.6vw, 18.5px); line-height: 1.65; color: rgba(255, 255, 255, .78) }
.al-page-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: clamp(20px, 2.2vw, 28px); font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .14em; color: #72C5F4 }
.al-page-hero-meta a { color: inherit }
.al-page-hero-meta a:hover { color: #fff }

/* body sections */
.al-page-body { background: #fff; padding: clamp(48px, 5.6vw, 86px) clamp(20px, 4vw, 48px) }
.al-page-body-alt { background: #F5F7FA }
.al-page-narrow { max-width: 860px; margin: 0 auto }
.al-page-wide { max-width: 1360px; margin: 0 auto }

/* editor content */
.al-entry { font-size: clamp(16.5px, 1.6vw, 18px); line-height: 1.75; color: #42546B }
.al-entry > * { margin-top: 0; margin-bottom: 1.15em }
.al-entry > *:last-child { margin-bottom: 0 }
.al-entry h2, .al-entry h3, .al-entry h4 { color: #062A50; font-weight: 700; letter-spacing: -.025em; line-height: 1.2 }
.al-entry h2 { margin-top: 1.9em; font-size: clamp(24px, 2.6vw, 32px) }
.al-entry h3 { margin-top: 1.6em; font-size: clamp(20px, 2vw, 24px) }
.al-entry h4 { margin-top: 1.4em; font-size: 18px }
.al-entry > h2:first-child, .al-entry > h3:first-child { margin-top: 0 }
.al-entry a { color: #1268B3; text-decoration: underline; text-underline-offset: 3px }
.al-entry a:hover { color: #062A50 }
.al-entry strong { color: #062A50 }
.al-entry ul, .al-entry ol { padding-left: 1.3em }
.al-entry li { margin-bottom: .45em }
.al-entry li::marker { color: #1268B3 }
.al-entry blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px clamp(18px, 2.4vw, 28px); border-left: 2px solid #E7B364; color: #062A50; font-size: 1.08em }
.al-entry img, .al-entry figure { max-width: 100%; height: auto; border-radius: 10px }
.al-entry figure { margin-left: 0; margin-right: 0 }
.al-entry figcaption { margin-top: 10px; font-size: 14px; color: #8C9BAD }
.al-entry hr { border: 0; border-top: 1px solid #E3E8EF; margin: 2.2em 0 }
.al-entry table { width: 100%; border-collapse: collapse; font-size: 15.5px }
.al-entry th, .al-entry td { padding: 12px 14px; border-bottom: 1px solid #E3E8EF; text-align: left; vertical-align: top }
.al-entry th { color: #062A50; font-weight: 700; background: #F5F7FA }
.al-entry .page-links { display: flex; gap: 8px; flex-wrap: wrap; font-weight: 600 }

/* featured image of a post */
.al-post-figure { margin: 0 0 clamp(32px, 4vw, 48px); border-radius: 12px; overflow: hidden; background: #F4F7FA }
.al-post-figure img { display: block; width: 100%; height: auto }

/* tags + prev / next */
.al-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 4vw, 44px); padding-top: 24px; border-top: 1px solid #E3E8EF }
.al-post-tags a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid #DCE3EB; border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .1em; color: #1268B3; text-decoration: none; transition: border-color .3s ease, color .3s ease }
.al-post-tags a:hover { border-color: #1268B3; color: #062A50 }
.al-post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 4.4vw, 56px) }
.al-post-nav a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff; border: 1px solid #E3E8EF; border-radius: 6px; text-decoration: none; transition: border-color .35s ease, transform .35s ease }
.al-post-nav a:hover { border-color: #1268B3; transform: translateY(-2px) }
.al-post-nav span { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .14em; color: #1268B3 }
.al-post-nav strong { font-size: 16px; line-height: 1.35; color: #062A50 }
.al-post-nav .al-post-nav-next { text-align: right; grid-column: 2 }

/* toolbar: result count + search */
.al-list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3vw, 36px) }
.al-list-count { font-size: 15px; color: #5A6C82 }

/* post cards */
.al-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 22px) }
.al-post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3E8EF; border-radius: 4px; overflow: hidden; text-decoration: none; transition: border-color .35s ease, box-shadow .4s ease, transform .4s ease }
.al-post-card:hover { border-color: #1268B3; box-shadow: 0 22px 44px -28px rgba(6, 42, 80, .3); transform: translateY(-4px) }
.al-post-card-img { aspect-ratio: 16 / 10; background: #F4F7FA center / cover no-repeat; display: grid; place-items: center }
.al-post-card-img svg { width: 42px; height: 42px; color: #B6C3D2 }
.al-post-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: clamp(18px, 2vw, 24px) }
.al-post-card-meta { display: flex; align-items: center; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .14em; color: #1268B3 }
.al-post-card-meta i { display: block; width: 16px; height: 1px; background: #E7B364 }
.al-post-card-title { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; color: #062A50 }
.al-post-card-text { margin: 0; font-size: 15px; line-height: 1.6; color: #5A6C82 }
.al-post-card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 700; color: #1268B3 }
.al-post-card:hover .al-post-card-more { color: #062A50 }

/* pagination */
.al-pagination { margin-top: clamp(32px, 4vw, 48px) }
.al-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.al-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #DCE3EB; border-radius: 8px; background: #fff; color: #062A50; font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .3s ease, color .3s ease }
.al-pagination a.page-numbers:hover { border-color: #1268B3; color: #1268B3 }
.al-pagination .page-numbers.current { background: #1268B3; border-color: #1268B3; color: #fff }
.al-pagination .page-numbers.dots { border-color: transparent; background: none }
.al-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* empty state + 404 */
.al-empty { padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 40px); text-align: center; background: #fff; border: 1px solid #E3E8EF; border-radius: 6px }
.al-empty h2 { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; color: #062A50 }
.al-empty p { margin: 0 auto 24px; max-width: 52ch; font-size: 16px; line-height: 1.65; color: #5A6C82 }
.al-empty [data-psearch] { margin: 0 auto }
.al-404-code { display: block; font-size: clamp(88px, 14vw, 180px); line-height: .9; letter-spacing: -.06em; font-weight: 800; color: #fff; opacity: .14; margin-bottom: clamp(10px, 1.4vw, 18px) }
.al-404-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 36px) }
.al-404-actions .al-404-ghost { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 15px 30px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 10px; color: #fff; font-size: 15px; font-weight: 700; transition: background .35s ease, color .35s ease }
.al-404-actions .al-404-ghost:hover { background: #fff; color: #062A50 }
.al-404-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px }
.al-404-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; background: #fff; border: 1px solid #E3E8EF; border-radius: 6px; font-size: 16px; font-weight: 700; color: #062A50; text-decoration: none; transition: border-color .35s ease, transform .35s ease }
.al-404-links a:hover { border-color: #1268B3; transform: translateY(-2px) }
.al-404-links a span { font-family: 'IBM Plex Mono', monospace; color: #1268B3 }

/* search form (searchform.php) */
.al-search-form[data-psearch] button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: #8C9BAD }
.al-search-form[data-psearch] button svg { position: static; transform: none }
.al-search-form[data-psearch] button:hover { color: #1268B3 }

@media (max-width: 1024px) { .al-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) {
	.al-post-grid { grid-template-columns: 1fr }
	.al-post-nav { grid-template-columns: 1fr }
	.al-post-nav .al-post-nav-next { grid-column: auto; text-align: left }
}

/* comments (comments.php inside single.php) */
.al-comments { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid #E3E8EF; font-family: inherit; color: #42546B }
.al-comments .comments-area { max-width: none; margin: 0; padding: 0; border: 0; background: none }
.al-comments h2, .al-comments .comments-title, .al-comments .comment-reply-title { margin: 0 0 22px; font-family: inherit; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.03em; color: #062A50 }
.al-comments .comment-list { list-style: none; margin: 0 0 clamp(32px, 4vw, 44px); padding: 0 }
.al-comments .comment-list .children { list-style: none; margin: 0; padding-left: clamp(18px, 3vw, 40px) }
.al-comments .comment-body { position: relative; margin: 0 0 14px; padding: clamp(18px, 2vw, 24px); background: #F5F7FA; border: 1px solid #E3E8EF; border-radius: 6px }
.al-comments .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 12px }
.al-comments .comment-author { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: #062A50 }
.al-comments .comment-author .avatar { position: static; width: 40px; height: 40px; border-radius: 50% }
.al-comments .comment-author .says { display: none }
.al-comments .comment-author a, .al-comments .comment-author .fn { color: #062A50; text-decoration: none; font-size: 16px }
.al-comments .comment-metadata, .al-comments .comment-metadata a { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .1em; color: #8C9BAD; text-decoration: none }
.al-comments .comment-content { font-size: 16px; line-height: 1.7; padding: 0 }
.al-comments .comment-content p { margin: 0 0 .8em }
.al-comments .comment-content a, .al-comments .logged-in-as a { color: #1268B3 }
.al-comments .reply { margin-top: 8px }
.al-comments .reply a, .al-comments .comment-edit-link { font-size: 14.5px; font-weight: 700; color: #1268B3; text-decoration: none }
.al-comments .comment-form p { margin: 0 0 16px }
.al-comments .comment-form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #062A50 }
.al-comments .comment-form input[type="text"], .al-comments .comment-form input[type="email"], .al-comments .comment-form input[type="url"], .al-comments .comment-form textarea { width: 100%; padding: 14px 16px; border: 1px solid #DCE3EB; border-radius: 10px; background: #fff; font: inherit; font-size: 15.5px; color: #062A50; outline: none }
.al-comments .comment-form input:focus, .al-comments .comment-form textarea:focus { border-color: #1268B3; box-shadow: 0 0 0 3px rgba(18, 104, 179, .14) }
.al-comments .comment-form .submit { min-height: 52px; padding: 15px 30px; border: 0; border-radius: 10px; background: #1268B3; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .35s ease }
.al-comments .comment-form .submit:hover { background: #0E528F }
.al-comments .comment-notes, .al-comments .logged-in-as, .al-comments .comment-form-cookies-consent label { font-size: 14px; font-weight: 400; color: #5A6C82 }
.al-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px }
.al-comments .comment-form-cookies-consent label { display: inline; margin: 0 }

/* WooCommerce pages (brand / category pages, cart, checkout) load woocommerce-layout.css, whose
   ".woocommerce img, .woocommerce-page img { max-width: 100% }" shrinks the header and footer logos
   to the width of their link and pushes the visible part of the (cropped, square) logo out of view. */
.woocommerce header img.al-hdr-block-a, .woocommerce-page header img.al-hdr-block-a,
.woocommerce footer img.al-ftr-block, .woocommerce-page footer img.al-ftr-block { max-width: none }