/*
 Theme Name:   Twenty Twenty-Five Child
 Theme URI:    https://www.katierobbert.com/
 Description:  A custom child theme for the Twenty Twenty-Five theme to implement strategic redesign.
 Author:       Katie Robbert
 Author URI:   https://www.katierobbert.com/
 Template:     twentytwentyfive
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---
SECTION 0: FONT IMPORTS
As per the guide, we are importing Merriweather for authoritative headlines
and Lato for clean, readable body text. This must come first.
--- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather:wght@400;700&display=swap');


/* ---
SECTION 1: ROOT VARIABLES & GLOBAL STYLES
Defining colors and fonts as variables makes future changes easy.
The color palette is based on Section 5.1 of the guide to build trust and professionalism.
--- */
:root {
    /* Color Palette (from Guide Section 5.1) */
    --color-primary-dark-green: #004d40; /* Hunter Green for trust and authority */
    --color-text-dark: #212529;          /* A dark, readable gray instead of pure black */
    --color-text-light: #495057;         /* A lighter gray for secondary text */
    --color-background-light: #f8f9fa;   /* A very light, cool gray for the background */
    --color-accent-gold: #c5a47e;         /* Muted gold for CTAs and links, as per guide */
    --color-border-subtle: #dee2e6;       /* A subtle border color */

    /* Typography (from Guide Section 5.2) */
    --font-heading: 'Merriweather', serif;
    --font-body: 'Lato', sans-serif;
}

/* ---
SECTION 2: GLOBAL ELEMENT STYLING
Applying the core font and color decisions to the entire site.
--- */
body {
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    font-family: var(--font-body);
}

/* Main content wrapper for readability */
.wp-site-blocks {
    max-width: 1200px;
    margin: 0 auto;
}

/* Styling for all links to use the accent color */
a {
    color: var(--color-primary-dark-green);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--color-accent-gold);
    text-decoration: underline;
}


/* ---
SECTION 3: TYPOGRAPHY
Implementing the specific font choices for headings and paragraphs
to create the authoritative voice recommended in the guide.
--- */

/* All headings will use the authoritative Serif font */
h1, h2, h3, h4, h5, h6, .wp-block-site-title {
    font-family: var(--font-heading);
    color: var(--color-primary-dark-green);
}

/* Specific styling for the main page title (H1) */
h1.entry-title, .wp-block-post-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Styling for subheadings */
h2 {
    font-size: 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border-subtle);
    padding-bottom: 0.5rem;
}

p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-dark);
}


/* ---
SECTION 4: COMPONENT STYLING
Styling for specific, reusable components like buttons and navigation.
--- */

/* Main Navigation Bar */
.wp-block-navigation {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 1rem 0;
}

.wp-block-navigation-item__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Call-to-Action Buttons */
.wp-block-button__link {
    background-color: var(--color-accent-gold) !important;
    color: #ffffff !important;
    font-family: var(--font-body);
    font-weight: 700;
    border-radius: 5px !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease;
}

.wp-block-button__link:hover {
    background-color: var(--color-primary-dark-green) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* Styling the default contact form from the plugin */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 5px;
    font-family: var(--font-body);
}

.wpcf7-form input[type="submit"] {
    background-color: var(--color-accent-gold);
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 700;
    border: none;
    border-radius: 5px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--color-primary-dark-green);
}