/* -------------------------------------------
   MISC CSS STYLING
------------------------------------------- */
/* ensure right-aligned menus can anchor to the right edge */
.dropdown-content { right: 0; }

/* This line of code makes the footer always 
sit at the bottom of the screen */
html, body { min-height: 100vh; }
body { display: flex; flex-direction: column; padding-bottom: 0; }
main.container { flex: 1; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  color: var(--charcoal);
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--charcoal);
  z-index: 2000;
}
.skip-link:focus-visible {
  left: 12px;
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--pink-dark);
  outline-offset: 2px;
}
.nav-link:focus-visible,
.btn-outline:focus-visible,
.btn-cream:focus-visible,
.btn-gradient:focus-visible,
.btn-login-home:focus-visible {
  outline: 3px solid var(--pink-dark);
  outline-offset: 2px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}


/* -------------------------------------------
   ELLA RISES BRAND VARIABLES
------------------------------------------- */
:root{
  --pink-light:#FFD8D1;
  --pink-soft:#F9AFB1;
  --pink-dark:#CE325B;

  --blue-soft:#99B7C6;
  --lavender:#978EC4;

  --cream:#F9F5EA;
  --sage:#9AB59D;

  --charcoal:#3A3F3B;
  --coral-soft:#F4B092;

  --font-serif:'DM Serif Display', serif;
  --font-sans:'Montserrat', sans-serif;
  --font-script:'TT Milk Script', cursive;
}

/* -------------------------------------------
   GLOBAL / LAYOUT (sticky footer)
------------------------------------------- */
html, body { height:100%; }

body{
  background-color:var(--pink-light) !important;
  font-family:var(--font-sans);
  color:var(--charcoal);
  margin:0;

  /* sticky-footer layout */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* grows to push footer down */
.main-content{ flex:1 0 auto; }

/* -------------------------------------------
   TYPE & COMMON
------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-serif);
  color:var(--charcoal);
}

.logo-script{
  font-family:var(--font-script);
  font-size:2.8rem;
  color:var(--charcoal);
}

.card{
  background-color:var(--cream);
  border-radius:12px;
  border:none;
  padding:20px;
  box-shadow:0 3px 10px rgba(0,0,0,.07);
}

/* -------------------------------------------
   NAVBAR
------------------------------------------- */
.navbar{
  background-color:var(--charcoal) !important;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 40px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  margin-bottom:0 !important;
}

/* This makes the navigation bar at the top sticky so that when you scroll,
it stays on your screen */
.navbar {
  position: sticky; /* or `fixed` if you want it to stay even past its container */
  top: 0;
  z-index: 1000;
}

.navbar-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.logo-img{
  height:60px;
  width:auto;
  transition:transform .3s ease;
}
.logo-img:hover{ transform:scale(1.05); }

.brand-mark{
  width:200px;
  height:200px;
  max-width:60vw;
  max-height:60vw;
  display:block;
  object-fit:cover;
  border-radius:50%;
  clip-path:circle(50%); /* hard-cut the square into a circle */
  mix-blend-mode:multiply;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.12));
}

.navbar-nav{
  display:flex;
  gap:15px;
  align-items:center;
}

.lang-toggle-btn{
  cursor:pointer;
  border:2px solid transparent;
  background:transparent;
  font:inherit;
  padding:10px 18px;
}
.lang-toggle-btn:hover{
  background-color:var(--pink-soft);
  color:var(--charcoal);
  border-color:var(--pink-soft);
}

.navbar-nav .nav-link{
  color:var(--cream) !important;
  font-weight:500;
  text-decoration:none;
  padding:10px 20px;
  border-radius:8px;
  background-color:transparent;
  transition:all .3s ease;
  border:2px solid transparent;
  letter-spacing:.5px;
  font-size:.95rem;
}
.navbar-nav .nav-link:hover{
  background-color:var(--pink-soft);
  color:var(--charcoal) !important;
  border-color:var(--pink-soft);
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(249,175,177,.3);
}
.navbar-nav .nav-link:active{ transform:translateY(0); }
.navbar-nav .nav-toggle{
  background:none;
  border:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

/* Override hover for language toggle */
#lang-toggle.nav-link:hover{
  background-color: var(--charcoal);
  color: #fff !important;
  border-color: var(--sage);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(249,175,177,.3);
}

/* -------------------------------------------
   HERO SLIDER
------------------------------------------- */
.hero-slider-wrap{
  width:100vw;
  margin:-30px auto 32px;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  padding-top:0;
}
.hero-slider{
  position:relative;
  width:100%;
  height:600px;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  background:var(--charcoal);
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.7s ease;
}
.hero-slide.active{
  opacity:1;
  z-index:1;
}
.hero-slide a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
}
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-slide .overlay-text{
  position:absolute;
  color:#fff;
  font-weight:700;
  font-size:2rem;
  padding:8px 14px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0 6px 16px rgba(0,0,0,0.4);
}
.overlay-top-right{ top:18px; right:18px; }
.overlay-top{ top:18px; left:50%; transform:translateX(-50%); }
.overlay-top-left{ top:18px; left:18px; }
.overlay-center{ top:50%; left:50%; transform:translate(-50%, -50%); }
.overlay-center-left{ top:50%; left:45%; transform:translate(-50%, -50%); }

.slider-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:none;
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  z-index:2;
}
.slider-nav:hover{
  background:rgba(0,0,0,0.75);
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
}
.slider-nav.prev{ left:16px; }
.slider-nav.next{ right:16px; }

