/* ------------------------------------------------------------------
   FONTS & GLOBAL BASE
------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

:root{
  /* Adjust this if your sticky navbar is taller/shorter */
  --nav-offset: 24px;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;
  margin: 0;
}

/* ------------------------------------------------------------------
   NAVIGATION
------------------------------------------------------------------ */
.navbar {
  padding: 0.8rem;
}

.navbar-nav li { padding-right: 20px; }

.nav-link { font-size: 1.1em !important; }

/* ------------------------------------------------------------------
   LAYOUT UTILITIES
------------------------------------------------------------------ */
.limit_1080 { max-width: 1080px; }
.limit_510  { max-width: 510px; }

.center { display: block; margin-left: auto; margin-right: auto; }

.padding { padding-bottom: 2rem; }

[class*="col-"] { padding: 1rem; }  /* Bootstrap padding fix */

/* ------------------------------------------------------------------
   FIX: Sticky navbar overlap
   (adds space under the sticky nav; includes iPhone safe area)
------------------------------------------------------------------ */
main{
  padding-top: calc(var(--nav-offset) + env(safe-area-inset-top));
}

/* If you want a slightly smaller offset on larger screens, you can: */
/* @media (min-width: 992px){ :root{ --nav-offset: 74px; } } */

/* ------------------------------------------------------------------
   CAROUSEL
------------------------------------------------------------------ */

/* Give the carousel a stable height on all devices */
.carousel-item img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px){
  .carousel-item img{ height: 320px; }
}

@media (max-width: 576px){
  .carousel-item img{ height: 240px; }
}

#slides { background: transparent; }
#slides { margin-bottom: 0; }


/* Caption: fully override Bootstrap positioning */
.carousel-caption{
  left: 50%;
  right: auto;
  top: auto;
  bottom: 12%;
  transform: translateX(-50%);
  width: min(92%, 42rem);
  text-align: center;

  background: rgba(0,0,0,.35);
  border-radius: .5rem;
  padding: .5rem 1rem;
}

.carousel-title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

/* Tablet */
@media (max-width: 768px){
  .carousel-title{
    font-size: clamp(1.1rem, 5vw + 0.2rem, 2.4rem);
  }
  .carousel-caption{
    bottom: 10%;
    padding: .45rem .85rem;
  }
}

/* Phone */
@media (max-width: 576px){
  :root{ --nav-offset: 110px; }  /* mobile nav often taller */

  .carousel-caption{
    bottom: 8%;
    width: 92%;
    padding: .4rem .6rem;
    background: rgba(0,0,0,.45);
    border-radius: .3rem;
  }

  .carousel-title{
    font-size: 1.1rem;
    line-height: 1.15;
  }

  .carousel-indicators{ display: none; }
}

/* Smooth transition fix for Firefox */
.carousel-item {
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/* ------------------------------------------------------------------
   BUTTONS
------------------------------------------------------------------ */
.btn-primary {
  background-color: #6648b1;
  border: 1px solid #6648b1;
}
.btn-primary:hover {
  background-color: #563d7c;
  border: 1px solid #563d7c;
}

/* ------------------------------------------------------------------
   CONTENT SECTIONS
------------------------------------------------------------------ */
.jumpotron {
  padding: 1rem;
  border-radius: 0;
}

.welcome {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
}

.welcome hr {
  border-top: 2px solid #b4b4b4;
  width: 95%;
  margin: 0.3rem auto 1rem;
}

/* ------------------------------------------------------------------
   VIDEO EMBEDS
------------------------------------------------------------------ */
.embed-container,
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.video-container iframe,
.embed-container object,
.video-container object,
.embed-container embed,
.video-container embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------
   SOCIAL ICONS
------------------------------------------------------------------ */
.social a {
  font-size: 4.5em;
  padding: 3rem;
}

.fa-facebook { color: #3b5998; }
.fa-youtube  { color: #bb0000; }

.fa-facebook:hover,
.fa-youtube:hover { color: #d5d5d5; }

@media (max-width: 992px){
  .social a { font-size: 4em; padding: 2rem; }
}
@media (max-width: 768px){
  .social a { font-size: 2.5em; padding: 1.2rem; }
}
@media (max-width: 576px){
  .social a { font-size: 2.5em; padding: 1rem; }
}

/* ------------------------------------------------------------------
   FOOTER
------------------------------------------------------------------ */
footer {
  background-color: #000;
  color: #d5d5d5;
}

footer a { color: #d5d5d5; }

hr.light, hr.light-100 { border-top: 1px solid #d5d5d5; }

hr.light { width: 75%; }
hr.light-100 { width: 100%; margin-top: 0.8rem; margin-bottom: 1rem; }

hr.dark-100 {
  border-top: 1px solid #d5d5d5;
  margin: 0.5rem 0;
  width: 100%;
}

.fb-like {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------
   FIXED BACKGROUND SECTION
------------------------------------------------------------------ */
figure {
  position: relative;
  width: 100%;
  height: 50%;
  margin: 0 !important;
}

.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

#fixed {
  background-image: url('img/fixed_bg.jpg');
  background-size: cover;
  background-position: center center;
  position: fixed;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  will-change: transform;
}

/* ------------------------------------------------------------------
   IMAGES
------------------------------------------------------------------ */
img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   ACCESSIBILITY: Skip link
------------------------------------------------------------------ */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: static !important;
  width: auto; height: auto;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  background: #000;
  color: #fff;
  z-index: 10000;
  border-radius: 0.25rem;
}

/* ------------------------------------------------------------------
   NEWS SECTION (your existing styles)
------------------------------------------------------------------ */
#news { background-color: #f8f9fa; }
#news .card-title { font-weight: 600; color: #222; }
#news .card-text { font-size: 0.95rem; }

/* Lazy YouTube thumbnail button */
.yt-thumb {
  position: relative;
  display: inline-block;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  cursor: pointer;
}

.yt-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }

.yt-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 3rem; line-height: 1;
  background: rgba(0,0,0,.35);
  color: #fff;
  border-radius: .5rem;
  transition: background .2s ease-in-out;
}

.yt-thumb:hover .yt-play { background: rgba(0,0,0,.45); }

/* Glossary */
.glossary-index a {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .25rem .5rem;
  border: 1px solid #ccc;
  border-radius: .25rem;
  text-decoration: none;
  font-size: .9rem;
}
.glossary-index a:hover { background: #f5f5f5; }

.glossary-list dt,
dl dt { font-weight: 600; margin-top: 1rem; }

.glossary-list dd,
dl dd { margin-left: 0; margin-bottom: .75rem; }

/* Wadō-style instructional quotes */
.wado-quote{
  padding: 0.75rem 1rem;
  margin-left: 0;
  border-left: 3px solid #ccc;
  background: #f8f9fa;
  border-radius: 0.25rem;
}

.wado-quote .jp{
  margin: 0;
  font-style: italic;
  font-weight: 500;
}

.wado-quote .en{
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: #555;
}