/* ─────────────────────────────────────────────
   ARPedia — front-end styles
   Inherits theme tokens: --primary, --primary-d, --accent, --accent-d,
   --black, --white, --dark-grey, --red, --green, --light.
   Theme uses html { font-size: 62.5% } so 1rem = 10px.
   ───────────────────────────────────────────── */

/* ── Card grid ─────────────────────────────── */
.arp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
    gap: 2.4rem;
    margin: 2.4rem 0;
}

.arp-card {
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border: 1px solid var(--light, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.arp-card:hover,
.arp-card:focus {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.arp-card:visited { color: inherit; }

.arp-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--light, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.arp-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arp-card-icon {
    font-size: 4.8rem;
    width: 4.8rem;
    height: 4.8rem;
    color: var(--dark-grey, #9ca3af);
}
.arp-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white, #fff);
    font-size: 4.2rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    background: rgba(0, 0, 0, .22);
    transition: background .2s ease;
}
.arp-card:hover .arp-card-play { background: rgba(0, 0, 0, .35); }

.arp-card-body {
    padding: 1.4rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.arp-card-type {
    display: inline-block;
    align-self: flex-start;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent, #0071a1);
    font-weight: 600;
    margin-bottom: .8rem;
    padding: .3rem .8rem;
    background: var(--light, #f3f4f6);
    border-radius: 3px;
}
.arp-card-title {
    margin: 0 0 .6rem;
    font-size: 1.7rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--black, #1f2937);
}
.arp-card-excerpt {
    margin: 0;
    color: var(--dark-grey, #6b7280);
    font-size: 1.4rem;
    line-height: 1.45;
}

/* ── Section headings on homepage ──────────── */
.arp-section {
    margin: 4rem 0;
}
.arp-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    margin: 0 0 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--light, #e5e7eb);
}
.arp-section-heading {
    font-size: 2.4rem;
    margin: 0;
    color: var(--black, #1f2937);
}
.arp-section-viewall {
    font-size: 1.4rem;
    color: var(--accent-d, #0071a1);
    text-decoration: none;
    white-space: nowrap;
}
.arp-section-viewall:hover { text-decoration: underline; }

.arp-section-empty {
    color: var(--dark-grey, #6b7280);
    font-style: italic;
    font-size: 1.4rem;
    margin: 0;
}

/* ── Filter bar ────────────────────────────── */
.arp-filter-bar {
    background: var(--white, #fff);
    border: 1px solid var(--light, #e5e7eb);
    border-radius: 6px;
    padding: 1.6rem 2rem;
    margin: 0 0 2.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}
.arp-filter-group {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 18rem;
}
.arp-filter-label {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--dark-grey, #6b7280);
    margin: 0;
}
.arp-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
}
.arp-filter-option {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.4rem;
    color: var(--black, #1f2937);
    cursor: pointer;
    user-select: none;
}
.arp-filter-option input[type="checkbox"],
.arp-filter-option input[type="radio"] {
    margin: 0;
    accent-color: var(--primary, #0071a1);
}
.arp-filter-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.arp-filter-actions .btn { padding: .8rem 1.6rem; font-size: 1.4rem; }
.arp-filter-clear {
    font-size: 1.3rem;
    color: var(--dark-grey, #6b7280);
    text-decoration: none;
}
.arp-filter-clear:hover { color: var(--accent-d, #0071a1); }

.arp-filter-summary {
    margin: 0 0 1.6rem;
    color: var(--dark-grey, #6b7280);
    font-size: 1.4rem;
}
.arp-filter-summary strong { color: var(--black, #1f2937); }

/* ── No results ────────────────────────────── */
.arp-no-results {
    background: var(--light, #f8f9fa);
    border: 1px dashed var(--light, #d6d6d6);
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 6px;
    color: var(--dark-grey, #6b7280);
    font-size: 1.5rem;
}

/* ── Single resource template ──────────────── */
.arp-single {
    max-width: 88rem;
    margin: 0 auto;
    padding: 3.2rem 2rem;
}
.arp-single h1 {
    margin: 0 0 1.6rem;
}
.arp-single .arp-card-type {
    margin-bottom: 1.2rem;
}
.arp-video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 0 2.4rem;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.arp-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.arp-pdf-download {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.8rem;
    background: var(--primary, #0071a1);
    color: var(--white, #fff) !important;
    border-radius: 4px;
    text-decoration: none;
    margin: .8rem 0 2.4rem;
    font-size: 1.5rem;
    transition: .3s;
}
.arp-pdf-download:hover {
    background: var(--primary-d, #005f88);
    color: var(--white, #fff) !important;
    transform: scale(1.02);
    text-decoration: none;
}
.arp-single-content {
    font-size: 1.6rem;
    line-height: 1.6;
}
.arp-single-content p { margin: 0 0 1.6rem; }

.arp-related-products,
.arp-related-resources {
    margin-top: 4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--light, #e5e7eb);
}
.arp-related-products h2,
.arp-related-resources h2 {
    font-size: 2rem;
    margin: 0 0 1.4rem;
}

.arp-product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.4rem;
}
.arp-product-card {
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border: 1px solid var(--light, #e5e7eb);
    border-radius: 6px;
    padding: 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.arp-product-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.arp-product-card img {
    width: 100%;
    height: 14rem;
    object-fit: contain;
    margin-bottom: .8rem;
}
.arp-product-card .sku {
    font-family: monospace;
    color: var(--accent-d, #0071a1);
    font-size: 1.2rem;
    font-weight: 600;
}
.arp-product-card .name {
    font-size: 1.3rem;
    color: var(--black, #1f2937);
}

/* ── Video modal ───────────────────────────── */
/* Mirrors the Find Your Part modal shell so the library matches the rest of the
   site (same backdrop + is-open transition). Self-contained — no dependency on
   FYP's stylesheet being loaded on resource pages. */
.arp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(16, 29, 73, .6); /* same backdrop as the theme mega menu */
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.arp-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.arp-modal {
    position: relative;
    width: 100%;
    max-width: 96rem;
    background: var(--white, #fff);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(16, 29, 73, .18);
}
.arp-modal-close {
    position: absolute;
    top: -4.4rem;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 3px;
    background: transparent;
    color: var(--white, #fff);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.arp-modal-close:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--white, #fff);
}
.arp-modal-close:focus-visible {
    outline: none;
    border-color: var(--accent, #01d9f2);
    box-shadow: 0 0 0 3px rgba(1, 217, 242, .25);
}
.arp-modal-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}
.arp-modal-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─────────────────────────────────────────────
   Blog-shell integration
   On ARPedia pages the plugin adds the theme's blog body classes
   (body.single-post / body.blog) and enqueues the theme blog CSS, so the
   wrappers below inherit the theme's typography, grid and spacing. These rules
   only add the ARPedia-specific extras that the plain blog doesn't have.
   ───────────────────────────────────────────── */

/* ── Blog-styled resource card extras ──────── */
/* Base card (.article.grid-item) is styled by the theme; we layer the type
   chip + video play badge onto its thumbnail. */
.arp-article-thumb { position: relative; background: var(--light, #f3f4f6); }
.arp-article-thumb a { position: relative; display: block; }
.arp-article-thumb a.arp-card-video { position: relative; display: block; overflow: hidden; }
.arp-article-thumb a.arp-card-video .arp-card-play { z-index: 1; }
.arp-article:hover .arp-card-play { background: rgba(0, 0, 0, .35); }
.arp-article-thumb a:has(.arp-card-icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.8 / 1;
}
.arp-article .arp-card-type {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    margin: 0;
}
.arp-article .read-more { color: var(--accent-d, #0071a1); font-weight: 600; }

/* ── Single resource: blog body, single column ── */
/* Matches a blog post: .pod-single-inner is the centred ~800px column from the
   theme. ARPedia extras sit in .post-footer below the content, full width. */
.arp-resource-single .post-meta { gap: 1.2rem; }
.arp-resource-single .arp-video-embed,
.arp-resource-single .featured-image { margin: 0 0 2.4rem; }

/* Match the theme article single's h1 size. Regular posts carry the
   body.post-template-default class, which the theme sizes at 3rem; ARPedia's
   body has arp_resource-template-default instead, so its h1 falls through to
   the generic 3.5rem heading. Pin it to 3rem so both titles render identically.
   Higher specificity than the generic h1 rule, so load order is irrelevant. */
.single-arp_resource .arp-resource-single .pod-single-inner h1 { font-size: 3rem; }

/* Match the theme article single's link colour. Regular posts get
   body.post-template-default a { color: var(--primary) } from the theme;
   ARPedia's body class isn't matched, so its links default to the base accent
   teal. Mirror the theme rule for ARPedia single pages. */
body.single-arp_resource a,
body.single-arp_resource span.article-meta-author a {
    color: var(--primary, #101d49);
}

/* Footer blocks stack with clear separation (the theme already gives
   .post-footer a top border + padding). */
.arp-resource-single .post-footer > section { margin: 0 0 4rem; }
.arp-resource-single .post-footer > section:last-child { margin-bottom: 0; }

/* Breadcrumb: full-width bar above the title, matching the theme's article
   single (single.php → .section.breadcrumb-woo.pod-single-breadcrumb). The
   theme's global.css supplies the divider/spacing/colours; these rules mirror
   it, scoped to ARPedia pages, so the look holds even if global.css changes. */
.single-arp_resource .section.breadcrumb-woo.pod-single-breadcrumb {
    border-bottom: 1px solid #d3d3d3;
    margin: 0 auto 30px;
}
.single-arp_resource .section.breadcrumb-woo.pod-single-breadcrumb .woocommerce-breadcrumb {
    margin: 10px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark-grey, #4a4a4a);
}
.single-arp_resource .section.breadcrumb-woo.pod-single-breadcrumb .woocommerce-breadcrumb a {
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--primary, #101d49); /* link text navy; separators/current stay dark-grey — matches the article */
    text-decoration: none;
}
.single-arp_resource .section.breadcrumb-woo.pod-single-breadcrumb .woocommerce-breadcrumb a:hover { text-decoration: underline; }
.single-arp_resource .arp-crumb-sep { margin: 0 .3rem; font-weight: 400; opacity: .55; }

/* ── Resource cards (theme blog article cards) ───────── */
/* Resource grids render the theme's template-parts/content-article.php so they
   match the blog 1:1. On blog-shell pages (archive, single resource — which carry
   body.blog / body.single-post) the theme's own .article styles apply. The
   product page has no blog body class, so for [arp_product_resources] we add
   .arp-resources--pdp and replicate the essential .article grid styling here,
   mirroring the theme's values. */
.arp-resources { margin: 3rem 0; }

.arp-resources--pdp .pod-blog-articles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.arp-resources--pdp .article {
    width: calc((100% - 60px) / 4);
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: var(--white, #fff);
    box-sizing: border-box;
}
.arp-resources--pdp .article-thumbnail img {
    width: 100%;
    aspect-ratio: 1.8 / 1;
    object-fit: cover;
    display: block;
}
.arp-resources--pdp .article-content { padding: 15px; }
.arp-resources--pdp .article-title { margin-bottom: 8px; font-size: 1.8rem; font-weight: 300; }
.arp-resources--pdp .article-title a { color: #000; text-decoration: none; }
.arp-resources--pdp .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 1.35rem;
    color: #666;
}
.arp-resources--pdp .article-excerpt {
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 10px;
}
.arp-resources--pdp .read-more { display: block; margin-bottom: 10px; color: #000; font-size: 1.35rem; }
.arp-resources--pdp .article-author { font-size: 1.35rem; color: #666; }
/* Resource category (plain links) + tag (#-chips) — mirrors the theme's blog
   card styling, replicated here because the PDP has no blog body class. */
.arp-resources--pdp .article-categories { margin-top: 10px; }
.arp-resources--pdp .article-categories a { color: var(--black, #1f2937); text-decoration: none; margin-right: 8px; }
.arp-resources--pdp .article-tags { margin-top: 10px; }
.arp-resources--pdp .article-tags a {
    display: inline-block;
    background: #f0f0f0;
    padding: 5px 10px;
    margin: 0 5px 5px 0;
    border-radius: 4px;
    font-size: 1.35rem;
    color: #000;
    text-decoration: none;
}
.arp-resources--pdp .article-tags a::before { content: "#"; opacity: .5; margin-right: 2px; }
@media (max-width: 1023px) { .arp-resources--pdp .article { width: calc((100% - 20px) / 2); } }
@media (max-width: 639px)  { .arp-resources--pdp .article { width: 100%; } }

/* Single page (no grey hero — like the theme article single): category links as
   a kicker above the title + tag chips below, in the content column. The theme's
   body.single-post .article-categories/.article-tags styling applies; we just set
   spacing and drop the theme float so they sit inline under the title. */
.arp-single-categories { margin: 0 0 .8rem; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; }
.arp-single-tags { margin: 1.2rem 0 0; }
.arp-single-tags a { float: none; display: inline-block; margin: 0 .5rem .5rem 0; }

/* Single resource: show the linked products 2-across (the theme's product grid
   is 3/4-up via fixed breakpoints, so override width for this block only). */
@media (min-width: 768px) {
    .arp-related-products ul.products li.product { width: calc((100% - 16px) / 2) !important; }
}


/* ── Previous engine models card ───────────── */
/* Matches .section.woocommerce-product-categories .box-list-item exactly.
   global.css applies border/shadow to .content; we replicate that here since
   that stylesheet is scoped to the theme's ACF section and not loaded on ARPedia pages. */
.arp-engine-cat-box { margin-bottom: 20px; }
.arp-engine-cat-box .box-list-item {
    width: 100%;
    max-width: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.arp-engine-cat-box .image-container { width: 100%; overflow: hidden; line-height: 0; }
.arp-engine-cat-box .image-container img { width: 100%; height: 160px; object-fit: cover; display: block; }
.arp-engine-cat-box .content {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    padding-right: 55px;
    flex-grow: 1;
    border-radius: 3px;
    border: 1px solid #dedede;
    box-shadow: rgba(0,0,0,.1) 0 10px 50px;
    color: var(--dark-grey, #555);
}
.arp-engine-cat-box .content h3 { margin: 0; font-size: 1.6rem; color: var(--primary); }
.arp-engine-cat-box .arrow-badge {
    background: var(--accent);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
}
.arp-engine-cat-box .arrow-badge svg { fill: var(--dark-grey, #555); width: 14px; height: 14px; }

/* ── Pagination chevrons ───────────────────── */
.pod-blog-pagination .prev.page-numbers,
.pod-blog-pagination .next.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    font-size: 0;
}
.pod-blog-pagination .prev.page-numbers {
    background-image: url(/wp-content/themes/great-white-v2/images/fontawesome/chevron-left.svg);
}
.pod-blog-pagination .next.page-numbers {
    background-image: url(/wp-content/themes/great-white-v2/images/fontawesome/chevron-right.svg);
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 640px) {
    .arp-filter-bar { flex-direction: column; gap: 1.4rem; }
    .arp-filter-actions { margin-left: 0; }
    .arp-section-header { flex-direction: column; gap: .6rem; align-items: flex-start; }
}