nav, header, main, footer {
    grid-column: 1 / -1;
}

img {
  max-width: 100%;
  height: auto;
}

.dm-sans-h1 {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

html {
  font-size: 16px; /* Set root font size to use rem units*/
  font-family: Verdana, arial, sans-serif;
}

/*remove default browser margins on h1 and h2*/
h1,h2 {
    margin:0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /*gap: 20px;*/
    min-height:100dvh;
    grid-template-rows: auto auto 1fr auto;
}

header {
    /*grid-column: 1 / span 4;*/
    height: 50%;
}

body{
    background-color: #5ac5e5;
}

main {
    /*display:flex;/*give the parent container a flex layout to center children
    justify-content:center;
    align-items: flex-start;
    background-color:white;
    /*grid-column: 1/span 4;
    min-height: fit-content;
    margin-bottom:0;*/
    display: flex;
    flex-direction: column; /* Stacks children neatly from top to bottom */
    align-items: center;    /* Centers your content blocks nicely */
    background-color: white;
    grid-column: 1 / -1;
    min-height: fit-content;
    margin-bottom: 0;
    padding-bottom: 40px;
}

footer {
    background-color:#aae0f1;  
    min-height: 100px;
    /*grid-column:1/span 4;*/
    color:#54adcb;
    text-align:center;
    font-size: small;
}

.textoverlay {
    display:flex;
    /*background-color: rgb(247, 18, 186);*/
    grid-column: 1 / 8; /* sit in columns 1-6 */
    grid-row:1; /*sit in row 1*/
    margin-left:30px;
    margin-top:20px;
    z-index:1;
    flex-direction:column; /*causes h1 and h2 to stack vertically*/
}

h1{
    color:white;
    font-family: Verdana, arial, sans-serif;    
    font-size:5rem;
}

h2{
    color:white;
    font-family: Verdana, arial, sans-serif;
    font-size:1.8rem;}

h3{
    font-size:1.5rem;
    color:#5ac5e5;
    margin-left:30px;
    padding-top:20px;
}

#h3title{
    color:#307c95;
}

h4 {
    color:#307c95;
    font-weight: bold;
}

.hero {
    display:grid;
    grid-template-columns:repeat(10, 1fr);
    grid-template-rows:minmax(550px, auto);
    width:100%;
    min-height:550px;
    position:relative;
    overflow:hidden;

    background-image: url('../image/sea.jpg'); 
    background-size: cover;       
    background-position: center center;  /* Centers the best part of the photo */
    background-repeat: no-repeat;

}

.hero img {
    width: 100%;
    height:100%;/*change*/
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    /*height: 60%; /* Changed from 40% to fill the hero container */
    object-fit: cover;
}

nav ul {
    display:flex;
    list-style-type:none;
    margin:0;
    padding:0;
    /*overflow:hidden; this was causing dropdown to not appear*/
    background-color:#aae0f1; 
}

nav ul li a {
    display:block;
    color:black;
    text-align: center;
    padding:14px 16px;
    text-decoration:none;
}

li a:hover {
    background-color:#54adcb;
    color:#dff2f9;
}

nav {
   /*grid-column: 1/span 4;*/
}

.dropdown {
    position:relative;
}

.dropdown-button{
    background-color:#5ac5e5;
    color:white;
    padding: 25px;
    font-size:16px;
    border:none;
    cursor:pointer;
}

.dropdown-content{
    display:none;
    position:absolute;
    flex-direction:column; /*creates vertical stacking*/
    top:100%; /*push menu down from top of parent div*/
    background-color: whitesmoke;
    min-width:200px;
    z-index:10; /*shows dropdown content in front of header image*/
}

.dropdown-content a {
  color: black;
  background-color: #aae0f1;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #54adcb;
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}


.dropdown:hover .dropdown-button {
  background-color: #54adcb;
  color:#dff2f9;
}

/* Grid layout for your portfolio cards */
.portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.project-card {
  width: 100%;
  max-width: 280px;
}


.card-image-wrapper {
  width: 100%;
  max-width: 1200px; /* limits width on desktop */
  box-sizing: border-box;
  height: 180px !important;             /* Fixed height for ALL project cards */
  background-color: #f4f4f6; /* Neutral light grey background */
  border-radius: 8px;
  display: flex;
  justify-content: center;   /* Centers image horizontally */
  align-items: center;       /* Centers image vertically */
  padding: 16px;             /* Gives space around tall/wide images */
  overflow: hidden;
}

/* Image scaling rules */
.card-image-wrapper img {
  max-width: 80% !important;
  max-height: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;       /* Ensures entire screenshot fits without cropping */
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Optional subtle drop shadow */
}



.textbox {
    display:flex;
    flex-wrap:wrap ;
    font-size: 16px;
    max-width:80%;
    
}

.textbox2 {
    display:flex;
    flex-wrap:wrap;
    font-size: 16px;
    max-width:80%;
}

.maindiv{
  display:flex;
  flex-wrap:wrap;
}


p {
    color:#54adcb;
    font-family: Verdana, arial, sans-serif;
    padding:30px 30px 0px 30px;
    font-size:1.2rem;
    margin:10px;
}

body {
    font-family: Verdana, arial, sans-serif;
}

a {
    color:#307c95;
}

a:visited{color:white;
}

a:hover{color:white;
}

.coffeepageimg {
    width:30%;
    max-height: 300px;
    padding-top:50px;
    margin-right:30px;
    padding-bottom:20px;
}

#coffeecupimg {
    padding-top:30px;
}
/*Issues:implementing a vertical nav bar that would switch to horizontal on mobile.
The image shrinking and resizing on smaller screens*/

ul, ol {
    color:#54adcb;
    padding-left: 50px;
}

table, th, td  {border:2px solid white;
border-collapse:collapse; 
text-align:center;
}

th,td {background-color:#aae0f1;
padding:10px;}

#tablestyle {margin-left:30px;
margin-right:auto;
}

h3 a:hover, a:visited {
color:#0e8fb7c5;
}

.thingstotry {display:flex;
flex-direction: column;
flex-wrap: wrap;
flex-grow: inherit;
width:100%;/*tells div to take up an entire row instead of sitting to the right of table on oscar.html*/
}

.reviewbox{
background-color:#aae0f1;
margin-bottom:30px;
padding:10px;
margin-left:30px;
}

.reviewbox p {
    color:black;
}

#aimage{/*padding-left:30px;*/
   width: 80%;             /* Scales nicely on mobile and desktop */
    max-width: 500px;       /* Keeps it from getting monstrously huge */
    padding-left: 0;        /* Removes old side-padding */
    margin: 20px auto;      /* Centers the image horizontally */ 
}

hr {
  display: block;
  width: 100%;
  height: 0;
  border: none;
  border-top: 2px solid #aae0f1;
}


@media (min-width: 768px) {
    .hero {
        grid-template-rows: minmax(300px, auto);
        min-height: 300px;
        overflow: hidden; /* Safely clips background image on big screens */
    }

    .hero-img {
        max-width: 400px;
        width:100%;
    }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.gallery-item {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px; 
}