/* ==== Variables ==== */
:root {
  --container-mobile: 90%;
  --container-desktop: 960px;
  --link: #6900ff;
  --link-visited: #5a31a6;
  --link-active: #4a00b8;
 --formblock-color: #0d47a1;
 --formblock-color-invert: #fff;
 --formblock-color-error: #CC0000;
 --formblock-color-success: #2e8b57;
}


*,
*::before,
*::after { box-sizing: border-box; }

/* ==== Base ==== */
body {
  font-family: "M PLUS 1", sans-serif;
  color: #222;
  background-color: #fff;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

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









/* ==== Wrapper ==== */
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ==== Typography ==== */
h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  margin-block: 0 1rem;
}

h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  margin-block: 1.25rem 2rem;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  margin-block: 1rem .25rem;
}

/* Japanese adjustments (smaller than English) */
:lang(ja) h1 { font-size: 1.625rem; line-height: 1.4; }
:lang(ja) h2 { font-size: 1.25rem; line-height: 1.5; }
:lang(ja) h3 { font-size: 1rem; line-height: 1.6; }

/* Desktop adjustments */
@media (min-width: 618px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  :lang(ja) h1 { font-size: 2rem; }
  :lang(ja) h2 { font-size: 1.375rem; }
  :lang(ja) h3 { font-size: 1.125rem; }
}
/* ==== Header ==== */
header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #F9F9F9;
}

/* ==== Lang nav ==== */
nav {
  width: var(--container-mobile);
  margin: auto;
  background-color: #F9F9F9;
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* background-color: pink; */
}

nav li {
  margin-left: 1em;
  margin-right: 1em;
}




/* ==== Language switch (minimal) ==== */
.lang-switch {
  /* share your container size */
  width: var(--container-mobile);
  margin: 0 auto;
}

.lang-switch ul {
  display: flex;
  justify-content: flex-end;   /* right align */
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: .5rem 0;
}

.lang-switch li {
  /* hide the active language */
}
.lang-switch li.active { display: none; }

.lang-switch a {
  color: inherit;              /* inherits body color (#222) */
  font-size: .875rem;          /* a touch smaller */
  text-decoration: none;
  padding: .25rem .375rem;
  border-radius: 4px;
  opacity: .85;
}

.lang-switch a:hover {
  text-decoration: underline;
  opacity: 1;
}
.lang-switch a:focus-visible {
  outline: 2px solid var(--focus-ring, #ffbf00);
  outline-offset: 2px;
}







.content {
  width: var(--container-mobile);
  margin: auto;
  /* background-color: yellow; */
}



/* ==== Section spacing ==== */
#about-me,
#projects,
#events,
#contact-me {
  padding-block: 2rem; /* adds 2rem top and bottom */
}




/* ==== About me ==== */
#about-me {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* background-color: orange; */
}

/* ==== Projects ==== */
#projects {
  width: 100%;
  display: flex;
  flex-direction: column;
  --col-gap: 1.5rem;
  --row-gap: 2rem;
  background-color: #EDEDED;
}

#projects ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0; /* both row and col */
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

#projects li {
  flex: 1 1 100%;
  margin: 0;
}





/* project images upscale to 294px */
#projects img {
  width: 100%;         /* fill available space... */
  max-width: 294px;    /* never exceed 294px */
  height: auto;
  margin: 0 auto;      /* center inside card */
}







#projects figure {
  max-width: 294px;
  margin: 0 auto;      /* centers in flex item */
}




/* ==== Events ==== */
#events {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color:#F4F4F4;

}





/* Mobile: 1 column */
#events ul {
  list-style-type: circle;
  margin: 0;
  padding: 0;
}





#events li {
  text-align: left;
  margin: 1em;
}

/* ==== Contact ==== */
#contact-me {
  width: 100%;
  display: flex;
  color: #fff;
  flex-direction: column;
  background-color: #222;
}

/* ==== Footer ==== */
footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #fff;
  padding-top: 1em;
  padding-bottom: 2em;
  background-color: #111 ;
}

footer p{font-size:90%}

/* ==== Media ==== */
@media (min-width: 618px) {

  nav ul {
    width: var(--container-desktop);
    justify-content: flex-end;
  }

  nav,
  .content {
    width: var(--container-desktop);
  }


 .lang-switch { width: var(--container-desktop);}

  #projects ul {
    flex-direction: row;
    gap: var(--row-gap) var(--col-gap);
    justify-content: flex-start;
  }

  #projects li {
    /* 3 columns with gaps */
    flex: 1 1 calc((100% - (2 * var(--col-gap))) / 3);
  }


  #events ul { }
  #events li { }



  #events ul {
      columns: 2;               /* column-count: 2; */
      column-gap: 2rem;
    }



    /* Avoid items breaking across columns */
    #events li {
      break-inside: avoid;      /* modern browsers */
      -webkit-column-break-inside: avoid; /* Safari fallback */
      page-break-inside: avoid; /* legacy print fallback */
      margin: 0 0 0.75rem 1.25rem;  /* left indent for markers */
    }




  .formblock {
    max-width: 100%;
    width: 100% !important;

  }
}  /* <-- @media closing brace  */



/* ==== Form Block Suite ==== */
.formblock {
  width: var(--container-mobile);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem
}
.formblock__submit { width: 100%; text-align: center; margin-left: 0; position: relative; }
.formblock__submit input[type="submit"] {
  display: block;
  width: 100%;
  color: var(--formblock-color-invert);
  background-color: var(--formblock-color);
  text-align: center;
  font-size: 120%;
  font-weight: 700;
  padding: 0.6em 1em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  outline: none;
}
.formblock__submit input[type="submit"]:hover { background-color: #005a9e; }
.formblock__submit input[type="submit"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.formblock__message__text { text-align: center; font-size: 1.2rem; color: var(--formblock-text-color-success); }