/*
Theme Name: Kalas Custom Theme
Theme URI: https://kalasdigital.co/
Author: Tanya Veres
Author URI: https://kalasdigital.co/
Description: A custom, dynamic theme built for Kalas Digital Co.
Version: 1.1
*/

/* Find this in your :root block */
    :root {
    --primary-action: #0D9488;
    --secondary-accent: #E1AB73;
    --text-light: #FAFAFA; /* Formerly --background */
    --border-divider: rgba(250, 250, 250, 0.1); /* Better for dark mode */

    /* NEW, SPECIFIC BACKGROUND VARIABLES 👇 */
    --background-main: #333333; /* For the body and header */
    --background-panel: #2a2a2a; /* For the content panels */

    /* CHANGE THIS LINE 👇 */
    --font-headline: 'Inter', sans-serif;

    --font-body: 'Montserrat', sans-serif;
}
/* A common best practice is to reset the box-sizing.
  This makes layout and sizing elements much more predictable.
*/
*, *::before, *::after {
    box-sizing: border-box;
}

/* Now we set the global styles for the entire page.
  This is where we apply our base fonts and colors.
*/
body {
    margin: 0;
    font-family: var(--font-body);
    /* SWITCH TO DARK THEME */
    color: var(--text-light); /* Use Off-White for text */
    background-color: var(--background-main); /* Use Dark Charcoal for background */
    line-height: 1.6;
}


/* ======================= */
/* UTILITY CLASS      */
/* ======================= */
/* We'll create a container class to keep our content
   centered and with a maximum width. We'll reuse this
   for every section on the page.
*/
.container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Add this new rule for our separator */
.section-separator {
    border-bottom: 1px solid var(--secondary-accent);
}
/* ======================= */
/* BUTTON STYLES           */
/* ======================= */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--primary-action);
    color: white;
}

.btn-secondary {
    background-color: var(--secondary-accent);
    color: var(--background-panel);
    border-color: var(--secondary-accent);
}

.button-group {
    display: flex;
    gap: 20px; /* Creates space between the buttons */
}


/* ======================= */
/* HEADER STYLES      */
/* ======================= */
.site-header {
    padding: 20px 0;
    border-bottom: 1px solid var(--secondary-accent);
    background-color: var(--background-main);
}

/* We use flexbox to align the logo and navigation.
   This is the modern way to create layouts in CSS.
*/
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo a {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    text-decoration: none;
    color: var(--primary-text);
}

/* Add this new rule */
.site-logo img {
    width: 160px; /* Let's start with 160px */
    height: auto; /* This maintains the aspect ratio */
    display: block; /* This removes any extra space below the image */
}

/* We need to reset the default list styles */
.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav li {
    display: inline-block; /* Puts the links side-by-side */
    margin-left: 30px;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease; /* A subtle transition for the hover effect */
}

/* Here's our first "special touch": a hover effect using
   our beautiful accent colors!
*/
.main-nav a:hover {
    color: var(--secondary-accent);
}

/* ======================= */
/* HERO SECTION V2 STYLES  */
/* ======================= */
/* Find and replace your existing hero-section-v2 rule with this one */
.hero-section-v2 {
    background-color: var(--background-panel); /* Lighter dark grey panel */
    border: 1px solid var(--secondary-accent);
    border-radius: 16px;
    padding: 60px; /* Consistent padding */
    margin: 40px;
    position: relative; /* This is still needed for our overlapping image */
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    align-items: center;
    gap: 40px;
}

.hero-content h1 {
    font-family: var(--font-headline);
    font-size: 62px; /* Even bigger for more impact */
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 20px;
}

.hero-content .subtitle {
    font-size: 18px;
    max-width: 500px; /* Keep the text from getting too wide */
    margin-bottom: 35px;
}

.hero-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* A slightly larger radius for a softer look */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* A more dramatic shadow for depth */
}

/* ======================= */
/* BLOG PREVIEW V2 STYLES  */
/* ======================= */
/* Find and replace this rule */
.blog-preview-section-v2 {
    background-color: var(--background-panel); /* Lighter dark grey panel */
    border: 1px solid var(--secondary-accent);
    border-radius: 16px; /* Rounded corners for the panel */
    padding: 60px;
    margin: 40px;
}

/* We're using a grid again, but this time the columns are not equal.
   The '2fr 1fr' means the first column (our featured post) will be
   twice as wide as the second column (our list).
*/
.blog-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: flex-start; /* Aligns items to the top */
}

.featured-post-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.featured-post-image a:hover img {
    transform: scale(1.03); /* A subtle zoom effect on hover */
}

.featured-post h3 {
    font-family: var(--font-headline);
    font-size: 28px; /* Making it smaller than the section title */
    margin-top: 0;
    margin-bottom: 10px;
}
.featured-post h3 a {
    text-decoration: none;
    color: var(--background); /* This makes it bright white */
    transition: color 0.3s ease;
}

