/*
Theme Name: WittyWilla WordPress Theme
Theme URI: https://wittywilla.com
Author: Wilhelmina "Willow" Poortenga
Description: Proprietary custom theme for WittyWilla.
Version: 1.5
License: Proprietary / All Rights Reserved
Text Domain: wittywilla

COPYRIGHT NOTICE:
This theme and all associated assets (CSS, images, design layout) are the 
intellectual property of Wilhelmina Poortenga. 

Unauthorized copying, scraping, modification, distribution, or use of this 
code for any purpose (commercial or personal) is strictly prohibited. 
Violators will be subject to DMCA takedown notices and legal action.
*/

/* =========================================
   1. VARIABLES & RESET
   ========================================= */

:root {
    --bg-lavender: #c2c9f9;
    --logo-pink: #f77ce0;
    --logo-black: #000000;
    --pure-white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-lavender);
    color: var(--logo-black);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 2rem; /* Keeps the safe spacing around the edges */
}

/* =========================================
   2. GLOBAL LAYOUT
   ========================================= */

   .site-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0; /* CHANGED: Was 20px. Set to 0 to match the Menu Box width. */
    flex-direction: column;
}
.site-header, .site-footer {
    width: 100%;
}

/* =========================================
   3. SHARED COMPONENT: CARD/BOX
   ========================================= */

.content-box {
    background-color: var(--pure-white);
    padding: 2.5rem 1.5rem;
    border-radius: 15px;
    box-shadow: 8px 8px 0px var(--logo-black); 
    width: 100%;
    max-width: 800px;
    text-align: center;
    border: 3px solid var(--logo-black);
    overflow: hidden; 
    margin: 0 auto;
}

/* =========================================
   4. TYPOGRAPHY & BRANDING
   ========================================= */

/* Brand Name (Sticker Style) - Kept Pink as Logo */
.brand-name, h1.brand-name {
    /* CHANGED: Uses 'vw' (viewport width) so it shrinks on mobile but caps at 2.8rem */
    font-size: clamp(1.5rem, 13vw, 2.8rem); 
    white-space: nowrap; /* CHANGED: Forces text to stay on one line */
    
    color: var(--logo-pink);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    
    /* Removed overflow-wrap: break-word; to prevent breaking */
    
    text-shadow: 
        -2px -2px 0 var(--logo-black),  
         2px -2px 0 var(--logo-black),
        -2px  2px 0 var(--logo-black),
         2px  2px 0 var(--logo-black),
         6px  6px 0 var(--bg-lavender); 
}

/* General Headings - CHANGED TO BLACK */
h1, h2, h3, h4, h5, h6 {
    color: var(--logo-black); /* Updated from Pink to Black per request */
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }

/* Sub-branding Name Section */
.full-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--bg-lavender);
    color: var(--logo-black);
    display: block;
}

.full-name strong {
    color: var(--logo-pink);
    font-weight: 900;
}

