/* ==========================================================================
   Ice Vets – icevets.de
   Stylesheet of the static one-pager.

   Layout:
     1. Foundations            7. Content areas
     2. Typography             8. Utility classes
     3. App bar                9. Responsive adjustments
     4. Side drawer & overlay 10. Scrollbars
     5. Navigation            11. Footer
     6. Buttons & icons       12. Subpages

   Colors, font metrics, spacing and stacking levels (z-index) come from
   the CSS variables in css/theme.css (--iv-…). The drawer is
   driven by scripts/site.js via the state classes iv-drawer--open/
   --closed/--initial; below 960px it covers the content together with
   the overlay, from 960px on it pushes the app bar and content aside.
   ========================================================================== */


/* --- 1. Foundations ------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

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

body {
    margin: 0;
    font-family: var(--iv-typography-default-family);
    font-size: var(--iv-typography-default-size);
    font-weight: var(--iv-typography-default-weight);
    line-height: var(--iv-typography-default-lineheight);
    letter-spacing: var(--iv-typography-default-letterspacing);
    color: var(--iv-palette-text-primary);
    background-color: var(--iv-palette-background);
}

/* Links inherit the text color (e.g. the GOT link in the pricing section);
   individually styled links (navigation, contact buttons) set their own
   colors. */
a {
    color: inherit;
    text-decoration: none;
}

.iv-layout {
    position: relative;
}

/* Skip link for keyboard users: parked above the viewport, slides in on focus */
.iv-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: calc(var(--iv-zindex-appbar) + 1);
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--iv-palette-primary);
    font-weight: 500;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.iv-skip-link:focus {
    top: 12px;
}

/* Target of the skip link: focusable for the jump, but without a ring */
main:focus {
    outline: none;
}

/* Text for screen readers only (page heading of the one-pager) */
.iv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --- 2. Typography ------------------------------------------------------- */

.iv-typography {
    margin: 0;
}

.iv-typography-h1 {
    font-family: var(--iv-typography-h1-family);
    font-size: var(--iv-typography-h1-size);
    font-weight: var(--iv-typography-h1-weight);
    line-height: var(--iv-typography-h1-lineheight);
    letter-spacing: var(--iv-typography-h1-letterspacing);
    text-transform: var(--iv-typography-h1-text-transform);
}

.iv-typography-h2 {
    font-family: var(--iv-typography-h2-family);
    font-size: var(--iv-typography-h2-size);
    font-weight: var(--iv-typography-h2-weight);
    line-height: var(--iv-typography-h2-lineheight);
    letter-spacing: var(--iv-typography-h2-letterspacing);
    text-transform: var(--iv-typography-h2-text-transform);
}

.iv-typography-body1 {
    font-family: var(--iv-typography-body1-family);
    font-size: var(--iv-typography-body1-size);
    font-weight: var(--iv-typography-body1-weight);
    line-height: var(--iv-typography-body1-lineheight);
    letter-spacing: var(--iv-typography-body1-letterspacing);
    text-transform: var(--iv-typography-body1-text-transform);
}

.iv-typography-align-center {
    text-align: center;
}

.iv-primary-text {
    color: var(--iv-palette-primary);
}


/* --- 3. App bar ---------------------------------------------------------- */

.iv-appbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--iv-zindex-appbar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: var(--iv-appbar-height);
    color: var(--iv-palette-appbar-text);
    background-color: var(--iv-palette-appbar-background);
    transition: margin 225ms cubic-bezier(0, 0, 0.2, 1),
                width 225ms cubic-bezier(0, 0, 0.2, 1);
}

.iv-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--iv-appbar-height);
    padding: 0 24px;
}


/* --- 4. Side drawer & overlay -------------------------------------------- */

.iv-elevation-0 {
    box-shadow: none;
}

.iv-elevation-1 {
    box-shadow: var(--iv-elevation-1);
}

.iv-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--iv-zindex-drawer);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--iv-drawer-width-left);
    height: 100%;
    overflow: auto;
    color: var(--iv-palette-drawer-text);
    background-color: var(--iv-palette-drawer-background);
    transition: left 225ms cubic-bezier(0, 0, 0.2, 1),
                box-shadow 225ms cubic-bezier(0, 0, 0.2, 1);
}

.iv-drawer--closed {
    left: calc(-1 * var(--iv-drawer-width-left));
    box-shadow: none;
    /* Hidden once the slide-out has finished, so the off-screen links
       drop out of the tab order */
    visibility: hidden;
    transition: left 225ms cubic-bezier(0, 0, 0.2, 1),
                box-shadow 225ms cubic-bezier(0, 0, 0.2, 1),
                visibility 0s linear 225ms;
}

/* Initial state before the first interaction: no slide-in animation */
.iv-drawer--initial {
    transition: none;
}

