/*
 * Typography and header behaviour, matched to dct-delta.de. Values were read out of
 * the browser at 1440px on both sites, not from the stylesheet: the reference uses
 * clamp().
 */

/* h1 only: h2/h3 on the product page are held by the WPCode snippet "Product Detailed
 * View" (id 2340) with !important, and a half-landing rule looks worse than none. */
h1,
.wp-block-post-title,
.product_title {
    font-size: clamp(30px, 2.61vw, 50px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: normal;
    margin-bottom: 24px;
}

/* The mega menu carries its own typography in Max Mega Menu's theme editor. Only the
 * WordPress navigation beside it needs a rule: the block can be given a size, but not
 * a weight — the theme writes `a { font-weight: 300 }`, which beats what the block
 * puts on its container. */
header .wp-block-navigation .wp-block-navigation-item a {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}

header .wp-block-navigation .wp-block-navigation-item a:is(:hover, :focus) {
    color: #03c7ff;
    text-decoration: none;
}

/* The one value the mega menu cannot carry: its "Content Font" offers colour, size and
 * family, no weight, so the panel links would fall back to the theme's 300. */
#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 .mega-sub-menu a {
    font-weight: 400;
}

/* Hover: a 2px bar grows under the item, as on the reference. Positioned from the
 * text rather than the box, because the mega menu link is as tall as the menu bar. */
header .wp-block-navigation .wp-block-navigation-item a,
#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 > li.mega-menu-item > a.mega-menu-link {
    position: relative;
}

header .wp-block-navigation .wp-block-navigation-item a::after,
#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 > li.mega-menu-item > a.mega-menu-link::after {
    content: "";
    display: block;   /* Max Mega Menu hides ::after on links without a submenu arrow */
    position: absolute;
    left: 0;
    top: calc(50% + 0.75em);
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s ease-in-out;
}

header .wp-block-navigation .wp-block-navigation-item a:is(:hover, :focus)::after,
#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 > li.mega-menu-item > a.mega-menu-link:hover::after {
    width: 100%;
}

/* Current item. The doubled class is WordPress's own: core ships
 * `.wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }`.
 * "Produkte" is a custom, non-linking item (mega-disable-link) that WordPress never
 * marks current, so it takes its colour from the page type instead. */
header .wp-block-navigation :is(.current-menu-item, .current-menu-ancestor) > a.wp-block-navigation-item__content.wp-block-navigation-item__content,
#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 > li:is(.mega-current-menu-item, .mega-current-menu-ancestor) > a.mega-menu-link,
body:is(.single-product, .tax-product_cat, .tax-product_tag, .post-type-archive-product) #mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 > li.mega-menu-megamenu > a.mega-menu-link {
    color: #03c7ff;
}

/* Separate rule: a browser without :has() discards the whole selector list it is in. */
#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 > li.mega-menu-megamenu:has(.current-menu-item, .current-menu-ancestor, .current-product-ancestor, .current-product-parent) > a.mega-menu-link {
    color: #03c7ff;
}

/*
 * Header icons: 25px and 24px apart as on the reference. The colour itself is not set
 * here — it belongs to the blocks, where it can be picked in the editor.
 */
header :is(.wc-block-mini-cart__button,
           .wp-block-woocommerce-customer-account,
           .wp-block-woocommerce-customer-account a,
           .wp-block-search__button) {
    padding: 0;
    background: none;
    text-decoration: none;
    transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;
}

/* Named individually rather than through the parents: WooCommerce sizes its own icons
 * with two-class selectors that a `:is(…) svg` cannot outweigh. */
header .wc-block-mini-cart__button .wc-block-mini-cart__icon,
header .wp-block-woocommerce-customer-account .wc-block-customer-account__account-icon,
header .wp-block-search__button svg {
    width: 25px;
    height: 25px;
}

/*
 * Accent colour on hover. Three icons, three mechanisms, all decided by how the block
 * renders its SVG:
 *   cart     writes its colour onto the paths, so the paths have to be addressed
 *   account  paths use fill="currentColor", but the block pins that colour with
 *            !important, so the override needs one too
 *   search   inherits plainly
 */
header .wc-block-mini-cart__button .wc-block-mini-cart__icon path {
    transition: fill 0.2s ease-in-out;   /* the path fades, not the button around it */
}

header .wc-block-mini-cart__button:hover .wc-block-mini-cart__icon path {
    fill: #03c7ff;
}

header .wp-block-woocommerce-customer-account:hover,
header .wp-block-woocommerce-customer-account:hover a {
    color: #03c7ff !important;
    text-decoration: none;
}

header .wp-block-search__button:hover {
    color: #03c7ff !important;   /* same preset-colour !important as the account block */
}