.featured-post h3 a:hover {
    color: var(--primary-action);
}

/* Find and replace this whole rule */
.recent-post-item {
    border-bottom: 1px solid var(--secondary-accent);
    padding: 20px 0;
    margin-bottom: 0;
    transition: background-color 0.3s ease; /* Add a transition */
}

/* Add these new rules */
.recent-post-item:hover {
    background-color: rgba(255, 255, 255, 0.03); /* A very subtle glow on hover */
}

.recent-post-item:last-child {
    border-bottom: none;
}

.recent-post-item:last-child {
    border-bottom: none; /* Remove the border from the last item */
    margin-bottom: 0;
    padding-bottom: 0;
}

.recent-post-item h4 {
    font-family: var(--font-headline);
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 5px;
}

.recent-post-item h4 a {
    text-decoration: none;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.recent-post-item h4 a:hover {
    color: var(--primary-action);
}

/* ======================= */
/* FEATURE SECTION V2 STYLES */
/* ======================= */
.feature-section-v2 {
    padding: 120px 0;
    position: relative; /* This is our positioning "anchor" */
}

.feature-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* We still imagine a two-column grid */
    align-items: center;
}

/* We only need to style the content column, as the image will be
   positioned absolutely and taken out of the normal flow.
*/
.feature-content-v2 {
    grid-column: 1 / 2; /* Explicitly place this in the first column */
    max-width: 450px; /* Constrain the text width */
    position: relative; /* This ensures the text stays on top of the image */
    z-index: 2;
}

.feature-content-v2 .section-title {
    text-align: left;
    font-size: 38px;
    margin-bottom: 20px;
}

.feature-content-v2 p {
    font-size: 16px;
    margin-bottom: 30px;
}

/*
  TEACHING MOMENT: CSS POSITIONING
  By setting the image wrapper to 'position: absolute', we lift it
  out of the normal page flow. We can then place it precisely
  relative to its closest 'position: relative' ancestor, which is
  our '.feature-section-v2'. This is how we create overlap!
*/
.feature-image-wrapper-v2 {
    position: absolute;
    right: 50px;
    top: 50%; /* Start it halfway down the section */
    transform: translateY(-50%); /* Nudge it up by half its own height to perfectly center it */
    width: 48%; /* Make it a bit more than half the container width */
    z-index: 1; /* Puts it behind the text (which has z-index: 2) */
}

.feature-image-wrapper-v2 img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}



/* ======================= */
/* SITE FOOTER STYLES      */
/* ======================= */
.site-footer {
    padding: 40px 0;
    border-top: 1px solid var(--secondary-accent); /* A subtle border using our background color */
    background-color: var(--background-main);
}

/* We use flexbox again to align the copyright and social links */
.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-text {
    font-size: 14px;
    color: var(--text-light); /* Semi-transparent text */
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    color: var(--text-light); /* Start with a semi-transparent color */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* On hover, make the icon fully opaque, our gold accent color, and lift it slightly */
.social-links a:hover {
    color: var(--secondary-accent);
    transform: translateY(-2px);
}


/* ======================= */
/* SCROLL ANIMATION STYLES */
/* ======================= */
.fade-up-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================= */
/* GENERIC PAGE STYLES     */
/* ======================= */
.page-header {
    padding: 80px 0;
    text-align: center;
    border-bottom: 1px solid var(--secondary-accent);
}

.page-header h1 {
    font-family: var(--font-headline);
    font-size: 62px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.page-content {
    padding: 80px 0;
}
 
.page_body{
    background-color: var(--background-main);
}


/* ======================= */
/* ABOUT PAGE STYLES       */
/* ======================= */
.about-grid {
    display: grid;
    /* Create two columns, the text column is 1.5x wider */
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: flex-start;
}

.about-image {
    position: relative; /* This is an anchor for our decorative shape */
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    position: relative; /* Make sure the image stays on top of the shape */
    z-index: 2;
}

/* Here's our decorative shape again, but static this time */
.about-image::before {
    content: '';
    position: absolute;
    z-index: 1;
    background-color: var(--primary-action); /* Using our Emerald Green */
    width: 100%;
    height: 100%;
    border-radius: 12px;
    top: 20px;
    left: 20px;
    opacity: 0.3;
}

.about-text p {
    font-size: 18px;
    line-height: 1.7;
    margin-top: 0;
    margin-bottom: 20px;
}

/* ======================= */
/* CONTACT FORM STYLES     */
/* ======================= */
.contact-form {
    max-width: 700px; /* Constrain the width of the form */
    margin: 0 auto; /* Center the form on the page */
}


.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-light);
}

/* This styles both text inputs and the textarea */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-light); /* Light text */
    background-color: var(--background-panel); /* A very subtle, dark background */
    border: 1px solid var(--primary-action);
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Add a highlight effect when the user clicks into a field */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-action); /* Use our emerald green for the focus border */
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3); /* And a soft glow */
}

