/*
Theme Name: My Custom Theme
Author: Your Name
Version: 1.0
Description: A custom theme I am building.
*/

/*--------------------------------------------------------------
Basic Styles
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    /* Set the default base font size for PCs */
    font-size: 100% !important; /* This is usually 16px */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
    /* New: 1.1rem = 1.1 x 16px = ~17.5px */
    font-size: 1.1rem;
    
}

/* --- NEW --- */
/* This forces the parent containers to allow sticky positioning */
/* This was moved from mobile/tablet queries to apply globally */
html,
body {
    overflow-x: visible !important;
}


/* This makes all images responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

#content {
    max-width: 900px;
    margin: 0 auto ;
    /* 20px for top/bottom, 60 for left/right */
    padding: 0 60px; 
    background-color: #ffffff;
}

h2 {
    /* 2rem = 2 x 16px = 32px */
    font-size: 2rem;
}

/* Add these for future use */
h1 {
    font-size: 2.5rem;
}
h3 {
    font-size: 1.5rem;
}

a {
    color: #0073aa;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/*--------------------------------------------------------------
Sticky Navigation Menu
--------------------------------------------------------------*/
#main-navigation {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Goal 1: Almost transparent white background */
    background-color: rgba(255, 255, 255, 0.9);
    
    /* Goal 3: Make the bar narrower (less padding) */
    padding: 0px 120px;
    
}

/* This pushes the menu down when the admin bar is visible */
body.admin-bar #main-navigation {
    top: 32px !important;
}

/* Style for the <ul> inside the menu */
#main-navigation .main-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    
    /* Goal 2: Move the menu items to the right */
    justify-content: flex-end; 
}

/* Style for each menu item <li> */
#main-navigation .main-menu-list li {
    margin-left: 20px;
}

/* Style for the links <a> */
#main-navigation .main-menu-list a {
    /* Required: Change text color to be visible on a light background */
    color: #333333;
    
    text-decoration: none;
    font-weight: bold;
    display: block;
    
    /* Goal 3: Reduce padding on links to help make bar narrower */
    padding: 8px 2px;
}

#main-navigation .main-menu-list a:hover {
    /* New hover effect for a light background */
    background-color: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}
/*--------------------------------------------------------------
Header Logo and Title
--------------------------------------------------------------*/

/* This controls the <img> tag of your uploaded logo */
.custom-logo {
    max-height: 50px; /* Adjust this 40px as needed */
    width: auto;
    display: block;
}

/* This styles the fallback <h1> site title if no logo is set */
#main-navigation h1 {
    margin: 0; /* Removes default h1 spacing */
    font-size: 1.2rem; /* Makes it a more appropriate size */
}

/* Styles the link for the fallback title */
#main-navigation h1 a {
    color: #333333;
    text-decoration: none;
    font-weight: bold;
}

/*--------------------------------------------------------------
Hero Landing Section
--------------------------------------------------------------*/

/* --- NEW --- */
/* This creates the full-screen landing area */
.landing-hero {
  /* 1. Sets the height to fill 100% of the screen */
  /* --- MODIFIED --- */
  /* Was 100vh (full screen). Reduced to 90vh to allow */
  /* the 'About' section to be visible at the bottom. */
  /* Adjust 90vh (90% of screen height) as needed. */
  min-height: 90vh;
  
  /* 2. Uses Flexbox to perfectly center the content */
  display: flex;
  flex-direction: column;
  /* --- MODIFIED --- */
  /* Switched from 'center' (automatic) to 'flex-start' (manual) */
  justify-content: flex-start; /* Vertical centering */
  align-items: center;     /* Horizontal centering */
  /* --- NEW --- */
  /* Added padding to manually push content down from the top. */
  /* 'center' felt too low, so we are now placing it 25% */
  /* from the top. Adjust '25vh' to move it up or down. */
  padding-top: 9vh; /* for bigger screens the padding is defined under*/
}

/* --- NEW --- */
/* This removes the unwanted bottom margin from the logo
   (which has the .section-spacing class) only when
   it's inside our new hero container. */
.landing-hero .section-spacing {
  margin-bottom: 0;
}