@media (max-width: 768px){
  .hero-slider{ height:380px; }
  .hero-slide .overlay-text{ font-size:1.25rem; padding:6px 12px; }
}

/* -------------------------------------------
   BUTTONS
------------------------------------------- */
.btn-pink{ background:var(--pink-soft); color:var(--charcoal); border:none; }
.btn-pink:hover{ background:var(--charcoal); color:#fff; }

.btn-sage{ background:var(--sage); color:#fff; border:none; }
.btn-sage:hover{ background:var(--charcoal); color:#fff; }

.btn-darkpink{ background:var(--pink-dark); color:#fff; border:none; }
.btn-darkpink:hover{ background:var(--charcoal); color:#fff; }

.btn-cream{ background:var(--cream); color:var(--charcoal); border:1px solid var(--charcoal); }
.btn-cream:hover{ background:var(--charcoal); color:var(--cream); }

/* -------------------------------------------
   FORMS
------------------------------------------- */
input,select,textarea{
  border-radius:8px !important;
  border:1px solid var(--charcoal) !important;
  padding:10px !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--pink-dark) !important;
  box-shadow:0 0 5px rgba(206,50,91,.4) !important;
}

/* -------------------------------------------
   HERO (landing)
------------------------------------------- */
.hero{
  background-color:var(--pink-soft);
  color:var(--charcoal);
  padding:80px 20px;
  text-align:center;
  border-bottom:6px solid var(--charcoal);
}
.hero h1{
  font-family:var(--font-serif);
  font-size:3rem;
  margin-bottom:.75rem;
}
.hero p{
  font-size:1.2rem;
  max-width:650px;
  margin:0 auto;
}

/* spacing for hero CTA */
.hero .btn-login-home,
.hero .btn-login,
.hero input[type="submit"],
.hero button[type="submit"]{
  margin-top:24px;
  display:inline-block;
}

/* login buttons (global) */
.btn-login,
.login-button,
input[type="submit"],
button[type="submit"]{
  background-color:var(--sage) !important;
  color:#fff !important;
  font-weight:500;
  text-decoration:none;
  padding:10px 20px;
  border-radius:8px;
  transition:all .3s ease;
  border:2px solid var(--sage) !important;
  letter-spacing:.5px;
  font-size:.95rem;
  cursor:pointer;
}
.btn-login:hover,
.login-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover{
  background-color:var(--pink-soft) !important;
  color:var(--charcoal) !important;
  border-color:var(--pink-soft) !important;
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(249,175,177,.3);
}
.btn-login:active,
.login-button:active,
input[type="submit"]:active,
button[type="submit"]:active{ transform:translateY(0); }

/* home CTA button */
.btn-login-home{
  display:inline-block;
  background-color:var(--sage);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  padding:12px 30px;
  border-radius:8px;
  transition:all .3s ease;
  border:2px solid var(--sage);
  letter-spacing:.5px;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.btn-login-home:hover{
  background-color:var(--charcoal);
  color:#fff;
  border-color:var(--charcoal);
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(58,63,59,.3);
}
.btn-login-home:active{
  transform:translateY(0);
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}

/* -------------------------------------------
   DROPDOWN
------------------------------------------- */
.dropdown{ position:relative; display:inline-block; }
.dropdown-content{
  display:none;
  position:absolute;
  background-color:var(--charcoal);
  min-width:180px;
  box-shadow:0 8px 16px rgba(0,0,0,.2);
  z-index:1;
  border-radius:8px;
  overflow:hidden;
  top:100%;
  margin-top:0;
  right:0;
}
.dropdown-content a{
  color:var(--cream) !important;
  padding:12px 20px;
  text-decoration:none;
  display:block;
  font-weight:500;
  font-size:.9rem;
  transition:all .3s ease;
  border-left:3px solid transparent;
}
.dropdown-content a:hover{
  background-color:var(--pink-soft);
  color:var(--charcoal) !important;
  border-left-color:var(--pink-dark);
  padding-left:25px;
}
.dropdown:hover .dropdown-content{ display:block; }
.dropdown:hover > .nav-link{
    background-color:var(--pink-soft);
    color:var(--charcoal) !important;
    border-color:var(--pink-soft);
  }
  
/* Nested dropdown (management) */
.dropdown-submenu{ position:relative; }
.dropdown-submenu > .dropdown-content{
    top:0;
    left:100%;
    right:auto;
}
.dropdown-submenu:hover > .dropdown-content{
    display:block;
}
.dropdown.open > .dropdown-content,
.dropdown:focus-within > .dropdown-content{
  display:block;
}
/* -------------------------------------------
   CONTAINER
------------------------------------------- */
.container{
  max-width:1200px;
  margin:30px auto;
  padding:0 20px;
}

/* -------------------------------------------
   TABLES
------------------------------------------- */
.table{ background-color:var(--cream); color:var(--charcoal); }
.table thead{ background-color:var(--charcoal); color:var(--cream); }
.table tbody tr:hover{ background-color:var(--pink-soft); }

/* -------------------------------------------
   FOOTER (sticky + gap fix)
------------------------------------------- */
.footer{
  flex-shrink:0;
  margin-top:auto;            /* stick to bottom on short pages */
  padding:20px 0;
  background-color:var(--charcoal);
  color:var(--cream);
  text-align:center;
  font-family:var(--font-serif);
}
.footer p{ margin:0; }