/*
Theme Name: Astra Child - Hola Nathalie
Theme URI: https://hola-nathalie.com
Description: Thème enfant Astra pour le site Hola Nathalie
Author: Nathalie Robayo
Author URI: https://hola-nathalie.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Domain Path: /languages
*/

/* Import parent theme styles */
@import url('../astra/style.css');

/* Custom theme styles for Hola Nathalie */

:root {
    --color-bg-top: #FBF8FF;
    --color-bg-bottom: #EFE9FF;
    --color-action: #6C3BFF;
    --color-action-hover: #5325D6;
    --color-detail: #F2884B;
    --color-text-primary: #16103A;
    --color-text-secondary: #57508A;
    --color-border: #E4DCFF;
    --color-surface: #FFFFFF;
}

body {
    background: linear-gradient(180deg, var(--color-bg-top) 0%, var(--color-bg-bottom) 100%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    font-family: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    color: var(--color-text-primary);
}

h1 {
    font-size: 54px;
    line-height: 1.1;
}

h2 {
    font-size: 38px;
    line-height: 1.2;
    margin-top: 100px;
    margin-bottom: 20px;
}

h3 {
    font-size: 23px;
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 20px;
}

p, .wp-block-list li {
    font-size: 18px;
    line-height: 1.65;
    max-width: 680px;
}

a {
    color: var(--color-action);
    text-decoration: none;
}

a:hover {
    color: var(--color-action-hover);
}

/* Buttons */
.wp-block-button__link,
button,
input[type="submit"] {
    background-color: var(--color-action);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 16px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--color-action-hover);
}

.wp-block-button__link:focus {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

/* Secondary Button */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 1px solid var(--color-action);
    color: var(--color-action);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: rgba(108, 59, 255, 0.05);
}

/* Cards and Groups */
.wp-block-group {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 100px;
}

.wp-block-group:first-child {
    margin-top: 0;
}

/* Lists */
.wp-block-list {
    margin: 20px 0;
}

.wp-block-list li {
    margin-bottom: 8px;
    padding-left: 10px;
}

.wp-block-list li::marker {
    color: var(--color-detail);
}

/* Quotes */
.wp-block-quote {
    border-left: 4px solid var(--color-detail);
    padding-left: 20px;
    margin-left: 0;
    color: var(--color-text-secondary);
    font-style: italic;
}

.wp-block-quote p {
    margin-bottom: 10px;
}

/* Details (FAQ) */
.wp-block-details {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.wp-block-details__summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wp-block-details[open] > .wp-block-details__summary {
    margin-bottom: 12px;
}

/* Images */
.wp-block-image {
    margin: 20px 0;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Mobile responsive */
@media (max-width: 900px) {
    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 27px;
        margin-top: 64px;
    }

    h3 {
        font-size: 20px;
    }

    p, .wp-block-list li {
        font-size: 17px;
    }

    .wp-block-group {
        padding: 24px;
        margin-bottom: 64px;
    }

    .wp-block-button__link,
    button,
    input[type="submit"] {
        width: 100%;
        padding: 16px;
        font-size: 16px;
    }
}

/* Never smaller than 16px on mobile */
@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    p, .wp-block-list li {
        font-size: 16px;
    }
}