/* --- NEW --- */
/* This controls the hard-coded logo on the landing page */
.custom-logo-main {
    max-width: 500px; /* Adjust as needed */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/*--------------------------------------------------------------
Responsive Styles
--------------------------------------------------------------*/

/* 💻 Tablet Styles */
@media (max-width: 768px) {
    
    html {
        /* 90% of 16px = 14.4px base size */
        font-size: 90%; 
    }
    /* --- REMOVED --- */
    /* This rule was moved to Basic Styles to apply globally */
    /* ----------------------- */
    
    #content {
        /* On screens 768px wide or less, use 30px padding */
        padding-left: 20px;
        padding-right: 20px;
    }
        #main-navigation {
    
    padding: 5px 30px !important;
    
}
.landing-hero {
    padding-top: 25vh;
}
}

/* 📱 Phone Styles */
@media (max-width: 599.98px) {
    
    html {
        /* 85% of 16px = 13.6px base size */
        font-size: 85%;
    }
    /* --- REMOVED --- */
    /* This rule was moved to Basic Styles to apply globally */
    /* ----------------------- */
    
    /* --- MODIFIED --- */
    #content {
        /* On screens 480px wide or less, use 15px padding */
        padding-left: 15px;
        padding-right: 15px;
        
        /* We also remove the margin and border for a nice
           full-screen feel on small phones */
        /* Removed vh top margin, hero container handles it */
        margin-top: 0 !important; 
        margin-bottom: 120px !important;
        border: none !important;
    }
    #main-navigation {
    
    padding: 15px 20px !important;
    
}
.landing-hero {
    padding-top: 25vh;
}
    
}
/*--------------------------------------------------------------
Homepage Specific Styles
--------------------------------------------------------------*/
.text-center { 
    text-align: center; 
    margin: 20 auto; 
}

/* --- MODIFIED: Responsive Section Spacing --- */
.section-spacing { 
    /* Mobile-first spacing */
    margin-bottom: 4rem; /* (Approx 64px) */
}

/* Main Title Styling */
/* --- MODIFIED --- */
.maker-title {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #333;
    /* Replaced vh margins with a simple top margin */
    margin-top: 20px;
    margin-bottom: 0; 
    /* --- MODIFIED: Removed horizontal margins from base rule --- */
    margin-left: 0;
    margin-right: 0;
    text-transform: uppercase;
    text-align: center;
    /* --- NEW: Add padding for small screens --- */
    padding-top: 50px;
   
}
.maker-title-line {
    display: block; /* Puts "Maker" and "Woodworker" on separate lines */
}
.maker-title-separator {
    border: none; /* Remove default HR border */
    border-top: 2px solid #333; /* Create the line */
    width: 60px; /* Make the line short */
    margin: 10px auto; /* Center the line and add spacing */
}

/* --- About Section --- */

/* 1. DEFAULT (MOBILE-FIRST) STACKED LAYOUT */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px; /* Start with the smallest gap */
    align-items: start;
    margin-top: 30px; /* Start with the smallest margin */
}

/* Portrait Image Styling */
.olli-img {
    width: 100%;
    height: auto;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 16px auto; 
    max-width: 60%; /* Small phone optimization */
}

/* About Text Styling */
.about-text h3 {
    font-size: 1.8rem; /* Mobile-first font size */
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 25px;
    margin-top: 5vh;
    color: #333;
    display: block;
    text-align: center;
}
/* This new rule adds the border ONLY to the span */
.about-text h3 span {
    border-bottom: 3px solid #333;
    padding-bottom: 5px;
}

.about-text p,
.about-text strong {
    line-height: 1.7;
    margin-bottom: 10px;
    color: #444;
}

/*--------------------------------------------------------------
Homepage Responsive Overrides
--------------------------------------------------------------*/

/* 💻 TABLET & PC STYLES */
@media (min-width: 600px) {
    
    /* 2. OVERRIDE FOR PC/TABLET SIDE-BY-SIDE LAYOUT */
    .about-grid {
        grid-template-columns: 2fr 1fr !important; /* This is the side-by-side rule */
        gap: 30px; /* Larger gap for larger screens */
        margin-top: 30px; /* Larger margin for larger screens */
    }

    /* --- MODIFIED: Responsive Section Spacing --- */
    .section-spacing { 
        /* Larger spacing for tablets/PCs */
        margin-bottom: 6rem; /* (Approx 96px) */
    }

    /* --- MODIFIED --- */
    .maker-title {
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        /* Removed vh margins */
        margin-top: 20px;
        margin-bottom: 0;
        margin-left: 0; 
        margin-right: 0;
        /* --- NEW: Remove padding on larger screens --- */
        padding-top: 50px;
       
    }
    
    
    .about-text h3 {
        font-size: 2rem;
        text-align: left;
    }
    
    .olli-img {
        max-width: 100%; /* Let image be full-width in its column */
        
    }
}

