/* Global styles */
:root{
  --accent:#2a6f97;
  --accent-2:#7cc6e2;
  --muted:#55606a;
  --card:#ffffff;
  --max-width:1000px;
  --radius:12px;
}

html,body{
  height:100%;
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(180deg, #f6fbff 0%, #eef6fb 100%);
  color:var(--muted);
}

/* Skip link */
.skip-link{
  position:absolute;
  left:1rem;
  top:0.5rem;
  background:#003e5c;
  color:#fff;
  padding:0.4rem 0.6rem;
  border-radius:6px;
  transform:translateY(-120%);
  transition:transform 160ms ease-in-out;
  z-index:1000;
}
.skip-link:focus{
  transform:translateY(0%);
  outline:3px solid #ffd166;
}

body{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2rem;
}

header{
  width:100%;
  max-width:var(--max-width);
  background: linear-gradient(90deg,var(--accent), var(--accent-2));
  color:white;
  padding:1.25rem 1.5rem; /* increased padding to make room for nav */
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(42,111,151,0.12);
  margin-bottom:1.25rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

header h1{margin:0;font-family:"Georgia", "Times New Roman", serif;font-size:1.6rem}
header .intro{color:rgba(255,255,255,0.9)}

.nav-list{list-style:none;padding:0;margin:0;display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.nav-list li{margin:0}
.nav-list a{
  color:var(--accent);
  background:rgba(255,255,255,0.15);
  padding:0.45rem 0.7rem;
  border-radius:999px;
  text-decoration:none;
  color:white;
  font-weight:600;
}
.nav-list a[aria-current="page"]{box-shadow:inset 0 -3px 0 rgba(255,255,255,0.12)}
.nav-list a:focus,.nav-list a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.08)}

main{
  max-width:var(--max-width);
  width:100%;
  background:var(--card);
  padding:2rem;
  box-shadow:0 6px 20px rgba(37,78,97,0.06);
  border-radius:10px;
}

/* Card sections */
main section{background:linear-gradient(180deg,#ffffff,#fbfdff);padding:1rem;border-radius:8px;margin-bottom:1rem;transition:transform 180ms ease;}
main section:focus-within, main section:hover{transform:translateY(-3px)}

/* Styling changes in at least 4 elements */
.intro{font-size:1.05rem}
.large{font-size:1.25rem;font-weight:700;color:var(--accent)}
.muted{color:var(--muted)}
strong{font-weight:800}

/* Serif font applied to article headings specifically (non-default serif fallback) */
main h2, main h3{
  font-family: "Georgia", "Times New Roman", serif; /* serif fallback */
  color:#163d4a;
}

/* Travel page unique layout: two-column grid */
body.travel-page main .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

/* Responsive adjustments */
@media (max-width:900px){
  body{padding:1rem}
  body.travel-page main .grid{grid-template-columns:1fr}
  .nav-list{flex-wrap:wrap}
}

/* Image styling */
figure{margin:0}
figure img{max-width:100%;height:auto;display:block;border-radius:6px}

/* Destinations grid */
.destinations{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:0.75rem;
}
.destination-card{background:linear-gradient(180deg,#ffffff,#fbfdff);padding:0.75rem;border-radius:8px;display:flex;flex-direction:column;gap:0.5rem}
.dest-desc{flex:1;color:#425b63}

/* Footer */
footer{margin-top:1rem;color:var(--muted);text-align:center}

/* Small utility classes */
.muted{color:#6b7780}
.accent-text{color:var(--accent)}

/* Ensure focus outlines are visible for keyboard users */
a:focus{outline:3px solid #ffd166;outline-offset:3px}

/* Resume link/button styling (if used elsewhere) */
.resume-link{
  display:inline-block;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:white;padding:0.6rem 0.9rem;border-radius:8px;text-decoration:none;font-weight:700;
}
.resume-link:focus,.resume-link:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(34,90,120,0.12)}

/* PDF viewer */
.pdf-viewer{width:100%;max-width:900px;height:600px;overflow:auto;border:1px solid #e6eef3;border-radius:8px;margin:0.5rem 0}
.pdf-viewer iframe{width:100%;height:100%;border:0}

@media (max-width:700px){
  .pdf-viewer{height:420px}
  .destinations{grid-template-columns:1fr}
}

/* smaller figures for profile/gallery images */
.small-figure{max-width:260px}
.small-figure img{width:100%;height:auto;border-radius:6px}

/* gallery grid used on family/friends pages */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;align-items:start}
.gallery-grid figure{margin:0}

/* Quick links two-column layout with image */
.quick-row{display:flex;gap:1rem;align-items:flex-start}
.quick-links{flex:1}
.quick-image{max-width:320px}
.quick-image img{display:block;width:100%;height:auto;border-radius:8px}

/* Two-column layout to place an image to the right of multiple stacked sections
   (used on the homepage so the image sits to the right of Quick Links and Contact) */
.two-col-overall{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:1rem;
  align-items:start;
}
.left-col{min-width:0}
.right-col{max-width:320px}
.right-col figure{margin:0}
.right-col img{width:100%;height:auto;border-radius:8px;display:block}

@media (max-width:700px){
  .quick-row{flex-direction:column}
  .quick-image{max-width:100%}
  .two-col-overall{grid-template-columns:1fr;}
}

/* remove gap after specific sections when desired */
.no-gap{margin-bottom:0;padding-bottom:0}
.no-gap .quick-row{margin-bottom:0}
.no-gap h2{margin-bottom:0.4rem}