.iv-drawer-content {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    height: 100%;
    max-height: 100%;
}

.iv-drawer-header {
    display: flex;
    min-height: 64px;
    padding: 12px 24px;
}

/* Dimming behind the mobile menu (inserted via JS) */
.iv-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--iv-zindex-appbar) + 1);
}

.iv-overlay-scrim {
    position: absolute;
    inset: 0;
    background-color: var(--iv-palette-overlay-dark);
    animation: iv-einblenden 150ms ease;
}

@keyframes iv-einblenden {
    from { opacity: 0; }
}


/* --- 5. Navigation ------------------------------------------------------- */

.iv-nav-item {
    display: flex;
    justify-content: flex-start;
}

a.iv-nav-link {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 8px 16px;
    overflow: hidden;
    line-height: 1.75;
    cursor: pointer;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

a.iv-nav-link:hover {
    background-color: var(--iv-palette-action-default-hover);
}

.iv-nav-link-text {
    margin-left: 12px;
    line-height: 1.75;
    letter-spacing: normal;
}

hr.iv-divider {
    flex: 1 0 auto;
    margin: 0;
    border: none;
    border-top: 1px solid var(--iv-palette-divider);
}


/* --- 6. Buttons & icons -------------------------------------------------- */

.iv-button-root {
    position: relative;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
    vertical-align: middle;
    overflow: hidden;
    outline: 0;
    cursor: pointer;
    user-select: none;
}

/* Text button (logo, phone, mail, social icons) */
.iv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 8px;
    border-radius: var(--iv-default-borderradius);
    font-family: var(--iv-typography-button-family);
    font-size: var(--iv-typography-button-size);
    font-weight: var(--iv-typography-button-weight);
    line-height: var(--iv-typography-button-lineheight);
    letter-spacing: var(--iv-typography-button-letterspacing);
    text-transform: var(--iv-typography-button-text-transform);
    color: var(--iv-palette-text-primary);
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Round icon button (menu button in the app bar) */
.iv-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 12px;
    border-radius: 50%;
    font-size: 1.5rem;
    letter-spacing: normal;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.iv-icon-button-edge-start {
    margin-left: -12px;
}

.iv-inherit-text {
    color: inherit;
}

.iv-button:hover,
.iv-icon-button:hover {
    background-color: var(--iv-palette-action-default-hover);
}

/* Pressed state as a plain darkening */
.iv-ripple:active {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Visible keyboard focus (mouse clicks stay ring-free via :focus-visible) */
.iv-button-root:focus-visible,
a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Drawer links span the full drawer width: draw the ring inside so the
   scroll container does not clip it */
a.iv-nav-link:focus-visible {
    outline-offset: -2px;
}

/* Footer links sit on the green footer: a white ring stays visible */
.iv-footer-nav a:focus-visible {
    outline-color: #fff;
}

/* Phone quick action on the right of the app bar */
.iv-appbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    color: inherit;
    font-weight: 500;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.16);
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.iv-appbar-phone:hover {
    background-color: rgba(255, 255, 255, 0.28);
}

.iv-appbar-phone svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

@media (max-width: 759.98px) {
    .iv-appbar-phone span { display: none; }
    .iv-appbar-phone { padding: 8px 11px; }
}

.iv-button-label,
.iv-icon-button-label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.iv-button-label {
    width: 100%;
}

.iv-svg-icon {
    display: block;
    flex-shrink: 0;
    fill: currentColor;
    user-select: none;
}

.iv-icon-size-medium {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

.iv-icon-size-large {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 2.25rem;
}


/* --- 7. Content areas ----------------------------------------------------- */

.iv-main-content {
    flex: 1 1 auto;
    padding-top: var(--iv-appbar-height);
    transition: margin 225ms cubic-bezier(0, 0, 0.2, 1);
}

.iv-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.iv-container-maxwidth-md {
    max-width: 960px;
}

.iv-container-maxwidth-lg {
    max-width: 1280px;
}

.iv-paper {
    border-radius: var(--iv-default-borderradius);
}

.iv-card {
    display: flex;
    flex-direction: column;
}

.iv-card-header {
    display: flex;
    align-items: center;
    padding: 16px;
}

.iv-card-header-content,
.iv-card-content {
    flex: 1 1 auto;
}

/* Image grid: negative margins on the grid, padding on the cells */
.iv-grid {
    display: flex;
    flex-wrap: wrap;
}

.iv-grid-spacing-xs-2 {
    margin-top: -8px;
    margin-left: -8px;
}

.iv-grid-spacing-xs-2 > .iv-grid-item {
    padding-top: 8px;
    padding-left: 8px;
}

.iv-grid-spacing-xs-6 {
    margin-top: -24px;
    margin-left: -24px;
}

.iv-grid-spacing-xs-6 > .iv-grid-item {
    padding-top: 24px;
    padding-left: 24px;
}

.iv-grid-item-xs-12 {
    flex: 0 1 100%;
    max-width: 100%;
}

.iv-image {
    display: block;
}

.fluid {
    max-width: 100%;
}


/* --- 8. Utility classes --------------------------------------------------- */
/* Note: "align-items-center" appears in the markup but deliberately has no
   rule – the buttons handle the centering there themselves. */

.d-flex        { display: flex !important; }
.flex-column   { flex-direction: column !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center{ justify-content: center !important; }

.object-contain { object-fit: contain !important; }
.object-center  { object-position: center !important; }

.pa-0 { padding: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.px-8 { padding-left: 32px !important; padding-right: 32px !important; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-6 { margin-bottom: 24px !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mx-8 { margin-left: 32px !important; margin-right: 32px !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.ma-auto { margin: auto !important; }


/* --- 9. Responsive adjustments ------------------------------------------- */

/* From 960px on: the open drawer pushes the app bar and content aside */
@media (min-width: 960px) {
    .iv-drawer-open-responsive-md-left .iv-appbar {
        margin-left: var(--iv-drawer-width-left);
        width: calc(100% - var(--iv-drawer-width-left));
    }

    .iv-drawer-open-responsive-md-left .iv-main-content {
        margin-left: var(--iv-drawer-width-left);
    }
}

/* Below 960px: the drawer sits above the app bar and content (overlay menu);
   before the first interaction it stays completely hidden */
@media (max-width: 959.98px) {
    .iv-drawer {
        z-index: calc(var(--iv-zindex-appbar) + 2);
    }

    .iv-drawer.iv-drawer--initial {
        display: none;
    }
}

/* Below 600px: flatter app bar with tighter gutters */
@media (max-width: 599.98px) {
    .iv-appbar {
        height: 56px;
    }

    .iv-toolbar {
        height: 56px;
        padding: 0 16px;
    }

    .iv-main-content {
        padding-top: 56px;
    }
}


/* --- 10. Scrollbars ------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a6a6a6;
}

html,
body * {
    scrollbar-color: #c4c4c4 transparent;
    scrollbar-width: thin;
}


/* --- 11. Footer ----------------------------------------------------------- */

.iv-footer {
    padding: 32px 16px 28px;
    text-align: center;
    color: var(--iv-palette-appbar-text);
    background-color: var(--iv-palette-appbar-background);
}

.iv-footer-brand {
    margin: 0 0 18px;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Legal links: underlined text links with a soft highlight on hover/focus */
.iv-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin-bottom: 16px;
}

.iv-footer-nav a {
    padding: 8px 12px;
    border-radius: var(--iv-default-borderradius);
    color: inherit;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Darkening instead of lightening keeps the white text readable */
.iv-footer-nav a:focus-visible,
.iv-footer-nav a:active {
    background-color: rgba(0, 40, 0, 0.15);
}

@media (hover: hover) and (pointer: fine) {
    .iv-footer-nav a:hover {
        background-color: rgba(0, 40, 0, 0.15);
    }
}

/* Hairline above the copyright line, fading out towards the edges */
.iv-footer-copy {
    max-width: 320px;
    margin: 0 auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    opacity: 0.9;
}


/* --- 12. Subpages (imprint, privacy policy) ------------------------------- */
/* Subpages share the app bar, drawer and footer of the main page; only the
   text column in between is specific to them. */

.iv-subpage-main {
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    min-height: calc(100vh - var(--iv-appbar-height) - 220px);
}

.iv-subpage-main h1 {
    margin: 16px 0 24px;
}

.iv-subpage-main h2 {
    margin: 32px 0 12px;
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--iv-palette-primary);
}

.iv-subpage-main p,
.iv-subpage-main ul {
    margin: 0 0 16px;
    font-size: var(--iv-typography-body1-size);
    line-height: var(--iv-typography-body1-lineheight);
    letter-spacing: var(--iv-typography-body1-letterspacing);
}

.iv-subpage-main ul {
    padding-left: 24px;
}

.iv-subpage-main li {
    margin-bottom: 4px;
}

.iv-subpage-main a {
    color: var(--iv-palette-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

/* Callout box - used for the separately highlighted right to object,
   which Art. 21(4) GDPR requires to stand apart from the other information */
.iv-subpage-main .iv-hinweis {
    margin: 32px 0;
    padding: 4px 24px 8px;
    border-left: 4px solid var(--iv-palette-primary);
    border-radius: 0 6px 6px 0;
    background-color: #f0f8f0;
}

.iv-subpage-main .iv-hinweis h2 {
    margin-top: 20px;
}

@media (max-width: 599.98px) {
    .iv-subpage-main {
        padding: 16px 20px 40px;
    }
}