/*  -------- Discover Japan Explorer --------  */
/*  Base variables                               */
:root{
  --red:#d50000;
  --charcoal:#222;
  --off:#f8f8f8;
  --max:1200px;
  font-size:16px;
  line-height:1.6;
  font-family:system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--charcoal);
  background:var(--off);
}

/*  Layout shells                                */
body,html{margin:0;padding:0}
header,footer{background:#fff}
header{border-bottom:3px solid var(--red);position:sticky;top:0;z-index:10}
nav{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;padding:0.5rem 1rem;max-width:var(--max);margin:auto}
nav a{color:var(--charcoal);text-decoration:none;padding:0.25rem 0.5rem;font-weight:600}
nav a:hover,nav a:focus{color:var(--red);outline:none}

main{max-width:var(--max);margin:auto;padding:1rem}
h1,h2,h3{font-weight:700;line-height:1.3;margin-top:2rem;color:var(--red)}
p,li{max-width:70ch}

img{max-width:100%;height:auto;border-radius:4px}

/*  Simple responsive columns                    */
.flex{display:flex;flex-wrap:wrap;gap:1.5rem}
.col{flex:1 1 280px;min-width:280px}

/*  Contact form                                 */
form{display:grid;gap:1rem;max-width:600px;margin:auto}
label{font-weight:600}
input,textarea,select{padding:0.5rem;border:1px solid #ccc;border-radius:4px;font-size:1rem}
button{background:var(--red);color:#fff;border:none;padding:0.75rem 1.5rem;font-size:1rem;border-radius:4px;cursor:pointer}
button:hover,button:focus{background:#a40000}

/*  Footer                                       */
footer{margin-top:3rem;padding:1rem 0;text-align:center;font-size:0.9rem;color:#555}

/*  Small-screen single column                   */
@media (max-width:768px){
  nav{flex-direction:column}
}

/* Highlight the current page link              */
nav a[aria-current="page"]{
  color:var(--red);
  border-bottom:2px solid var(--red);
}

section{scroll-margin-top:4.5rem;}

/* nicer hover / focus for every nav link */
nav a:hover,
nav a:focus{
  color:#fff;
  background:var(--red);
  border-radius:4px;
  outline:none;
}

/* visited links stay charcoal but thin underline signals previous click */
nav a:visited{color:var(--charcoal);text-decoration:underline}

/* active page highlight (works site-wide) */
nav a[aria-current="page"]{
  color:var(--red);
  background:none;
  border-bottom:2px solid var(--red);
}