/* Currency switcher: it was 150px wide with its text hard left, and rendered in Arial
 * because a select does not inherit the page font. Wide enough for "CH / CHF", the
 * longest of the two currencies actually sold. */
/* Placeholder and entered text centred in the search field. `text-align` alone centres
 * them in the input, which ends where the magnifier begins — visibly left of the
 * middle of the field. The left padding makes up for the button on the right. */
header .wp-block-search__input {
    text-align: center;
    padding-left: 40px;
    padding-right: 4px;
}

/*
 * Mobile. The search field is 500px wide by setting, and in a flex column a child does
 * not shrink below its own width, so the whole header measured 500px inside a 390px
 * window and the page scrolled sideways. min-width lets the columns shrink, max-width
 * keeps the field inside them.
 */
header .wp-block-search__inside-wrapper,
header .wp-block-search,
header .wp-block-columns,
header .wp-block-column,
header .wp-block-group {
    max-width: 100%;
    min-width: 0;
}

/*
 * Currency switcher. Not scoped to the header: it is the same control wherever it is
 * placed. `appearance: none` drops the native arrow, which is why the padding is
 * asymmetric — it used to leave room for a background image that was never set.
 */
select.wcpbc-country-switcher {
    appearance: none;
    -webkit-appearance: none;
    width: 108px;            /* fits "CH / CHF" */
    height: 26px;            /* the height of the white area of the search field */
    padding: 0 22px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 32px;     /* the shape of the search field */
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-family: inherit;    /* a select does not inherit the page font by itself */
    font-size: 15px;
    font-weight: 500;
    color: #1a202c;
    cursor: pointer;
    text-align: center;
    text-align-last: center;
}

header .wc-price-based-country {
    flex-shrink: 0;   /* narrower and "CH / CHF" is cut off; there is room on a phone */
}

/*
 * Each of the four category headings in the product panel carries its own logo, the same
 * drawing the front page shows on its cards. Keyed on the category URL and not on the
 * menu item id: the ids differ between the installations, the URLs do not.
 */
#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::after {
    content: "";
    display: inline-block;   /* the plugin hides ::after on links without a submenu arrow */
    vertical-align: middle;
    width: 36px;
    height: 36px;
    margin-left: 16px;
    border-radius: 50%;
    /* On white the line drawings all but disappear, so they sit on a light blue disc, as
     * the cards do. The file is the one the cards use, so it is cached. */
    background: #dde5ff no-repeat 50% 50% / 26px auto;
}

#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href$="/product-category/hfc-produkte/"]::after {
    background-image: url("/wp-content/uploads/2025/10/Logo-HFC_edit-300x288.png");
}

#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href$="/product-category/optische-systeme/"]::after {
    background-image: url("/wp-content/uploads/2025/10/Logo-Optische-Systeme_edit-300x288.png");
}

#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href$="/product-category/satellitenempfang/"]::after {
    background-image: url("/wp-content/uploads/2025/10/Logo-Sat_edit-300x288.png");
}

#mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href$="/product-category/systeme-loesungen/"]::after {
    background-image: url("/wp-content/uploads/2025/10/Logo-Systeme-und-Loesungen_edit-300x288.png");
}

/* Footer links are plain on dct-delta.de; the theme underlines every link by default,
 * and the block editor offers a link colour but no link decoration. */
footer a {
    text-decoration: none;
}

/* Mobile: the four columns stack, and what is a row on the desktop reads as a list on
 * a phone — dct-delta.de centres it there. Neither the alignment nor a spacer height
 * has a responsive setting in the editor, so both are rules here. 781px is the width
 * at which WordPress itself stacks the columns. */
@media (max-width: 781px) {
    footer .wp-block-columns {
        text-align: center;
    }

    footer .wp-block-navigation,
    footer .wp-block-navigation ul {
        align-items: center;   /* the legal menu is justified right for the desktop row */
    }

    footer .wp-block-spacer {
        height: 48px !important;   /* the block writes its 96px as an inline style */
    }
}

/* The one thing snippet "Header - Menu Product Submenu - CSS" (585) did that no
 * setting covers: Max Mega Menu styles the menu bar down to weight and transform,
 * but has no field for letter spacing. Same value as the navigation beside it. */
#mega-menu-max_mega_menu_7 > li > a.mega-menu-link {
    letter-spacing: 1.8px;
}

/* The mobile toggle reads "PRODUKTE" and sits next to HOME and KONTAKT, so it should
 * weigh the same. Max Mega Menu's toggle block offers size and colour, not weight or
 * letter spacing — these two values are the ones the navigation beside it uses. */