/* 🖥️ LARGE PC STYLES (Optional) */
@media (min-width: 1024px) {

    /* --- NEW: Responsive Section Spacing --- */
    .section-spacing {
        margin-bottom: 8rem; /* (Approx 128px) */
    }

    /* --- MODIFIED --- */
    .maker-title {
        font-size: 1.8rem;
        letter-spacing: 0.15em;
        /* Removed vh margins */
        margin-top: 20px;
        margin-bottom: 0;
        /* --- MOVED: Horizontal margins ONLY apply to large screens --- */
        padding-top: 10vh;
        
    }

    .about-text h3 {
        font-size: 2.5rem;
    }
}
/*--------------------------------------------------------------
Footer Styles
--------------------------------------------------------------*/
#colophon {
    text-align: center;
    padding: 20px 0; /* Adds a little space above/below */
}

/* 1. DEFAULT (MOBILE-FIRST) STACKED LAYOUT */
.contact-follow-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stacked by default */
    gap: 40px; /* Space between sections on mobile */
}

/* --- MODIFIED --- */
.contact-column {
    text-align: center; /* Center the content on mobile */
    /* Added alignment margins */
    margin-bottom: 25px;
    margin-top: 60px;
}

/* 2. PC/TABLET SIDE-BY-SIDE LAYOUT */
@media (min-width: 600px) {
    .contact-follow-grid {
        grid-template-columns: 1fr 1fr; /* 50/50 split */
        gap: 60px; /* Wider gap on desktop */
        align-items: start; /* Align the top of the columns */
    }
    .contact-column {
        text-align: center; /* Align it back to the left on desktop */
    }
}

/* --- MODIFIED --- */
.contact-column h3 {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 25px;
    /* margin-top: 60px; <-- REMOVED this */
    color: #333;
    display: block; 
}
.contact-column h3 span {
    border-bottom: 3px solid #333;
    padding-bottom: 5px;
}

/* Style the new "Follow" column */
.follow-column {
    text-align: center; /* Center the "Follow" content */
    margin-bottom: 25px;
    margin-top: 60px;
}

/* Style the "Follow" heading to match "About" */
/* --- MODIFIED --- */
.follow-column h3 {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 25px;
    /* margin-top: 60px; <-- REMOVED this */
    color: #333;
    display: block; 
}
.follow-column h3 span {
    border-bottom: 3px solid #333;
    padding-bottom: 5px;
}


/* Style the Instagram link and icon */
.instagram-link {
    display: inline-block;
    color: #333;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.instagram-link:hover {
    text-decoration: none;
    transform: scale(1.05); /* Nice hover effect */
}

.instagram-logo {
    width: 60px;
    height: 60px;
    stroke: #333; /* Icon color */
    display: block;
    margin: 0 auto 10px;
}

.instagram-username {
    font-weight: 600;
    font-size: 1.1rem;
}
/*--------------------------------------------------------------
Responsive Iframe (Google Map)
--------------------------------------------------------------*/
.contact-column iframe {
    width: 100%; /* Make it fill its column */
    max-width: 100%;
    height: 300px; /* Give it a set height */
    border: none;
    margin-top: 15px;
}
/*--------------------------------------------------------------
Fade-in on Scroll Effect
--------------------------------------------------------------*/

/* --- NEW INSTRUCTION --- */
/* To hide the 'About' section (and other sections) until the user
   scrolls, you must apply the class 'reveal-on-scroll' to those
   sections in your WordPress page editor.
   
   For example, select your 'About' section/group block, go to the
   'Advanced' panel in the sidebar, and add 'reveal-on-scroll'
   to the 'Additional CSS class(es)' field. 
   Do this for any section you want to fade in.
*/

/* The default, hidden state */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* Start 30px down */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* The state after the script adds 'is-visible' */
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}