/*Things to Add:
    -Standard div box details
    -Optional Accent Div box details
    -classes for nav wrappers
    -Choose a favourite font!!!
    -Create a stylesheet for each page?
    -Adopt the naming convention: class=type-description [class="nav-homeheader"]
    -figure out the difference between nav-main and div-navbuttons
*/

/*set color themes*/
:root{
    --color-primary: #990f00; /*penn red*/
    --color-secondary: #ff1b00; /*scarlet*/
    --color-bg: #100b00; /*smoky black*/
    --color-grey: #5e5e5e; /*davy's grey*/
    --color-white: #fbfbfb; /*white*/
    --color-a1: #660099; /*indigo*/
    --color-a2:#000099;/*duke blue*/
    --color-a3:#009999;/*dark cyan*/
    --color-a4:#199907;/*forest green*/
    --color-a5:#999900; /*olive*/

    /* Awards layout variables */
    --award-title-height: 2.4rem; /* estimated height for title (can be tuned) */
    --award-meta-height: 1.2rem;  /* estimated height for meta text */
    --award-body-padding-vertical: 1rem; /* top + bottom padding reserved inside body */
    --award-body-min: calc(var(--award-title-height) + var(--award-meta-height) + var(--award-body-padding-vertical)); /* reserve space for title + meta + padding */
    --award-title-bg: rgba(0,0,0,0.45); /* darker background for title container */
    --award-title-color: var(--color-white);
} 

@font-face{
    font-family: "Chunk1";
    src: local("Chunk1"), 
         url("fonts/Chunk.woff2") format("woff2"),
         url("fonts/Chunk.woff") format("woff"),
         url("fonts/Chunk.ttf") format("truetype"),
         url("fonts/Chunk.eot") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*set the background image*/
body{
    background-image: url("TCB-Processed2.png");
    background-size:100vw;
    background-position: center;
    background-attachment:scroll;
    color: var(--color-white);
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-bg);
}

.div-homeintro {
  display: inline-block;      /* shrink-to-fit behavior */
  width: auto;
  max-width: 55vw;            /* prevent it from getting too wide */
  padding: 1.25rem 2rem;      /* gives a "just-bigger-than-the-words" buffer */
  box-sizing: border-box;     /* include padding in max-width */
  background-color: rgba(70,70,70,0.8);
  border-radius: 15px;
  white-space: normal;
  overflow-wrap: break-word;
  margin: 0;                  /* spacing is handled by the flex gap */
  align-self: center;         /* ensure vertical centering in the row */
}

.div-greybackground{
    background-color: var(--color-grey);
    background-color: rgba(70,70,70,0.9);
    margin: auto;
    margin-top: 3vh; 
    margin-bottom: 20px;
    width: auto;
    max-width: 95vw;
    border-radius: 15px;
    padding: 10px;
}

/* responsive: stack image then box on narrow screens */
@media (max-width: 800px) {
  .div-hometop { justify-content: center; }
  .div-homeowenpic { max-width: 80%; margin-bottom: 1rem; }
  .div-homeintro { max-width: 95vw; padding: 1rem; }
}

.div-homeowenpic {
  position: relative; /* establish a positioning context for the title card */
  flex: 0 0 auto;             /* keeps image its natural size */
  max-width: 30%;             /* limit width on large screens */
  height: auto;
  display: inline-block; /* shrink-to-fit to the image */
}

.div-hometop {
  display: flex;
  gap: 0rem;                  /* space between image and box */
  align-items: center;        /* vertical centering */
  justify-content: center;    /* centers the pair on the page */
  flex-wrap: wrap;            /* allows stacking on small screens */
  padding: 1vh;
}

.div-navbuttons{
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0; /* allow flex items to shrink without overflowing */
}

