/*
Theme Name: Astra Child - MatchKit UAE
Template: astra
Version: 1.6
Description: Child theme carrying the Matchtrojan.se visual identity (Source Sans typography, marquee topbar, black navbar, square CTAs, dark-overlay banners, social-proof band) into the UAE WooCommerce store.
*/

/* ==========================================================================
   Design tokens — taken from the live matchtrojan.se theme settings
   ========================================================================== */
:root {
    --mj-ink: #111;
    --mj-black: #000;
    --mj-off-white: #fffffa;
    --mj-body: #000;
    --mj-muted: #666;
    --mj-line: #e0e0e0;
    --mj-accent: #ee0c0c;   /* hero CTA red */
    --mj-star: #ffd700;
    --mj-container: 1140px;
    --mj-font: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body,
.mj-home,
.mj-home h1,
.mj-home h2,
.mj-home h3 {
    font-family: var(--mj-font);
}

/* ==========================================================================
   Front page: let the template control full-width sections by removing
   Astra's constrained container ONLY on the homepage. Inner content is
   re-centred by .mj-wrap, so nothing needs negative margins or 100vw.
   ========================================================================== */
/* Astra makes .ast-container a max-width:1240px flex column. On the homepage
   the template owns the layout, so neutralise it outright — !important here is
   deliberate: several Astra rules carry higher specificity than any sane
   child-theme selector, and this must not depend on winning that race. */
body.home #content > .ast-container {
    display: block !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.home #primary,
body.home .site-main {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: none;
}

.mj-home {
    width: 100%;
    max-width: 100%;
    /* clip (not hidden) so a stray wide child can never widen the document
       and push the centred content off to the left */
    overflow-x: clip;
}

/* Guard: if anything on the homepage is still wider than the viewport, the
   document grows and every centred block drifts left with white space on the
   right. Confining it to .home keeps sticky/overflow behaviour intact elsewhere. */
body.home {
    overflow-x: hidden;
}

.mj-wrap {
    max-width: var(--mj-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.mj-section {
    padding-top: 48px;
    padding-bottom: 8px;
}

.mj-heading {
    text-align: center;
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--mj-ink);
}

.mj-heading__text {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 26px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mj-muted);
}

.mj-center {
    text-align: center;
    margin-top: 24px;
}

/* ==========================================================================
   Marquee topbar — scrolling black bar above the navbar
   ========================================================================== */
.mj-marquee {
    background: var(--mj-ink);
    color: #fff;
    height: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mj-marquee__track {
    display: flex;
    white-space: nowrap;
    animation: mj-marquee-scroll 28s linear infinite;
}
.mj-marquee__content {
    flex-shrink: 0;
}
@keyframes mj-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .mj-marquee__track { animation: none; }
}

/* ==========================================================================
   Navbar — black background, white text/icons
   ========================================================================== */
.ast-primary-header,
.main-header-bar,
.ast-above-header,
.ast-mobile-header-wrap,
.ast-desktop .main-header-menu > .menu-item > .sub-menu {
    background-color: var(--mj-ink) !important;
}
.ast-primary-header a,
.main-header-bar .menu-item a,
.main-header-bar .site-title a,
.ast-mobile-header-wrap a,
.ast-desktop .main-header-menu .menu-item a {
    color: #fff !important;
}
.ast-primary-header svg,
.ast-mobile-header-wrap svg,
.ast-header-search svg,
.astra-cart-drawer-icon svg,
.ast-icon svg {
    fill: #fff !important;
    color: #fff !important;
}

/* ==========================================================================
   Buttons — square corners for shop actions, pills for marketing CTAs
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.ast-button,
.wp-block-button__link,
button.ast-custom-button {
    background-color: var(--mj-black) !important;
    color: var(--mj-off-white) !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 13px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.ast-button:hover,
.wp-block-button__link:hover {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

.mj-pill {
    display: inline-block;
    margin: 6px 8px;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mj-pill--dark {
    background: var(--mj-ink);
    color: #fff;
}
.mj-pill--light {
    background: #fff;
    color: var(--mj-ink);
    border: 1px solid #ddd;
}
.mj-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    color: inherit;
}
.mj-pill--dark:hover { color: #fff; }

/* ==========================================================================
   Hero — full-width image band with dark overlay and centred content
   ========================================================================== */
.mj-hero {
    min-height: 600px;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
}
.mj-hero__inner {
    max-width: 720px;
}
.mj-hero__title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #fff;
}
.mj-hero__desc {
    font-size: clamp(15px, 2vw, 19px);
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.9);
}
.mj-hero__cta {
    display: inline-block;
    background: var(--mj-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    padding: 15px 34px;
    border-radius: 0;
    transition: background 0.15s ease;
}
.mj-hero__cta:hover {
    background: #c50a0a;
    color: #fff;
}
@media (max-width: 767px) {
    .mj-hero { min-height: 400px; }
}

/* ==========================================================================
   USP row — four columns with icons
   ========================================================================== */
.mj-usp {
    background: #f7f7f7;
    padding: 34px 0;
    border-bottom: 1px solid var(--mj-line);
}
.mj-usp__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.mj-usp__icon {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    fill: none;
    stroke: var(--mj-ink);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mj-usp__title {
    margin: 0 0 3px;
    font-weight: 700;
    font-size: 14px;
    color: var(--mj-ink);
    line-height: 1.35;
}
.mj-usp__desc {
    margin: 0;
    font-size: 13px;
    color: var(--mj-muted);
}
.mj-usp__desc a { color: var(--mj-ink); }
@media (max-width: 780px) {
    .mj-usp__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* ==========================================================================
   Intro card — light gradient panel with headline, text and pill links
   ========================================================================== */
.mj-intro {
    background: linear-gradient(135deg, #f8f8f8, #eeeeee);
    padding: 35px 20px;
    border-radius: 14px;
    margin: 25px 0;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.mj-intro__title {
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--mj-ink);
    line-height: 1.3;
}
.mj-intro__text {
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto 18px;
    color: #444;
}

/* ==========================================================================
   Category banners — image with dark overlay and centred uppercase label
   ========================================================================== */
.mj-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 8px 0 4px;
}
.mj-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background-color: #333;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    padding: 20px;
    box-sizing: border-box;
}
.mj-banner__text {
    color: #fff;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}
.mj-banner:hover .mj-banner__text {
    text-decoration: underline;
}
@media (max-width: 680px) {
    .mj-banners { grid-template-columns: 1fr; }
    .mj-banner { min-height: 180px; }
}

/* ==========================================================================
   Season text block — clamped copy with a read-more toggle
   ========================================================================== */
.mj-season {
    max-width: 900px;
    margin: 28px auto 0;
}
.mj-season__title {
    font-size: clamp(18px, 2.2vw, 20px);
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--mj-ink);
    line-height: 1.3;
}
.mj-season__text {
    position: relative;
    max-height: 52px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.mj-season__text.is-expanded {
    max-height: 400px;
}
.mj-season__text:not(.is-expanded)::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}
.mj-season__text p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--mj-muted);
    margin: 0;
}
.mj-season__text strong {
    color: #333;
    font-weight: 600;
}
.mj-season__toggle {
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    color: var(--mj-ink);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.7;
}
.mj-season__toggle:hover { opacity: 1; }

