/* styles.css - simple, modern layout; drop-in to pair with index.html */

/* VARIABLES */
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;	 	 	 	 	 	 /* White */
  --accent:#14366d;	 	 	 	 	 	 /* Blue */
  --success:#258e43;	 	 	 	 	 	 /* Green */
  --highlight:#fcd120;	 	 	 	 	 /* Gold */
  --muted:#6b7280;
  --max-width:1100px;
  --container-pad:24px;
  --radius:12px;
  --gap:20px;
  --shadow: 0 6px 20px rgba(3,7,18,0.08);
  --ff-sans: 'Quicksand', sans-serif;
}

*{box-sizing:border-box}
html,body{min-height:100%
  color: var(--muted);}
body{
  margin:0;
  font-family:var(--ff-sans);
  background:linear-gradient(180deg,var(--bg),#eef2f7 60%);
  background-repeat: no-repeat;	 /* don't tile */
  background-size: 100% 100%;	 	 /* stretch to body width & height */
  color:var(--muted)
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Links */
a {
  color: var(--success);	 	 	 	 /* default link color */
  text-decoration: none;	 	 /* optional: remove underline */
}

a:hover,
a:focus {
  color: var(--success);	 	 	 	 /* keep same color on hover/focus */
  text-decoration: underline; /* optional: add underline on hover */
}

h1 {
  color: var(--success);
}
h2 {
  color: var(--accent);
}

h3, h4, h5, h6 {
  color: var(--muted);
}

/* container helper */
.container{
  width:calc(100% - 48px);
  max-width:var(--max-width);
  margin:0 auto;
  padding:28px 0;
}

/* HEADER */
.site-header{
  background:rgba(255,255,255,0.95);
  border-bottom:1px solid rgba(10,15,30,0.04);
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:saturate(120%) blur(4px);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
}

/* logo */
.logo img {
  height: 80px;	 	 	 /* or 140px */
  width: auto;
  display: block;
  flex-shrink: 0;
}


/* NAV */
.main-nav ul{
  list-style:none;
  display:flex;
  gap:12px;
  margin:0;
  padding:0;
  align-items:center;
}
.main-nav a{
  display:block;
  padding:10px 6px;
  text-decoration:none;
  color:var(--accent);
  border-radius:8px;
  font-weight:600;
  font-size:15px;
}
.main-nav a:hover{background:rgba(3,59,111,0.06); color:var(--success)}

/* submenus (desktop) */
.has-sub{position:relative}

/* 💡 CRITICAL FIX FOR FLICKERING/DISAPPEARING */
.has-sub .sub li {
    float: none; 
    display: block;
}

.has-sub .sub{
  position:absolute;
  left:0;
  top:100%; /* ADJUSTED: Ensures the submenu is flush against the main item (no gap) */
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:8px;
  border-radius:10px;
  min-width:210px;
  display:none; /* Hidden by default for desktop */
  z-index:40;
}
.has-sub:hover .sub{display:block} /* Shown on hover for desktop */
.sub li a{
    display: block; 
    padding:8px 12px; 
    font-weight:500; 
    white-space:nowrap
}

/* NAV - mobile hamburger checkbox */
.nav-toggle{display:none}
.nav-toggle-label{
  display:none;
  width:44px; height:44px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after{
  display:block;
  height:2px;
  width:20px;
  background:#0b1220;
  position:relative;
  transition:transform .25s ease;
}
.nav-toggle-label span::before, .nav-toggle-label span::after{
  content:"";
  position:absolute;
  left:0;
}
.nav-toggle-label span::before{top:-6px}
.nav-toggle-label span::after{top:6px}

/* HERO */
.hero{
  padding:56px 0;
  background:linear-gradient(180deg, rgba(0,59,111,0.04), transparent 40%);
}
.hero-inner {
  display: block;
}
.hero-content h1{
  color:var(--success);
  margin:0 0 12px;
  font-size:34px;
  line-height:1.05;
}
.lead{ margin:0 0 18px}
.btn{display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700}
.btn-primary{background:var(--accent); color:#fff; box-shadow: 0 6px 18px rgba(3,59,111,0.12)}
.btn-outline{border:1px solid rgba(3,59,111,0.12); background:transparent; color:var(--accent); margin-left:10px}

/* hero image */
.hero-media img{width:100%; border-radius:14px; box-shadow:var(--shadow); display:block}

/* MAIN CONTENT */
.main-content {
  display: block; /* simplest option */
}

/* news list */
.news-list{list-style:none; margin:18px 0 0; padding:0}
.news-list li{background:#fce895; padding:14px; border-radius:10px; box-shadow:var(--shadow); margin-bottom:12px}
.news-list time{display:block; font-weight:700; color:var(--accent); margin-bottom:6px}
.news-list p{margin:0; color:var(--muted)}

/* gallery grid */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.grid img{width:100%; height:140px; object-fit:cover; border-radius:8px; display:block}

/* FOOTER */
.site-footer{padding:22px 0; background:transparent; border-top:1px solid rgba(10,15,30,0.04)}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.footer-right a{margin-left:10px; text-decoration:none; font-weight:700; color:var(--muted)}

/* RESPONSIVE */
@media (max-width:980px){

  .hero-inner{grid-template-columns:1fr; gap:20px}
  .main-content{grid-template-columns:1fr; gap:20px}
  .header-inner{align-items:center}

  /* --------------------------------------------------
     MOBILE NAVIGATION (NORMAL FLOW, NOT FIXED)
     -------------------------------------------------- */

  .main-nav{
    background:linear-gradient(#ffffff, #f8fbff);
    padding:16px;
    width:100%;
    position:relative;        /* <-- NO fixed menu */
    transform:none;           /* <-- Always visible */
  }

  /* Show hamburger */
  .nav-toggle-label{
    display:flex;
  }

  /* Hide menu until hamburger is checked */
  .main-nav{
    display:none;
  }

  .nav-toggle:checked ~ .main-nav{
    display:block;            /* content moves down correctly */
  }

  /* --------------------------------------------------
     MENU ITEMS: SIDE-BY-SIDE + WRAPPING
     -------------------------------------------------- */

  .main-nav ul{
    display:flex;
    flex-direction:row;       /* horizontal */
    flex-wrap:wrap;           /* wrap to new line */
    gap:10px;
    padding:0;
    margin:0;
    width:100%;
      justify-content: flex-end; /* right alignment */

  }

  .main-nav ul li{
    list-style:none;
    flex: 0 1 48%;            /* 2 items per row */
    max-width:48%;
    min-width:120px;
  }

  .main-nav a{
    display:block;
    width:100%;
    text-align:center;
    padding:10px 12px;
    border-radius:8px;
    font-weight:600;
    font-size:20px;
    color:var(--accent);
  }

  /* --------------------------------------------------
     SUBMENUS
     -------------------------------------------------- */

  .main-nav .sub{
    display:none;
    padding-left:10px;
  }

  .nav-toggle:checked ~ .main-nav .has-sub:hover .sub{
    display:block;
  }

  .main-nav .sub li{
    flex:none;
    width:100%;
  }

  .main-nav .sub li a{
    text-align:left;
    padding:8px 10px;
    font-size:20px;

  }


.logo img{
    height: 30px;   /* instead of 80px */
    width: auto;
}
/* Right-align submenu under its parent (mobile only) */
.main-nav .has-sub {
    position: relative; /* anchor for alignment */
}

.main-nav .has-sub .sub {
    margin-left: 0;
    padding-left: 0;
    width: auto;
    font-size:20px;
    position: absolute;
    right: 0;           /* align submenu to the right edge of the parent */
    left: auto;
    top: 100%;          /* appears directly below the parent menu item */
    background: #fff;
    padding: 3px 0;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
}