/*
Theme Name: modual Portal
Theme URI: https://modual.ch
Author: modual AG
Author URI: https://modual.ch
Description: WordPress-Theme für portal.modual.ch und configurator.modual.ch. App-Interface für das modual Installateurportal und den B2C-Konfigurator.
Version: 1.4.1
Requires at least: 6.0
Requires PHP: 8.1
License: Proprietary
Text Domain: modual-portal
*/

/* All design tokens (colours, type, spacing, radii, shadows, motion) live in
   assets/css/tokens.css, enqueued before this file. This stylesheet only
   adds theme-local layout and base resets. */

:root {
    /* Theme-only layout helpers (not part of the core token set) */
    --container-max: 1200px;
    --container-pad: var(--sp-5);
}

/* (Tokens previously defined here moved to assets/css/tokens.css.) */

/* =========================================================================
   Reset & Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg-1);
    color: var(--fg-1);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--fg-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--blue-700); }

/* =========================================================================
   Typography
   ========================================================================= */
h1, .h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--tr-h1);
    margin: 0;
}
h2, .h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
    margin: 0;
}
h3, .h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin: 0;
}
h4, .h4 {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    margin: 0;
}
p { margin: 0; }

.eyebrow {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--fs-eyebrow);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--fg-2);
    margin: 0;
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.small   { font-size: var(--fs-small);   line-height: var(--lh-small); }

/* =========================================================================
   Layout
   ========================================================================= */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
    padding-top: var(--header-height);
}

.site-main--iframe {
    padding-top: 0;
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 12px 22px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-medium);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--dur-micro) var(--ease-out),
        color var(--dur-micro) var(--ease-out),
        border-color var(--dur-micro) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-700); color: var(--white); text-decoration: none; }

.btn--accent { background: var(--yellow); color: var(--grey-900); }
.btn--accent:hover { background: var(--yellow-700); text-decoration: none; }

.btn--secondary { background: var(--white); color: var(--grey-900); border-color: var(--grey-300); }
.btn--secondary:hover { border-color: var(--grey-700); text-decoration: none; }

.btn--ghost { background: transparent; color: var(--grey-900); }
.btn--ghost:hover { background: var(--grey-50); text-decoration: none; }

.btn--lg { padding: 16px 28px; font-size: var(--fs-body-lg); }
.btn--sm { padding: 8px 14px; font-size: var(--fs-small); }

/* =========================================================================
   Cards
   ========================================================================= */
.card {
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    transition:
        border-color var(--dur-state) var(--ease-out),
        box-shadow var(--dur-state) var(--ease-out);
}
.card:hover { border-color: var(--blue); box-shadow: var(--shadow-2); }
.card--blue   { background: var(--blue);     color: var(--fg-on-blue);   border-color: transparent; }
.card--yellow { background: var(--yellow);   color: var(--fg-on-yellow); border-color: transparent; }
.card--dark   { background: var(--grey-900); color: var(--fg-on-dark);   border-color: transparent; }

/* =========================================================================
   Forms
   ========================================================================= */
.field {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--fg-1);
    background: var(--white);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.field:hover { border-color: var(--border-2); }
.field:focus { outline: none; border-color: var(--blue); box-shadow: var(--shadow-focus); }
.field::placeholder { color: var(--fg-3); }

.label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
}

/* =========================================================================
   Badges
   ========================================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    background: var(--grey-100);
    color: var(--grey-800);
}
.badge--blue   { background: var(--blue);     color: var(--white); }
.badge--yellow { background: var(--yellow);   color: var(--grey-900); }
.badge--dark   { background: var(--grey-900); color: var(--white); }

/* =========================================================================
   Dividers
   ========================================================================= */
.divider { height: 1px; background: var(--border-1); border: 0; margin: var(--sp-7) 0; }
.divider--yellow { background: var(--yellow); height: 4px; width: 56px; margin: var(--sp-5) 0; border: 0; }
.divider--blue   { background: var(--blue);   height: 4px; width: 56px; margin: var(--sp-5) 0; border: 0; }

/* =========================================================================
   WP admin bar offset
   ========================================================================= */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}