/* --- 1. Variables & Base Setup --- */
:root {
  --primary-blue: #003c57;    /* Deep "Night Blue" for Authority */
  --ocean-blue: #206095;      /* Accessible Action Blue */
  --sand-gray: #f5f5f6;       /* Soft Background to reduce eye strain */
  --text-main: #222222;       /* High-contrast for readability */
  --accent-teal: #00a3a6;     /* Modern data highlight color */
  --border-color: #d1d9e0;
  --accent-blush: #A60050;
  --accent-sand: #A3A600;
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--sand-gray);
  color: var(--text-main);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* align-items: center; -> Removed this from body, we handle centered content in content-block */
}

/* --- 2. Layout Containers & HERO --- */

.content-block {
    max-width: 1200px;
    width: 90%; /* Increased slightly for better mobile use */
    margin: 0 auto;
}
/* --- 1. The White Top Band --- */
.logo-bar {
    background-color: #ffffff;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color); /* Optional subtle line */
    /* Keeps the logo left-aligned with your page content */
    display: flex; 
    align-items: center;
}

.logo {
    max-height: 45px; /* Adjust based on your specific logo file */
    display: block;
}

/* --- 2. The Hero Section (Modified) --- */
.hero-header {
    /* Background Image with overlay */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('hero-coastal.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Height & Alignment */
    min-height: 60vh; /* Adjusted slightly so it's not too tall with the new bar */
    display: flex;
    align-items: center; /* Vertically centers the text in the hero */
    
    /* Branding Border at the bottom of the image */
    border-bottom: 4px solid var(--primary-blue); 
    margin-bottom: 50px;
}

/* Ensure the text is readable and aligned */
.hero-content {
    color: white;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.tagline {
    font-size: 2rem;
    font-weight: 300;
    margin-top: 10px;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Container for the logo bar at the top */
.header-top-bar {
    padding: 20px 0;
    width: 100%;
}

/* 1. LOGO STYLING */
.logo {
    max-height: 50px; /* Adjust based on your logo shape */
    width: auto;
    display: block;
}

/* Container to center the text vertically in the hero */
.hero-content {
    flex: 1; /* Takes up remaining vertical space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers h1 and tagline */
    align-items: flex-start; /* Aligns text to the left */
    padding-bottom: 10vh; /* Nuance adjustment to push text slightly up from dead center */
}


/* --- 3. Typography --- */
.hero-content h1 {
  font-size: 3.5rem; /* Made bigger for Hero */
  color: white; /* Changed from primary-blue for overlay */
  margin: 0 auto;
  letter-spacing: -1px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Adds readability */
  text-align: center;
}

#main-text {
    font-size: 1.4em;
    text-align: left;
}

/* Standard H2/H3 outside hero */
h2 {
  font-size: 1.8rem;
  color: var(--primary-blue);
  margin-top: 10px;
  margin-bottom: 20px;
}

h3 {
    color: var(--ocean-blue);
}

/* 2. BIG TAGLINE ACROSS IMAGE */
.tagline {
  font-size: 2rem; /* significantly larger */
  color: white; /* Changed from #555 for overlay */
  font-weight: 300;
  margin: 0 auto;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- 4. Content Sections (Maintained) --- */
section {
  background: white;
  padding: 40px; /* increased padding */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* softer shadow */
  margin-bottom: 30px;
}

.focus {
    font-size: 1.2rem;
    line-height: 1.8;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 12px;
}

/* --- 5. Interactive Elements (Maintained) --- */
.contact-card {
    border-left: 6px solid var(--accent-teal);
}

.provenance-card {
    border-left: 6px solid var(--accent-sand);
}

.linkedin-link {
    color: var(--ocean-blue);
    font-weight: 600;
    text-decoration: none;
}
.linkedin-link:hover {
    text-decoration: underline;
}

footer {
    text-align: center;
    padding: 40px 0;
    font-size: 0.9rem;
    color: #666;
}

/* --- New Grid Layout Styles --- */

.grid-container {
    display: grid;
    /* This creates two equal columns (1fr each) */
    grid-template-columns: 1fr 1fr; 
    gap: 30px; /* Space between the two cards */
    margin-bottom: 40px;
    align-items: stretch; /* Ensures both boxes are the same height */
}

/* Reset margins for sections inside the grid so they don't double-up */
.grid-item {
    margin-bottom: 0; 
    height: 100%; /* Makes sure the white background fills the column */
}

/* --- Responsive Fix for Mobile --- */
@media (max-width: 850px) {
    .grid-container {
        /* On smaller screens, stack them on top of each other */
        grid-template-columns: 1fr;
    }
}

/* --- 6. Responsive Adjustments --- */
@media (max-width: 768px) {
  .hero-content h1 { font-size: 2.5rem; }
  .tagline { font-size: 1.5rem; }
  .hero-header { min-height: 60vh; }
}

@media (max-width: 480px) {
  .hero-content h1 { font-size: 2rem; }
  .tagline { font-size: 1.2rem; }
  section { padding: 20px; }
  .logo { max-height: 40px; }
}