/*
 * Custom stylesheet for the Seven Seas Archaeometallurgy Research site.
 *
 * This file is based off of the original site styles but has been updated
 * to address a number of accessibility and usability issues.  In the
 * production version of the site the default text colour was a dark
 * charcoal (#1f2937) while the background was a very dark navy (#001f3f).
 * That combination resulted in extremely low contrast for body copy,
 * headings and list items.  Additionally some interactive elements such
 * as labels on the contact form inherited the dark text colour which
 * rendered them almost invisible.  The adjustments below define a
 * lighter palette for textual content and explicitly set colours on
 * headings, links and form controls to ensure sufficient contrast.
 */

/* ========== CSS VARIABLES ========== */
:root{
  /* core background colours remain unchanged */
  --color-bg-primary: #001f3f;
  --color-bg-header:  #0b2742;
  --color-accent:     #16A085;
  --color-button:     #B87333;
  --color-button-hover:#944D2E;
  /*
   * Updated main text colour: changed from a very dark grey to a
   * light slate (#cbd5e1).  This value provides a contrast ratio of
   * greater than 7:1 against the primary background which meets WCAG
   * AA/AAA guidelines for body text on dark backgrounds.
   */
  --color-text-main: #cbd5e1;
  /* remain unchanged */
  --color-bg-light:  #F9FAFB;
  --radius:          1.25rem;
  --shadow:          0 8px 24px rgba(0,0,0,.12);
  --maxw:            1100px;
  --pad:             1rem;
  --pad2:            2rem;
}

/* ========== RESET & GLOBAL ========== */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  background: var(--color-bg-primary);
  color: var(--color-text-main);
}

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

/*
 * Generic container for page-level illustrations.
 * Many of the content pages now include custom artwork to enrich
 * the reading experience. The `.page-image` wrapper adds
 * breathing room above and below the artwork and applies a
 * consistent border radius and subtle shadow so that images sit
 * comfortably against the dark background. Using overflow: hidden
 * prevents images with sharp corners from spilling outside of
 * their rounded container.
 */
.page-image{
  margin:1.5rem 0 2rem;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  /* Limit the visual height of page-level illustrations so they don’t overwhelm the surrounding content. */
  max-height:450px;
}

.page-image img{
  display:block;
  width:100%;
  height:auto;
}

/*
 * Links use a pale blue to stand out against the dark background.  The
 * default link colour (#cbd5e1) would blend with the body text.  A
 * slightly brighter hue (#90cdf4) improves discoverability.  Hover
 * styles reinforce interactivity.
 */
a{
  color:#90cdf4;
  text-decoration:none;
}

a:hover{
  color:#a3e2ff;
  text-decoration:underline;
}

/* ========== LAYOUT ========== */
.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--pad);
}

.content{
  padding:var(--pad2) 0;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}

@media (min-width:900px){
  .grid-2{ grid-template-columns:1fr 1fr; }
}

/* ========== HEADER ========== */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(11,39,66,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  border-bottom:1px solid rgba(255,255,255,.1);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
}

.brand{
  display:flex;
  gap:.5rem;
  align-items:center;
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

.brand-mark{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

/* navigation links appear in pale blue */
.main-nav .nav-toggle{
  display:none;
}

.main-nav ul{
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
}

.main-nav a{
  color:#dbeafe;
  text-decoration:none;
  padding:.5rem .75rem;
  border-radius:.5rem;
  transition:background .2s ease;
}

.main-nav a:hover{
  background:rgba(255,255,255,.1);
}

@media (max-width:760px){
  .main-nav .nav-toggle{
    display:inline-block;
    background:none;
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    padding:.4rem .6rem;
    border-radius:.5rem;
  }
  .main-nav ul{
    display:none;
    flex-direction:column;
    position:absolute;
    right:1rem;
    top:64px;
    background:#0b2742;
    border:1px solid rgba(255,255,255,.15);
    padding:.75rem;
    border-radius:.75rem;
    box-shadow:var(--shadow);
  }
  .main-nav[aria-expanded="true"] ul{
    display:flex;
  }
}

/* ========== HERO ========== */
.hero{
  position:relative;
  background:linear-gradient(180deg,#052544, #001f3f 60%, var(--color-bg-primary));
  color:#fff;
  padding:2.5rem 0 0;
}

.hero .container{
  display:grid;
  gap:1.5rem;
  align-items:center;
}

@media (min-width:900px){
  .hero .container{ grid-template-columns:1.3fr 1fr; }
}

.hero-media picture,
.hero-media img{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.hero-copy h1{
  font-size:clamp(1.8rem,2.5vw,3rem);
  margin:0 0 .5rem;
  color:#fff;
}

.hero-copy p{
  opacity:.9;
  margin:0 0 1rem;
  color:#f1f5f9;
}

.btn{
  display:inline-block;
  background:var(--color-button);
  color:#fff;
  text-decoration:none;
  padding:.7rem 1rem;
  border-radius:.75rem;
  box-shadow:var(--shadow);
  transition: background .2s ease;
}

.btn:hover{
  background:var(--color-button-hover);
}

/* ========== WAVES ========== */
.wave{
  position:relative;
  height:80px;
  margin-top:2rem;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.15), transparent 60%);
  mask: linear-gradient(180deg, #000 30%, transparent);
}

/* ========== CARDS ========== */
.features{
  display:grid;
  gap:1rem;
  padding:2rem 0;
}

@media (min-width:900px){
  .features{ grid-template-columns:repeat(3,1fr); }
}

.card{
  background:#fff;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
  color:#1e293b;
}

.card h2{
  margin-top:0;
  color:#0f172a;
}

/* ========== TEAM ========== */
.team-grid{
  display:grid;
  gap:1rem;
}

@media (min-width:900px){
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}

.team-card{
  background:#fff;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
  text-align:center;
  color:#1e293b;
}

.team-card h3{
  margin-top:.75rem;
  color:#0f172a;
}

.team-card p{
  margin:0.5rem 0 0;
  color:#334155;
}

/* ensure team member images are circular */
.team-card img{
  border-radius:50%;
  width:200px;
  height:200px;
  object-fit:cover;
  margin-inline:auto;
}

/* ========== FORMS ========== */
form{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

label{
  font-weight:600;
  display:block;
  margin-bottom:.25rem;
  color:#e2e8f0;
}

input,
textarea{
  display:block;
  width:100%;
  padding:.5rem .75rem;
  border:1px solid #334155;
  border-radius:.5rem;
  background:#0b2742;
  color:#e2e8f0;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:#64748b;
}

/* Style the send button on contact form */
button[type="submit"],
input[type="submit"]{
  background:var(--color-button);
  color:#fff;
  border:none;
  padding:.6rem 1rem;
  border-radius:.5rem;
  cursor:pointer;
  box-shadow:var(--shadow);
}

button[type="submit"]:hover,
input[type="submit"]:hover{
  background:var(--color-button-hover);
}

/* ========== FOOTER ========== */
.site-footer{
  background:#061a2d;
  color:#cbd5e1;
  margin-top:2rem;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}

.footer-inner .social{
  display:flex;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:0;
}