/* --- 1. FONTS & RESET --- */
@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap');

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

body {
    background-color: #1f1f1f; 
    color: #e0e0e0;
    font-family: 'Helvetica Light', 'Helvetica', Arial, sans-serif;
    font-weight: 300; 
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
a:hover { color: #a8d1ff; }

/* --- 2. HEADER --- */
.site-header {
    background-color: #1f1f1f;
    padding: 1rem 2rem;
    
    border-bottom: none; 
    
    display: flex;
    justify-content: space-between; 
    
    /* UPDATED: Changed from 'center' to 'flex-end' */
    align-items: flex-end;      
    
    max-width: 1200px; 
    margin: 0 auto; 
}

.logo-container { text-align: left; }
.logo-container h1 {
    font-family: 'Niconne', cursive; 
    font-size: 68pt;                 
    font-weight: 400;                
    margin-bottom: 0;
    line-height: 0.8;                
    color: #fff;        
	font-style: italic;	
}
.subtitle {
    font-family: 'Niconne', cursive; 
    font-size: 56pt;                 
    font-weight: 400;
    color: #aaa;                     
    margin-top: 0;
    line-height: 1;
	font-style: italic;
}

.main-nav ul { list-style: none; display: flex; gap: 2rem; }
.main-nav a { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 5px; }
.main-nav a.active { border-bottom: 2px solid #e0e0e0; }

/* --- 3. MAIN CONTENT WRAPPER --- */
.content-wrapper {
    margin-top: 2rem !important;
	max-width: 1200px;
    margin: 0 auto;
    
    /* UPDATED: Changed from '3rem 2rem' to match slideshow.css exactly */

    
    min-height: 60vh;
    display: block; 
}

/* --- 4. HOME PAGE STYLES --- */
.media-container {
	position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.grid-item {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 75vh;
    background-color: #3a3a3a;
    border: 1px solid #444;
    transition: opacity 1s ease-in-out; 
    opacity: 1; 
}
.grid-item.fade-out { opacity: 0; }

.media-container figcaption {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 0.9rem;
    letter-spacing: 1px;
    /*text-transform: uppercase;*/
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* --- 5. ABOUT PAGE: PROFILE BANNER --- */
.profile-banner {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #2a2a2a;
    border: 1px solid #333;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 100%;
    margin-top: 0;
	margin-bottom: 3rem;
    overflow: hidden;
    
    /* Strict height */
    height: 240px; 
}

.banner-section { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }

/* --- 5. ABOUT PAGE: PROFILE BANNER --- */

/* 1. Adjust the Section Sizes */
.banner-left {
            display: flex;           /* Enables flexbox for alignment */
            flex: 0.8;				/* Reduced from 1 to 0.8 so it takes up slightly LESS space */
			flex-direction: column;  /* Stacks the Title and Contact info vertically */
            justify-content: center; /* Centers vertically */
            align-items: center;     /* Centers horizontally */
            text-align: center;      /* Ensures the text itself is centered */
            height: 100%;            /* Ensures it uses the full height of the banner */
        }

.banner-middle { 
    /* Increased from 1 to 1.2 so it takes up MORE space */
    flex: 1.2; 
    align-items: center; 
}

/* 2. Fix the Text Wrapping */
.cv-text { 
    font-family: 'Raleway', sans-serif; 
    font-size: 1.2rem;   /* Your larger size */
    color: #e0e0e0; 
    
    /* CRITICAL FIX: Increased from 180px to 350px */
    /* This allows the text to stretch out instead of stacking */
    max-width: 350px; 
    
    text-align: right; 
}

.banner-right { width: auto; flex-shrink: 0; position: relative; }

/* Find this section in style.css and update these three blocks */

/* --- 5. ABOUT PAGE: PROFILE BANNER --- */

/* --- BANNER LEFT: Name & Title --- */

.banner-name { 
    font-family: 'Georgia', serif; 
    font-style: italic;
    font-weight: 400; 

    /* CHANGE SIZE OF "Rachel Engstrom" HERE */
    font-size: 3rem;  
    
    color: #fff; 
    margin-bottom: 0.2rem; 
    line-height: 1; 
	
}

.banner-title { 
    font-family: 'Raleway', sans-serif; 
    font-weight: 300; 
    
    /* CHANGE SIZE OF "Costume Designer" HERE */
    font-size: 1.2rem; 
    
    color: #aaa; 
    margin-bottom: 0.5rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

/* --- BANNER CONTACT SECTION --- */

/* 1. The Container (General settings) */
.banner-contact { 
    font-family: 'Raleway', sans-serif;
    color: #ccc; 
    margin-top: 5px;
}

/* 2. The Label ("Contact Me:") */
.banner-contact span {
    font-size: 1.1rem;  /* Change this number for "Contact Me:" */
    font-weight: 400;
}

/* 3. The Email Link */
.banner-contact a { 
    font-size: 0.9rem;  /* Change this number for the Email Address */
    font-weight: normal; 
    color: #e0e0e0; 
    margin-left: 5px; 
	text-align: center
}

.cv-wrapper { display: flex; align-items: center; gap: 1rem; }
.pdf-icon { width: 50px; height: 50px; border-radius: 4px; transition: transform 0.2s ease; }
.cv-icon-link:hover .pdf-icon { transform: scale(1.1); }
/* --- BANNER MIDDLE: CV Download Text --- */


.banner-img { 
    height: 100%; 
    width: auto; 
    object-fit: cover; 
    display: block;
    border: 1px solid #ffffff; 
    box-sizing: border-box;    
}

/* --- 6. ABOUT PAGE: BIO GRID (THE FIX) --- */
.about-grid {
    /* SWITCHED TO FLEXBOX: This guarantees side-by-side layout */
    display: flex; 
    flex-direction: row; 
    gap: 3rem;
    width: 100%;
    align-items: flex-start;
}

.about-sidebar { 
    text-align: left;
    /* Forces this column to take up 40% of the width and not shrink */
    flex: 0 0 40%; 
    max-width: 40%;
}

.about-image {
    width: 100%;
    height: auto;
    border: 1px solid #444;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Update this section in style.css */

.about-text-box {
    flex: 1; 
    background-color: #2a2a2a; 
    padding: 2.5rem;
    border: 1px solid #333;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    
    /* Font Settings */
    font-family: 'Georgia', serif; 
    font-style: italic; /* <--- Makes everything italic */
}

.about-text-box h2 {
    font-weight: normal; 
    font-size: 22pt;      /* Reduced by 5pt */
    margin-bottom: 1.5rem; 
    color: #fff;
}

.about-text-box p {
    font-size: 15pt;      /* Reduced by 5pt */
    margin-bottom: 1.5rem; 
    color: #d0d0d0; 
    line-height: 1.5; 
    text-align: justify; 
}

/* --- 7. FOOTER --- */
.site-footer {
    background-color: #1f1f1f; text-align: center; padding: 2rem; margin-top: 2rem; font-size: 0.8rem; color: #666; width: 100%;
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 1024px) {
    .site-header { flex-direction: column; gap: 1rem; text-align: center; }
    .logo-container { text-align: center; }
    .main-nav ul { justify-content: center; }
}
@media (max-width: 900px) {
    .profile-banner { height: auto; flex-direction: column; text-align: center; }
    .banner-left { border-right: none; border-bottom: 1px solid #333; text-align: center}
    .banner-middle { border-bottom: 1px solid #333; padding: 1.5rem; border-right: none;}
    .banner-right { width: 100%; height: 250px; }
    .banner-img { width: 100%; height: 100%; }
    
    /* Stack Bio Grid */
    .about-grid { flex-direction: column; gap: 2rem; }
    .about-sidebar { flex: 1; max-width: 100%; width: 100%; text-align: center; }
    .about-image { max-width: 500px; }
}
@media (max-width: 768px) {
    .site-header { padding: 2rem 1rem; }
    .logo-container h1 { font-size: 48pt; }
    .subtitle { font-size: 36pt; }
    .main-nav ul { flex-direction: column; gap: 1rem; text-align: center; }
}

/* --- DROPDOWN MENU STYLES --- */

/* 1. The Parent Container */
.dropdown {
    position: relative; /* Anchors the dropdown menu to this button */
    display: inline-block;
}

/* 2. The Hidden Menu */
.dropdown-content {
    display: none;             /* Hidden by default */
    position: absolute;        /* Floats outside the normal layout flow */
    background-color: #2a2a2a; /* Matches your text box color */
    min-width: 160px;          /* Minimum width of the menu */
    box-shadow: 0 8px 16px rgba(0,0,0,0.5); /* Drop shadow for depth */
    z-index: 1000;             /* Ensures it sits ON TOP of images/banners */
    top: 100%;                 /* Positions it directly below the link */
    left: 50%;                 /* Centers it... */
    transform: translateX(-50%); /* ...relative to the parent link */
    border: 1px solid #333;
}

/* 3. Links inside the menu */
.dropdown-content a {
    color: #e0e0e0;
    padding: 12px 16px;
    text-decoration: none;
    display: block;            /* Makes the whole row clickable */
    text-align: center;        /* Centers text inside the dropdown */
    font-size: 0.9rem;
    border-bottom: 1px solid #333;
}

/* Remove bottom border from the last link */
.dropdown-content a:last-child {
    border-bottom: none;
}

/* 4. Hover Effects */
.dropdown-content a:hover {
    background-color: #333;    /* Slightly lighter on hover */
    color: #a8d1ff;            /* Your accent blue */
}

/* THE MAGIC: Show the menu when hovering over the parent <li> */
.dropdown:hover .dropdown-content {
    display: block;
}

/* --- HOME PAGE SLIDESHOW TEXT --- */

.caption-line-1 {
    display: block;
    
    /* UPDATED: Use the new Google Font */
    font-family: 'Raleway', sans-serif;
    
    font-size: 14pt;  
    font-weight: 00; /* 400 is 'Normal' weight */
    font-style: italic;
    color: #fff;
    
    margin-bottom: 0;  
    line-height: 1.1;    
    text-transform: none;
    letter-spacing: 1px;
}

.caption-line-2 {
    display: block;
    
    /* UPDATED: Use the new Google Font */
    font-family: 'Raleway', sans-serif;
    
    font-size: 12pt; 
    font-weight: 300; /* 300 is 'Light' weight */
    color: #ccc;
    font-style: italic;
    
    line-height: 1.2; 
    margin-top: 2px; 
}