.div-navheadermain{
    background-color: var(--color-white);
    padding: clamp(.5rem, 1.5vw, 1rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(.5rem, 2vw, 1.5rem);
    width: 100%;
    box-sizing: border-box;
} 

.div-navlogo{
    padding-left: clamp(.25rem, 1vw, .75rem);
    display: flex;
    align-items: center;
    margin-left: 0;
} 

.div-navlogo a{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.div-navlogo a:focus-visible{
  outline: 3px solid rgba(0,0,0,0.6);
  border-radius: 6px;
}

.img-headerlogo{
    max-height: clamp(40px, 6vh, 64px); /* responsive logo sizing */
    width: auto;
    height: auto;
    padding: 6px;
} 

h1{
    font-family: "Chunk1", Arial, sans-serif;
    font-size: 3.5rem;
    color: var(--color-secondary);
    text-shadow: 2px 2px 5px var(--color-white);
    letter-spacing: 0.05em;
}

.h1-green{
    font-family: "Chunk1", Arial, sans-serif;
    font-size: 3.5rem;
    color: var(--color-a4);
    text-shadow: 2px 2px 5px var(--color-grey);
    letter-spacing: 0.05em;
    margin: 0; /* spacing handled by .page-header */
}

.h1-red{
    font-family: "Chunk1", Arial, sans-serif;
    font-size: 3.5rem;
    color: var(--color-secondary);
    text-shadow: 2px 2px 5px var(--color-white);
    letter-spacing: 0.05em;
    margin: 0; /* spacing handled by .page-header */
}

/* Page header wrapper for section titles */
.page-header{
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content; /* shrink to the width of its contents */
  padding: 1rem 2rem; /* small horizontal padding so box is slightly wider than the text */
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  margin: 0 auto 1rem; /* center the box horizontally */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Make sure the heading inside doesn't add unwanted extra width */
.page-header h1{
  margin: 0;
  display: inline-block; /* keep it shrink-to-fit inside the box */
  padding: 0; /* spacing handled by the .page-header */
}

@media (max-width: 520px){
  .page-header{ padding: .45rem .6rem; width: fit-content; margin: 0 auto .75rem; }
  .h1-green{ font-size: 1.6rem; }
}

h2{
    font: bold;
    color:var(--color-white);
}

.home-introparagraph{
    font-size: 1.5rem;
    line-height: 1.4;
    margin-top: 0.3vh;
    margin-bottom: 20px;
}

.home-introparagraph a{
    color: var(--color-a4);
    text-decoration: underline;
}
html,body {
    margin:0;
    padding:0;
    height: 100%;
    overflow-x: hidden; /* ensure no accidental horizontal scroll */
}

.img-headerlogo{
    width: auto;
    height: 6vh;
    padding:  8px;
}

.img-portfoliopic{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;   
    height: 80vh; 
    max-height: 85vh; 
    padding: 5px;
}

nav a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .8rem;
    text-decoration: none;
    color: #ffffff;
    font-family: 'Chunk1', Arial, sans-serif; /* use theme font */
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    background-color: var(--color-primary);
    border-radius: 8px;
    min-height: 3vh;
    max-height: 6vh;
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 0; /* prevent links from shrinking and wrapping */
} 

nav a:hover,
nav a:focus {
    background-color: var(--color-secondary);
    color: var(--color-white);
    outline:none;
    outline-width: 100%;
    box-shadow: 0 0 0 3px rgba(255,27,0,0.12);
}

nav li{
    margin: 0;
} 

nav a:hover{
    background-color: var(--color-secondary);
}

.nav-main{
    display: flex;
    align-items: center;
    font-family: 'Chunk1';
}

nav ul{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(.4rem, 1.2vw, 1rem);
    align-items: center;
    flex-wrap: nowrap; /* keep all buttons on one row */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Make nav items size to their content (buttons scale to text) */
nav ul li {
  flex: 0 0 auto; /* size to content instead of stretching */
}

nav a{
  width: auto; /* size to content */
  justify-content: center;
  white-space: nowrap; /* keep label on one line */
}

/* Toggle button (hidden on wide screens) */
.nav-toggle{
  display: none;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  padding: .35rem .6rem;
  cursor: pointer;
}

.nav-toggle:focus{ outline: 3px solid rgba(0,0,0,0.12); border-radius: 6px; }  

p{
    color:var(--color-white);
    font-size: 1.2rem;
    line-height: 1.6;
}
p.shifted{
    margin-left: 30px;
}
/* Inline under-construction banner (regular flow) */
.site-banner--inline {
  display: block;
  width: 100%;
  background: var(--color-secondary, #ff1b00);
  color: var(--color-white, #fff);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  font-family: var(--ui-font, Arial, Helvetica, sans-serif);
}

.site-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
}

.site-banner__icon { font-size: 1.1rem; }
.site-banner__text { text-align: center; }

/* close button */
.site-banner__close {
  margin-left: 1rem;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  padding: .2rem;
}

/* small screens */
@media (max-width: 720px) {
  .site-banner__inner { padding: .45rem .6rem; font-size: .95rem; flex-wrap: wrap; }
  .div-navheadermain { flex-direction: row; align-items: center; padding: .5rem; }
  .div-navlogo { text-align: left; width: auto; }
  .nav-main { width: auto; }
  /* show hamburger and hide inline nav on small screens */
  .nav-toggle{ display: inline-flex; }
  nav ul{ display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-white); flex-direction: column; gap: .4rem; padding: .75rem; box-shadow: 0 6px 18px rgba(0,0,0,0.15); z-index: 40; }
  nav.open ul{ display: flex; }
  nav ul li { flex: none; }
  nav a { width: 100%; justify-content: flex-start; padding-left: 1rem; }
}

/* small screens narrow but still visible */
@media (max-width: 520px) {
  .site-banner__inner { padding: .45rem .6rem; font-size: .95rem; flex-wrap: wrap; }
  nav a { font-size: 0.95rem; }
}

/* Quotes tiled section */
.quotes-section {
  max-width: 95vw;
  margin: 1.5rem auto;
  padding: 0 0.5rem;
}
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr));
  gap: 1rem;
  align-items: center;
  grid-auto-rows: auto;
}
.quote-card {
  background: rgba(197, 44, 44, 0.45);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
}
.quote-card blockquote {
  margin: 0;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
}
.quote-author {
  margin-top: 0.75rem;
  font-weight: 600;
  text-align: right;
  color: var(--color-a5);
  font-style: normal;
}
.quote-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  min-height: 120px;
}
.photo-caption {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  color: var(--color-white);
  text-align: center;
}
/* make a couple of photos span two rows on larger screens for variation */
@media (min-width: 900px) {
  .quote-photo--tall { grid-row: span 2; min-height: 260px; }
}

