/*
Theme Name: Netpilvi Kadence Child
Theme URI: https://netpilvi.com
Author: ChatGPT
Author URI: https://openai.com
Description: A child theme for the Kadence parent theme, designed for Netpilvi with a professional, modern appearance. This theme implements a refined color palette, improved typography, and cleaner layout styles.
Version: 1.0
Template: kadence
Text Domain: netpilvi-kadence-child
*/

/* Import Google Fonts
 * The Poppins font family is used for headings and the Open Sans font family
 * is used for body text. These fonts are loaded directly from Google Fonts.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

/*
 * Define colour variables using CSS custom properties. Following web design
 * best‑practice recommendations to keep the palette simple and memorable, we
 * limit the scheme to five core colours【102354998398829†L227-L243】. The
 * colours mirror the existing Netpilvi branding but are adjusted for better
 * contrast and readability.
 */
:root {
    --np-primary: #0077c8; /* bright blue primary colour */
    --np-secondary: #003e75; /* dark blue secondary colour */
    --np-accent: #ff595e; /* coral red accent used for call to action */
    --np-base-bg: #f8f9fa; /* light grey background colour */
    --np-text: #20232a; /* dark grey text colour */
    --np-heading: #003e75; /* heading colour matching the dark blue */
}

/* Base styling for the body text. The body uses a neutral background and
 * legible sans‑serif font. Spacing and line height are set for improved
 * readability【102354998398829†L227-L243】.
 */
body {
    background-color: var(--np-base-bg);
    color: var(--np-text);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

/* Global heading styles. Headings use the Poppins font family for a clean
 * modern look and are given a consistent colour. Using the Customizer to
 * set fonts globally is recommended to ensure consistency【581049093693837†L95-L104】. */
h1, h2, h3, h4, h5, h6 {
    color: var(--np-heading);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-top: 0;
}

h1 { font-size: 2.25rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.5rem;  margin-bottom: 0.75rem; }
h4 { font-size: 1.25rem; margin-bottom: 0.5rem; }
h5 { font-size: 1.125rem; margin-bottom: 0.5rem; }
h6 { font-size: 1rem;   margin-bottom: 0.5rem; }

/* Link styling. Links use the primary colour and transition smoothly to
 * the accent colour on hover for clear affordance. */
a {
    color: var(--np-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--np-accent);
    text-decoration: underline;
}

/* Navigation menu styling. Kadence outputs menus using classes such as
 * .header-menu. We adjust link colours to ensure high contrast in the header. */
.header-menu a {
    color: var(--np-base-bg);
    font-weight: 600;
}

.header-menu a:hover {
    color: var(--np-accent);
}

/* Button styling. These styles apply to native buttons, Kadence Block buttons
 * and any anchor tags with the .button class. They follow the colour palette
 * and include subtle transitions for better UX. */
button,
.wp-block-button__link,
a.button {
    background-color: var(--np-primary);
    color: #ffffff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button:hover,
.wp-block-button__link:hover,
a.button:hover {
    background-color: var(--np-secondary);
}

/* Footer styling. The footer uses the secondary colour as a background
 * with white text. Link hover states use the accent colour to draw the
 * eye without compromising legibility. */
.site-footer {
    background-color: var(--np-secondary);
    color: #ffffff;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.site-footer a {
    color: #ffffff;
}

.site-footer a:hover {
    color: var(--np-accent);
}

/* Example hero section styles. To use these styles, wrap your hero
 * section in a container with the class `np-hero` and structure it as shown
 * in the theme preview screenshot. The design emphasises balanced spacing
 * and clear calls to action. */
.np-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3rem 0;
    background-color: #ffffff;
    gap: 2rem;
}

.np-hero .np-hero-content {
    max-width: 50%;
}

.np-hero .np-hero-heading {
    font-size: 3rem;
    color: var(--np-heading);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.np-hero .np-hero-text {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: var(--np-text);
}

.np-hero .np-hero-btn {
    background-color: var(--np-accent);
    color: #ffffff;
    padding: 0.8rem 1.6rem;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.np-hero .np-hero-btn:hover {
    background-color: var(--np-primary);
}

.np-hero .np-hero-image img {
    width: 100%;
    border-radius: 12px;
    height: auto;
}

/* Responsive adjustments for smaller screens. On tablets and
 * phones the hero stacks vertically and text sizes scale down to
 * maintain readability【312655186421555†L274-L324】. */
@media (max-width: 768px) {
    .np-hero {
        flex-direction: column;
        text-align: center;
    }
    .np-hero .np-hero-content,
    .np-hero .np-hero-image {
        max-width: 100%;
    }
    .np-hero .np-hero-heading {
        font-size: 2rem;
    }
}