#mega-menu-wrap-max_mega_menu_7 .mega-menu-toggle .mega-toggle-block .mega-toggle-label {
    font-weight: 600;
    letter-spacing: 1.8px;
}

/* The plugin gives every toggle block a 6px side margin, which put "PRODUKTE" 30px
 * from "KONTAKT" where the navigation itself uses 24px. */
#mega-menu-wrap-max_mega_menu_7 .mega-menu-toggle .mega-toggle-blocks-left .mega-toggle-block {
    margin-left: 0;
}

/* And the accent colour in the catalogue, on the same page types as the menu bar
 * above — the toggle is a button of the plugin's, not a menu item, so the rule for
 * the bar does not reach it. */
body:is(.single-product, .tax-product_cat, .tax-product_tag, .post-type-archive-product)
    #mega-menu-wrap-max_mega_menu_7 .mega-menu-toggle .mega-toggle-label {
    color: #03c7ff;
}

/* Inside the open panel the plugin repeats "Produkte" as the row above the columns.
 * The toggle right above it already says so. Only below the breakpoint: above it the
 * very same element is the "PRODUKTE" entry of the menu bar. */
@media (max-width: 768px) {
    #mega-menu-wrap-max_mega_menu_7 #mega-menu-max_mega_menu_7 > li.mega-menu-megamenu > a.mega-menu-link {
        display: none;
    }
}

/* Back button in front of the breadcrumb: 49px circle in dark 1, 25px arrow, 12px to
 * the trail, as on dct-delta.de. */
.delta-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: none;   /* a plain div would be centred at the narrow content width */
    margin-inline: 0;
}

.delta-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 49px;   /* no padding: at content-box the circle would come out 73px */
    height: 49px;
    border-radius: 50%;
    background: #0a1428;
    color: #fff;
    transition: background 0.2s ease-in-out;
}

.delta-back:hover {
    background: #03c7ff;
}

.delta-back svg {
    transform: rotate(90deg);
}

/*
 * Category tiles on the shop front page. The four categories are placed there as a Max
 * Mega Menu location, so they arrive as a menu bar: items as wide as their text, 25px
 * titles, no tile. These rules make cards out of them, in the card language of
 * dct-delta.de — light blue, icon centred, title and accent arrow along the bottom.
 */
#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));   /* 4 across, 2 on a phone */
    gap: 24px;
    padding: 0;
}

#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 > li.mega-menu-item {
    display: block;
    width: auto;
    min-width: 0;   /* else the icon's own 300px sets the column width */
    margin: 0;
}

/* The link is the card. */
#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 > li.mega-menu-item > a.mega-menu-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;   /* with the ratio and no width, min-height would set the width */
    height: auto;
    aspect-ratio: 2 / 1;
    min-height: 140px;   /* on a 159px card the ratio alone leaves nothing for the icon */
    padding: 16px 24px;
    position: relative;   /* for the arrow in its corner */
    line-height: 1.3;
    background: #e9efff;
    border-radius: 10px;
    transition: background 0.2s ease-in-out;
}

#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 img.menu-image {
    display: block;
    flex: 0 0 auto;
    min-width: 0;   /* a flex child does not shrink below its own size without this */
    width: 100%;
    height: 72px;
    padding-bottom: 0;   /* the menu image plugin adds 10px below every image */
    object-fit: contain;
    object-position: 50% 100%;
}

#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 span.menu-image-title {
    display: block;
    /* The files carry 52 of their 288 rows empty below the drawing — 13px of the 72 above
     * — so this is 5px less than the gap that shows up: about 18px. */
    margin-top: 5px;
    text-align: center;
    font-size: clamp(15px, 1.4vw, 20px);   /* 20px as there, less on a 159px card */
    font-weight: 500;
    color: #0a1428;
}

/* The strip is the tab control for the product slider below it: hovering a category puts
 * its subcategories into the slider, and the class .focused marks the one on show
 * (snippet 509). Hover darkens the card, the selected one also carries an accent frame
 * and an accent title — otherwise nothing says which category the slider belongs to. */
#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 > li.mega-menu-item:hover > a.mega-menu-link {
    background: #dde5ff;
}

#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 > li.mega-menu-item.focused > a.mega-menu-link {
    background: #dde5ff;
}

#mega-menu-wrap-max_mega_menu_5 #mega-menu-max_mega_menu_5 > li.mega-menu-item.focused span.menu-image-title {
    color: #03c7ff;
}

/* Kept from snippet 795, which was otherwise only sizing this strip: the tabbed product
 * slider below brings a padding and a top margin of its own. */
.su-tabs-pane {
    padding: 0;
}

.metaslider.ms-theme-clarity .flexslider .slides li {
    margin-top: 0;
}