/* Standard Paragraphs / Description */
p, .description {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* Links */
a {
    color: var(--logo-pink);
    text-decoration: none;
    font-weight: 700;
}

a:hover {
    text-decoration: underline;
}

/* =========================================
   5. BUTTONS
   ========================================= */

.btn-primary, input[type="submit"], button {
    display: block; 
    background-color: var(--logo-pink);
    color: var(--logo-black);
    padding: 1.2rem;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 10px;
    border: 3px solid var(--logo-black);
    box-shadow: 4px 4px 0px var(--logo-black);
    transition: all 0.1s ease;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.btn-primary:active, input[type="submit"]:active, button:active {
    box-shadow: 0px 0px 0px var(--logo-black);
    transform: translate(4px, 4px);
}

/* =========================================
   6. WORDPRESS SPECIFIC
   ========================================= */

/* HIDE PAGE TITLES - New Addition */
.page .entry-title {
    display: none;
}

.entry-content {
    text-align: left;
    margin-bottom: 2rem;
}

.site-footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.8rem;
    font-weight: bold;
    background-color: transparent;
}

/* =========================================
   7. PORTFOLIO TEMPLATE STYLES (Zig-Zag)
   ========================================= */

.portfolio-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.portfolio-card {
    background-color: var(--pure-white);
    border: 3px solid var(--logo-black);
    box-shadow: 8px 8px 0px var(--logo-black);
    border-radius: 15px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

/* MOBILE ORDERING: Title -> Image -> Desc -> Button */
.portfolio-card .item-title {
    order: 1;
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: var(--logo-black); 
}

.portfolio-card .item-image-wrapper {
    order: 2;
    margin-bottom: 1.5rem;
    border: 3px solid var(--logo-black);
}

.portfolio-card .item-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.portfolio-card .item-desc {
    order: 3;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.portfolio-card .item-btn {
    order: 4;
    align-self: flex-start;
    margin-top: 0;
    width: auto; 
    padding: 1rem 2rem;
}

/* =========================================
   8. DESKTOP / LARGE SCREENS
   ========================================= */

@media (min-width: 768px) {
    
    .content-box {
        padding: 3.5rem;
        box-shadow: 12px 12px 0px var(--logo-black);
    }

    .brand-name, h1.brand-name {
        font-size: 4rem; 
        text-shadow: 
            -3px -3px 0 var(--logo-black),  
             3px -3px 0 var(--logo-black),
            -3px  3px 0 var(--logo-black),
             3px  3px 0 var(--logo-black),
             10px 10px 0 var(--bg-lavender);
    }

    .full-name {
        font-size: 1.5rem;
    }

    .description, p {
        font-size: 1.1rem;
    }

    .btn-primary {
        display: inline-block;
        padding: 1rem 3rem;
        width: auto;
    }
    
    .btn-primary:hover {
        background-color: var(--pure-white);
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--logo-black);
    }

    /* --- Portfolio Zig-Zag Grid --- */
    .portfolio-card {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 2rem;
        align-items: center; 
    }

    /* Reset Flexbox Order for Grid Placement */
    .portfolio-card .item-title, 
    .portfolio-card .item-image-wrapper, 
    .portfolio-card .item-desc, 
    .portfolio-card .item-btn {
        order: unset;
        margin-bottom: 0;
    }

    /* ODD ITEMS: Image Left */
    .portfolio-card .item-image-wrapper {
        grid-column: 1; 
        grid-row: 1 / span 3; 
        height: 100%;
    }
    
    .portfolio-card .item-image {
        height: 100%;
        min-height: 250px; 
    }

    /* Text on Right */
    .portfolio-card .item-title {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin-bottom: 0.5rem;
    }

    .portfolio-card .item-desc {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 1rem;
    }

    .portfolio-card .item-btn {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
    }

    /* EVEN ITEMS: Image Right */
    .portfolio-card:nth-child(even) .item-image-wrapper {
        grid-column: 2; 
        grid-row: 1 / span 3;
    }

    .portfolio-card:nth-child(even) .item-title,
    .portfolio-card:nth-child(even) .item-desc,
    .portfolio-card:nth-child(even) .item-btn {
        grid-column: 1; 
    }
}

/* =========================================
   9. NAVIGATION MENU
   ========================================= */

.nav-box {
    background-color: var(--pure-white);
    border: 3px solid var(--logo-black);
    box-shadow: 8px 8px 0px var(--logo-black); 
    border-radius: 15px;
    padding: 1rem 1.5rem;
    width: 100%;
    max-width: 800px; 
    margin: 2rem auto 2rem auto; 
    position: relative;
    z-index: 100;
}

/* Remove default list styles */
.nav-menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav-menu-container ul li {
    display: block;
    margin: 0.5rem 0;
}

.nav-menu-container ul li a {
    color: var(--logo-black);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 0.5rem;
    display: block;
}

.nav-menu-container ul li a:hover {
    color: var(--logo-pink);
    background-color: var(--logo-black); 
}

/* --- MOBILE TOGGLE BUTTON --- */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--logo-black);
    text-transform: uppercase;
}

.menu-toggle .hamburger {
    font-size: 1.5rem;
}

/* Hide menu by default on mobile */
.nav-menu-container {
    display: none;
    margin-top: 1rem;
    border-top: 2px solid var(--bg-lavender);
    padding-top: 1rem;
}

/* Show menu when toggled */
.nav-menu-container.is-open {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- DESKTOP STYLES (Tablet & Up) --- */
@media (min-width: 768px) {
    .nav-box {
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 12px 12px 0px var(--logo-black); 
    }

    .menu-toggle {
        display: none;
    }

    .nav-menu-container {
        display: block !important;
        margin-top: 0;
        border-top: none;
        padding-top: 0;
        width: 100%;
    }

    .nav-menu-container ul {
        display: flex;
        justify-content: center; 
        gap: 2rem; 
    }

    .nav-menu-container ul li {
        display: inline-block;
        margin: 0;
    }
}