/* --- Reset & General --- */
/* Simple CSS Reset to ensure consistent rendering across browsers */
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: justify;
}

 p {
    font-size: .9em;
}

body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.4;
    background-color: #fff; 
    font-size: 1em;
}

/* --- Layout Container --- */
#wrapper {
    width: 95%; /* Adjusted for a wider layout based on original */
    max-width: 1100px; /* Increased to accommodate the 500px column + large image */
    margin: 0 auto;
    padding: 20px;
    position: relative;
    /* Use grid for modern layout control, matching original spacing */
    display: grid;
    grid-template-columns: 500px 1fr; /* Fixed left column, flexible right */
    gap: 30px; /* Space between columns */
}

/* --- Header with Double Line --- */
header {
    grid-column: 1 / -1; /* Header spans full width */
}

header h1 {
    font-size: 2em; /* Set a standard size */
    text-transform: none; /* Removed commented out capitalization */
    margin-bottom: 10px;
    position: relative;
    display: block;
    letter-spacing: .39em; /* Exact spacing from original */
}

/* This creates the double line that extends to the end of the wrapper */
header h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /* Positioned below the text */
    width: 100%; /* Extends to the end of the container */
    height: 4px; /* Total height of the double line area */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

/* --- Navigation --- */
nav {
    grid-column: 1 / -1; /* Nav spans full width */
    margin-top: 10px; /* Space for the double lines */
    margin-bottom: 0px; /* Added spacing below nav */
}

nav .nav {
    list-style: none;
    display: flex; /* Use flexbox for horizontal layout */
    padding-left: 0;
    margin-left: 0;
}

nav .nav li {
    padding: 0 0 0 0; /* Exact padding from original */
    margin: 0px;
}

nav .nav a {
    text-decoration: none;
    color: #000;
}

nav .nav a:hover {
    color: #03F; /* Blue on hover */
}

nav ul {
  display: flex;
  gap: 30px; /* This creates a reliable 10px space between items */
  margin-top: -40px;
}

/* --- Left Column Content --- */
#leftcolumn {
    /* Grid placement is handled by parent grid definition */
    width: 500px; /* Specific width matching original */
}

#leftcolumn h3 {
    text-align: center;
    margin-bottom: 20px;
    margin-top: -40px;
}

#leftcolumn p {
    margin-bottom: 1em; /* Standard paragraph spacing */
}

.first-word {
    font-weight: bold;
}

.ital {
    font-style: italic;
}

/* Link area with dedication video */
.Travel {
    margin-top: 2em; /* Spacing from paragraphs */
    margin-bottom: 2em;
}

.Travel a {
    text-decoration: none;
    color: #333;
    display: block; /* Makes the entire line clickable, helps with margin application */
    margin-bottom: 2em;
    margin-top: 2em; /* Adjusted to fit the flow better than 6em */
}

.Travel a:hover {
    color: #03F;
    text-decoration: underline;
}

.ThumbText {
     margin: 0em 0em 1em 0em; /* Exact margins from original */
    text-align: left;
    font-size: .8em;
}

td a {
    font: bold;
    font-size: .8em;
    text-decoration: none;
    color: black !important;
}

/* Alternating Row Colors */
tr:nth-child(even) {
  background-color: #e6f2ff; /* Pale Blue */
}

tr:nth-child(odd) {
  background-color: #fafafa; /* Off-White */
}

/* Mouse Over State: Target the cells (td) to ensure text color change */
tr:hover {
  background-color: #007bff !important; /* Blue background */
}

tr:hover td {
  color: #ffffff !important;           /* Forces text to white */
  text-decoration: none !important;    /* Removes underlines from text */
}

/* If your text contains links (<a> tags), use this as well */
tr:hover td a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 1. Target links inside a hovered row */
tr:hover a {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important; /* Some modern themes use borders instead of underlines */
}

/* 2. Target the links in their normal state to remove underlines globally in the table */
table tr td a {
  text-decoration: none;
}

h3 { 
    text-align: center;
}

/* --- Thumbnails Gallery --- */
.thumbnail-gallery {
    display: flex; /* Flexbox for thumbnail row */
    flex-wrap: wrap; /* Wraps to next line */
    gap: 0; /* Gap handled by individual items */
}

.thumbnail-item {
    margin-right: 10px; /* Reset figure margins */
}

.thumbnail {
    opacity: 0.65;
    transition: opacity .2s ease-in-out;
    cursor: pointer;
    border: 2px solid #000000;/* Removes any default border */
}

.thumbnail:hover {
    opacity: 1; /* Full opacity on hover */
}

/* --- Large Image Display Area --- */
.Around {
    /* This container aligns with the nav, so use a large negative top margin 
       to pull it up, mirroring the original's complex positioning. */
    margin-top: -4em; 
    text-align: right; /* Aligns image to the right edge */
}

#LargeOne {
    display: block;
    height: auto;
    max-width: 550px; 
    border: 2px solid #000000; 
    
    /* Ensure opacity starts at 1 */
    opacity: 1;
    
    /* 0.5s provides a elegant, noticeable fade */
    transition: opacity 0.2s ease-in-out; 
}

#LargeOne {
    opacity: 1;
    transition: opacity .2s ease-in-out;
    /* Optional: ensures the image doesn't jump if sizes vary */
    display: block; 
}

/* --- Footer --- */
.Copyright {
    margin-top: 30px; /* Increased top margin for separation */
    font-size: 0.8em;
    text-align: center;
    clear: both; /* Ensures it stays below floated elements if any are reintroduced */
    grid-column: 1 / -1; /* Span full grid width */
}

/* --- Responsive Adjustments --- */

/* Tablet View (Screens smaller than 1024px) */
@media screen and (max-width: 1024px) {
    #wrapper {
        grid-template-columns: 1fr; /* Stack columns vertically */
        max-width: 90%;
        gap: 10px;
    }

    /* iPad Fix: Forces text alignment to center over the global justify rule */
    header h1 {
        text-align: center !important;
    }

    #leftcolumn {
        width: 100%; /* Allow left column to fill width */
    }

    .Around {
        margin-top: 0; /* Remove the negative margin used for desktop alignment */
        text-align: center;
        order: -1; /* Moves the large image above the text for better mobile flow */
    }

    #LargeOne {
        max-width: 100%; /* Ensure image doesn't overflow screen */
        width: auto;
    }
    
    .Travel p a {
        font-size: .9em;
        line-height: .9em;
        margin-bottom: .1em;
    }
}

/* Phone View (Screens smaller than 768px) */
@media screen and (max-width: 768px) {
    header h1 {
        font-size: 1.2em;
        letter-spacing: 0.1em; /* Reduce spacing so name doesn't wrap awkwardly */
        text-align: center !important;
    }

    nav ul {
        display: flex;         /* Turns the list into a flex container */
        list-style-type: none; /* Removes those default bullet points */
        padding: 0;            /* Removes default browser padding */
        margin-top: 0px;       /* iPad/Mobile spacing fix to prevent header lines overlap */
    }

    nav li {
        margin-right: 15px;    /* Adds some breathing room between links */
    }
    
    p {
        font-size: .9em;
        line-height: .9em;
        margin-bottom: .1em;
        text-align: justify;
    }

    .thumbnail-gallery {
        justify-content: center; /* Center thumbnails on small screens */
    }

    #leftcolumn h3 {
        margin-top: 10px; /* Reset the negative desktop margin */
    }
}@charset "UTF-8";
/* CSS Document */