/* Awards grid */.awards-controls { margin: .75rem 0; display: flex; gap: .5rem; align-items: center; }.awards-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* responsive column count */
  grid-auto-rows: auto; /* rows size to their content so each card can scale to image aspect ratio */
  gap: 1.25rem;
  align-items:center;
  margin-top: 1rem;
} 

.award-card {
  display: flex;
  padding-top: 2vh;
  padding-left: 1vh;
  padding-right: 1vh;
  flex-direction: column;
  height: auto; /* let content (image) determine height */
  min-height: 0;
  max-height: fit-content; /* cap card height so extremely tall images remain reasonable */
  background-color: rgba(220, 12, 12, 0.15);
  border-radius: 10px;
  overflow: hidden;
  align-items: stretch;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
} 

.award-image {
  width: 100%;
  display: block;
  padding: 0.25rem; /* small padding so the image isn't flush against rounded corners */
  box-sizing: border-box;
  object-fit: contain; /* ensure the full image is visible */
  height: auto; /* preserve intrinsic aspect ratio */
  max-height: 35vh; /* cap image while leaving room for body padding */
  align-self: center;
}  

.award-body {
  padding: 0.75rem 1rem;
  flex: 0 1 auto; /* allow the body to grow/shrink as needed to accommodate meta */
  min-height: min-content; /* size the body to its content so it doesn't create extra empty space */
  color: var(--color-white);
  font-family: Arial, Helvetica, sans-serif;
  overflow: visible;
  overflow-wrap: break-word; /* ensure long words wrap */
}  

.award-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.05rem;
  font-family: "Chunk1", Arial, sans-serif; /* theme font */
  color: var(--award-title-color); /* separate title color */
  font-weight: 700;
  line-height: 1.18;
  overflow-wrap: anywhere; /* make long words wrap to avoid cutoff */

  /* Title container styling */
  display: inline-block; /* shrink-to-fit inside the body padding */
  background: var(--award-title-bg);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
} 

.award-meta {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-a3);
  overflow-wrap: anywhere; /* prevent truncation */
  line-height: 1.25;
} 

.award-body a { color: var(--color-a5); text-decoration: underline; }

/* Footer */
.site-footer{
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-white);
  margin-top: 2.5rem;
}
.site-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.footer-left .footer-logo img{ max-height: 75px; }
.footer-links{ display: flex; gap: .75rem; align-items: center; }
.footer-links a{ color: var(--color-white); text-decoration: underline; }
.footer-contact a{ display:flex; gap:.6rem; align-items:center; color: var(--color-bg);}
.site-footer__copy{ text-align:center; padding:.6rem; font-size:.9rem; opacity: .9; background: rgba(0, 0, 0, 0.901); }

@media (max-width: 700px){
  .site-footer__inner{ flex-direction: column; align-items: center; text-align:center; }
  .footer-left{ order: 1; }
  .footer-links{ order: 2; flex-wrap: wrap; justify-content:center; }
  .footer-contact{ order: 3; }
}

/* Responsive breakpoints */
@media (max-width: 900px) {
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .awards-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .award-image { max-height: calc(45vh - var(--award-body-min)); }
}