/*
 * Theme Name: Alexandre Labruyère
 * Description: Thème WordPress personnalisé pour Alexandre Labruyère
 * Author: Timothée Collas
 * Version: 1.0.0
 * Requires PHP: 8.3
 * Text Domain: alexandre-labruyere
 */

:root {
    --font-display: 'abc_whyte_inktrapmedium', Arial, Helvetica, sans-serif;
    --font-body: Arial, Helvetica, sans-serif;
    --color-text: #000;
    --color-surface: #fff;
    --color-menu: #87988f;
    --color-muted-surface: rgb(234 234 234);
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;
    --motion-menu: cubic-bezier(.08, .82, .28, 1);
    --breakpoint-mobile: 720px;
    --breakpoint-desktop: 960px;
    --breakpoint-wide: 1240px;
}

@font-face {
    font-family: 'abc_whyte_inktrapmedium';
    src: url('static/font/font-medium-webfont.woff2') format('woff2'),
         url('static/font/font-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    font-size: 16px;
    font-weight: normal;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: normal;
    text-transform: inherit;
}

p {
    margin: 0 0 var(--space-5);
}

a {
    color: var(--color-text);
    font-weight: normal;
    text-decoration: none;
    opacity: 1;
}

a:hover {
    color: grey;
}

button {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media only screen and (max-width: 719.98px) {
    html {
        font-size: 6px;
    }

    p {
        margin-bottom: var(--space-4);
    }
}

@media only screen and (min-width: 720px) {
    html {
        font-size: 8px;
    }
}

@media only screen and (min-width: 960px) {
    html {
        font-size: 10px;
    }
}

@media only screen and (min-width: 1240px) {
    html {
        font-size: .69444vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}