.form-group button {
    width: 100%; /* Make the button full-width */
}

/* ======================= */
/* BLOG PAGE STYLES        */
/* ======================= */
.blog-page-grid {
    display: grid;
    /* Create 3 equal columns on desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Find and replace your existing .blog-card rule with this one */
.blog-card {
    background-color: var(--background-panel); /* Lighter dark grey panel */
    border: 1px solid var(--secondary-accent);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* We only need these two now */
}

/* Find and replace your existing .blog-card:hover rule with this one */
.blog-card:hover {
    transform: translateY(-8px); /* A slightly bigger lift for more impact */
    /* A darker shadow for depth, PLUS a colored glow! */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(59, 223, 62, 0.618);
}

.card-image-link img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9; /* Ensures all images have the same shape */
    object-fit: cover; /* This will crop images to fit, rather than stretching them */
}

.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* This makes all cards equal height */
}

.card-content h3 {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.card-content h3 a {
    text-decoration: none;
    color: var(--text-light);
}

.card-content p {
    margin-bottom: 0;
    font-size: 15px;
    color: var(--text-light);
    flex-grow: 1; /* Pushes the date to the bottom */
}

.card-content .post-meta {
    font-size: 13px;
    color: var(--text-light);
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px; /* Add space above the footer area */
}

.btn-read-more {
    text-decoration: none;
    color: var(--secondary-accent);
    font-weight: 700;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.btn-read-more:hover {
    transform: translateX(5px); /* A nice little nudge to the right on hover */
}

/* ======================= */
/* FEATURED PRODUCTS STYLES */
/* ======================= */
.featured-products-section {
    background-color: var(--background-panel); /* Lighter dark grey panel */
    border: 1px solid var(--secondary-accent);
    border-radius: 16px;
    padding: 60px;
    margin: 40px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.product-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(250, 250, 250, 0.1);
}

.product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5px;
}

.product-info h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-accent);
}

/* ======================= */
/* CONTACT FORM STYLES     */
/* ======================= */

/* This targets the main form wrapper from the plugin */
.wpcf7-form {
    max-width: 700px;
    margin: 0 auto;
}

/* This targets the paragraph tags the plugin uses to wrap each field */
.wpcf7-form p {
    margin-bottom: 25px;
}

/* This styles our labels */
.wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px;
    color: rgba(250, 250, 250, 0.8);
}

/* This styles all the different input fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--background);
    background-color: var(--background-panel);
    border: 1px solid var(--secondary-accent);
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* This adds the focus glow effect */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--primary-action);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3);
}

/* This styles the submit button */
.wpcf7-form .wpcf7-submit {
    width: 100%;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    background-color: var(--primary-action);
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ======================= */
/* SINGLE POST STYLES      */
/* ======================= */
.single-post-layout {
    max-width: 750px; /* A comfortable width for reading text */
    margin: 0 auto; /* Center the layout */
    padding: 60px 0;
}

.single-post-layout .post-header {
    text-align: center;
    margin-bottom: 40px;
}

.single-post-layout .post-title {
    font-family: var(--font-headline);
    font-size: 52px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 15px;
}

.single-post-layout .post-featured-image {
    margin-bottom: 40px;
}

.single-post-layout .post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* This styles the actual article content from the WP editor */
.post-content {
    font-size: 18px;
    line-height: 1.8;
}

.post-content p {
    margin-bottom: 1.5em;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    font-family: var(--font-headline);
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 1em;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.post-content blockquote {
    border-left: 4px solid var(--secondary-accent);
    padding-left: 1.5em;
    margin-left: 0;
    font-style: italic;
    color: var(--text-light);
}

/* ================================= */
/* DYNAMIC PRODUCT CARD LINK FIX     */
/* ================================= */

/* This targets the new link that wraps the card */
a.product-card-link {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Makes the text inside inherit the correct color */
}

/* We also need to re-target the product info specifically inside the link */
a.product-card-link .product-info h3 {
    color: var(--text-light); /* Ensure the title is our light text color */
}

a.product-card-link .product-info .product-price {
    color: var(--secondary-accent); /* Ensure the price is our gold accent color */
}

/* Style for the new product description */
.product-excerpt {
    font-size: 15px;
    color: rgba(250, 250, 250, 0.7);
    margin: 10px 0;
}

/* Update the product info to handle the new text */
.product-info {
    display: block;
    padding: 20px 5px;
}

/* This is our new rule for the title/price container */
.product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Adds a little space between title and price */
}

.product-excerpt {
    font-size: 15px;
    color: rgba(250, 250, 250, 0.7);
    margin: 10px 0 0 0; /* Add some space above the description */
}

/* We just need to style the price font, not its position anymore */
.product-info .product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-accent);
    white-space: nowrap; /* Prevents the price from wrapping onto a new line */
}