/*
 * Tineke theme stylesheet — installed to public/_themes/expodom/tineke-theme/
 * by `bin/console sylius:theme:assets:install` and linked from
 * templates/shop/stylesheets.html.twig (theme override).
 */

/* Homepage CMS collection (templates/shop/homepage/cms_collection.html.twig)
   follows the Sylius homepage section rhythm — vendor sections are
   `.container.mb-6` (5rem) with an `h2.mb-5` (3rem) heading, while the CMS
   content elements ship with small plugin defaults (mb-3/mb-4). Elements act
   as sections: 5rem apart, heading elements sit 3rem above their section,
   and the last element drops its margin (the wrapper container carries the
   final mb-6). Collection-rendered blocks emit their elements without the
   .cms-block wrapper, so elements are direct children here. !important is
   needed to beat Bootstrap's mb-* utilities. */
.cms-collection > [class*="cms_content_element__"] {
    margin-bottom: 5rem !important;
}

.cms-collection > .cms_content_element__heading,
.cms-collection > .cms_content_element__aligned-heading {
    margin-bottom: 3rem !important;
}

/* The heading tag inside keeps no own margin — the wrapper carries it,
   matching the vendor h2.mb-5 gap exactly. */
.cms-collection > .cms_content_element__heading > :first-child,
.cms-collection > .cms_content_element__aligned-heading > :first-child {
    margin-bottom: 0;
}

/* `of S` instead of plain :last-child: authored HTML may trail a <style> or
   <script> sibling after the last visible element, which would otherwise keep
   the last content element's 5rem margin and double the gap to the next
   section. */
.cms-collection > [class*="cms_content_element__"]:nth-last-child(1 of [class*="cms_content_element__"]) {
    margin-bottom: 0 !important;
}

/* CMS page detail (vendor shop/page/show/content/body/header.html.twig):
   the h1 ships with mb-3 (1rem) — widen the gap to the content below to
   3rem, matching the homepage heading rhythm above, and add 1.5rem on top
   to separate it from the breadcrumbs. !important beats the Bootstrap
   mb-3 utility (margin-top has no utility to beat, kept for symmetry). */
.cms-page-title {
    margin-top: 1.5rem !important;
    margin-bottom: 3rem !important;
}

/* Product gallery (theme overrides of product/show .../overview/images/*):
   main photo capped in height (letterboxed on the light background, never
   cropped), thumbnail tiles wrap below it — fixed square tiles. */
.tineke-product-main-image {
    max-height: 40rem;
}

.tineke-product-thumbs > div {
    width: 12rem;
}

.tineke-product-thumbs a {
    aspect-ratio: 1 / 1;
}

/* Top nav (theme override of .../header/navbar/menu/item/toggle.html.twig):
   the parent taxon name is a real link, the chevron next to it is a separate
   Bootstrap dropdown toggle button — link and caret sit side by side. Below
   lg the dropdown-menu is static/full-width (vendor _nav.scss), flex-wrap
   lets it break onto its own row inside the offcanvas. */
.navbar .nav-item.dropdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.navbar .tineke-dropdown-caret {
    background: none;
    border: 0;
}

/* Hover opens the dropdown only on hover-capable devices at the desktop
   layout; touch keeps the chevron click-toggle, which also gives keyboard
   users access (Enter on the focused chevron — a :focus-within rule here
   would fight Bootstrap's outside-click close, the button keeps focus).
   margin-top: 0 kills the hover gap between the link and the menu so it
   doesn't flicker. */
@media (min-width: 992px) and (hover: hover) {
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        /* Bootstrap positions the menu via Popper only on click-toggle; when
           opened by CSS alone it has no top/left, so pin it below the item. */
        top: 100%;
        left: 0;
        margin-top: 0;
    }
}

/* Footer link columns rendered from a CMS block (templates/shop/footer/menu.html.twig):
   the block's textarea content elements are the columns, their Trix-authored
   markup (heading + ul of links) is restyled to match the Bootstrap footer nav. */
.tineke-footer-menu .cms-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    column-gap: 1.5rem;
}

/* Trix's only heading level is h1 — scale it down to a column title. */
.tineke-footer-menu h1,
.tineke-footer-menu h2,
.tineke-footer-menu h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.tineke-footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tineke-footer-menu li {
    margin-bottom: 0.25rem;
}

.tineke-footer-menu a {
    display: inline-block;
    padding: 0.25rem 0;
    color: var(--bs-body-color);
    text-decoration: none;
}

.tineke-footer-menu a:hover {
    color: var(--bs-link-hover-color);
}

/* Payment icons rendered from a CMS block (the footer payment_methods theme
   override): a multiple_media content element stacks one div per medium, so the
   element wrapper becomes the icon row. Alignment mirrors the column's own
   text-center / text-md-start / text-lg-center classes, which flex ignores. */
.tineke-footer-payment .cms_content_element__multiple-media {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .tineke-footer-payment .cms_content_element__multiple-media {
        justify-content: flex-start;
    }
}

@media (min-width: 992px) {
    .tineke-footer-payment .cms_content_element__multiple-media {
        justify-content: center;
    }
}

/* The plugin gives every content element mb-3 — the wrapper's mb-4 carries the
   gap to the social row instead. !important beats the Bootstrap utility. */
.tineke-footer-payment [class*="cms_content_element__"]:last-child {
    margin-bottom: 0 !important;
}

/* Icons ship as .img-fluid (max-width: 100%; height: auto) — cap the height and
   let the width follow so mixed-size uploads line up. 1.375rem keeps them in the
   21-25px band the vendor footer's own logo strip renders at. */
.tineke-footer-payment .cms_content_element__multiple-media img {
    height: 1.375rem;
    width: auto;
    max-width: none;
}