/* ==========================================================================
   Product grid — 4 per row desktop, 2 per row mobile (matches col-md-3 col-6)
   ========================================================================== */
/* Astra ships a global `.ast-container .woocommerce ul.products` grid rule with
   higher specificity, so the column count is forced here. minmax(0,1fr) keeps
   the tracks from being widened by the 300px thumbnails. */
.mj-home .woocommerce ul.products,
.mj-home ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 26px 20px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.mj-home .woocommerce ul.products::before,
.mj-home .woocommerce ul.products::after {
    display: none !important;
}
.mj-home .woocommerce ul.products li.product,
.mj-home ul.products li.product {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;          /* lets the grid track shrink below the image's intrinsic width */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    text-align: center;
}
.mj-home ul.products li.product img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}
.mj-home ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 !important;
    margin: 0 0 6px;
    color: var(--mj-ink);
}
.mj-home ul.products li.product .price {
    font-size: 15px !important;
    font-weight: 700;
    color: var(--mj-ink);
    display: block;
    margin-bottom: 10px;
}
.mj-home ul.products li.product .price del {
    font-weight: 400;
    opacity: 0.55;
    margin-right: 6px;
}
@media (max-width: 900px) {
    .mj-home .woocommerce ul.products,
    .mj-home ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   Social proof — big number, small label, gold stars
   ========================================================================== */
.mj-social-proof {
    background: var(--mj-ink);
    color: #fff;
    padding: 48px 16px;
    text-align: center;
    margin: 48px 0 0;
    width: 100%;
    box-sizing: border-box;
}
.mj-social-proof__inner {
    max-width: 500px;
    margin: 0 auto;
}
.mj-social-proof__number {
    font-size: clamp(40px, 12vw, 64px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
}
.mj-social-proof__label {
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 600;
    margin: 8px 0 16px;
    opacity: 0.65;
    text-transform: uppercase;
}
.mj-social-proof__stars {
    font-size: 24px;
    color: var(--mj-star);
    letter-spacing: 4px;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.mj-faq {
    max-width: 820px;
    margin: 0 auto;
}
.mj-faq details {
    border-bottom: 1px solid var(--mj-line);
    padding: 16px 0;
}
.mj-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    list-style: none;
    color: var(--mj-ink);
}
.mj-faq summary::-webkit-details-marker { display: none; }
.mj-faq summary::after {
    content: "+";
    float: right;
    font-weight: 700;
}
.mj-faq details[open] summary::after { content: "\2212"; }
.mj-faq__content {
    padding-top: 10px;
    color: #444;
    line-height: 1.65;
    font-size: 15px;
}

/* ==========================================================================
   About block
   ========================================================================== */
.mj-about {
    padding-bottom: 56px;
}
.mj-about p {
    max-width: 820px;
    margin: 0 auto 14px;
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mj-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.mj-footer {
    background: var(--mj-black);
    color: #ccc;
    padding: 40px 20px 24px;
    text-align: center;
}
.mj-footer__inner {
    max-width: 640px;
    margin: 0 auto;
}
.mj-footer__about {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--mj-off-white);
}
.mj-footer__links,
.mj-footer__social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.mj-footer__links a,
.mj-footer__social a {
    color: var(--mj-off-white);
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mj-footer__links a:hover,
.mj-footer__social a:hover { text-decoration: underline; }
.mj-footer__payments {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}
.mj-footer__copyright {
    font-size: 12px;
    color: #777;
    margin: 0;
}

/* ==========================================================================
   Blog section on the homepage — 4 cards per row (matches col-md-3 on the SE site)
   ========================================================================== */
.mj-blog__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
}
.mj-blog-card {
    min-width: 0;
}
.mj-blog-card__image {
    display: block;
    margin-bottom: 14px;
}
.mj-blog-card__image img {
    width: 100%;
    height: auto;
    display: block;
}
.mj-blog-card__date {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mj-muted);
}
.mj-blog-card__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}
.mj-blog-card__title a {
    color: var(--mj-ink);
    text-decoration: none;
}
.mj-blog-card__title a:hover {
    text-decoration: underline;
}
.mj-blog-card__excerpt {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mj-muted);
}
.mj-blog-card__more {
    font-size: 14px;
    font-weight: 700;
    color: var(--mj-ink);
    text-decoration: none;
}
.mj-blog-card__more:hover {
    text-decoration: underline;
}
@media (max-width: 900px) {
    .mj-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .mj-blog__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog — featured image and size table inside articles
   ========================================================================== */
.mj-post-figure {
    margin: 0 0 28px;
}
.mj-post-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.mj-table-wrap {
    overflow-x: auto;
    margin: 20px 0 24px;
}
.mj-size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.mj-size-table th,
.mj-size-table td {
    border: 1px solid var(--mj-line);
    padding: 10px 14px;
    text-align: left;
}
.mj-size-table th {
    background: #f7f7f7;
    font-weight: 600;
}

/* ==========================================================================
   Product page — Specification tab table + FAQ accordion (size guide)
   ========================================================================== */
.mj-spec-table table {
    width: 100%;
    border-collapse: collapse;
}
.mj-spec-table th,
.mj-spec-table td {
    border: 1px solid var(--mj-line);
    padding: 10px 14px;
    text-align: left;
}
.mj-spec-table th {
    width: 40%;
    background: #f7f7f7;
    font-weight: 600;
}
.woocommerce-Tabs-panel details.size-guide {
    border-bottom: 1px solid var(--mj-line);
    padding: 12px 0;
}
.woocommerce-Tabs-panel details.size-guide summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.woocommerce-Tabs-panel details.size-guide summary::-webkit-details-marker { display: none; }
.woocommerce-Tabs-panel details.size-guide summary::after {
    content: "+";
    float: right;
    font-weight: 700;
}
.woocommerce-Tabs-panel details.size-guide[open] summary::after { content: "\2212"; }
.woocommerce-Tabs-panel details.size-guide .size-content {
    padding-top: 8px;
    color: #444;
}