/* ===========================
   Aqua Club — application.css
   Ported from Rails SCSS
   =========================== */

/* --- Variables (as CSS custom properties) --- */
:root {
  --white:      #ffffff;
  --dark-blue:  #313D5A;
  --dark-cyan:  #03AFC7;
  --cyan:       #00D4EB;
  --font:       'Anybody', cursive;
}

/* --- Reset (Meyer) --- */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
  margin:0; padding:0; border:0;
  font-size:100%; font:inherit;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,
q:before,q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }

/* --- Main --- */
* { box-sizing:border-box; }

html {
  font-size: calc(1vh + 1vw - 1.5px);
  scroll-behavior: smooth;
}
@media (min-width:576px) {
  html { font-size: calc(1vh + 1vw); }
}

body {
  font-family: var(--font);
  margin: 0 auto;
  background-color: var(--cyan);
}

.app {
  position: relative;
  margin: 3rem auto 0;
  min-height: calc(var(--vh, 1vh) * 90);
}

.container { padding-left:0; padding-right:0; }
button { border:none !important; }

/* --- Color utilities --- */
.white   { color: var(--white)     !important; }
.blue    { color: var(--dark-blue) !important; }
.cyan    { color: var(--dark-cyan) !important; }
.l-cyan  { color: var(--cyan); }
.neon-green { color: #39ff14; }

.line-height { line-height:.7; }
.fw-900 { font-weight:900; }

.blue-bkg       { background-color: var(--dark-blue); }
.cyan-bkg       { background-color: var(--cyan); }
.dark-cyan-bkg  { background-color: var(--dark-cyan); }
.white-bkg      { background-color: var(--white); }
.bck-light      { background-color: #f8f9fa; }
.bck-neon-green { background-color: #39ff14; }

/* --- Font-size utilities --- */
.fs-1rem         { font-size:1rem; }
.fs-1rem-clamp   { font-size:clamp(14px,1rem,20px); }
.fs-2rem-clamp   { font-size:clamp(18px,2rem,24px); }
.fs-1_5rem       { font-size:1.5rem; }
.fs-2rem         { font-size:2rem; }
.fs-2_5rem       { font-size:2.5rem; }
.fs-3rem         { font-size:3rem; }
.fs-4rem         { font-size:4rem; }
.fs-5rem         { font-size:5rem; }
.fs-6rem         { font-size:6rem; }
.fs-7rem         { font-size:7rem; }
.fs-9rem         { font-size:9rem; }

/* --- Scroll anchors --- */
#home-tag, #prices-tag, #maps-tag, #contact-tag {
  scroll-margin-top: 150px;
}

/* ===========================
   COMPONENTS
   =========================== */

/* Alert */
.alert {
  position: fixed;
  bottom:16px; right:16px;
  z-index:1000;
}

/* Buttons */
.button {
  font-size:0.7rem;
  padding:0.4em 0.8em;
  background: var(--dark-blue);
  color:white;
  border-radius:10px;
  border:none;
  cursor:pointer;
}
.btn-fs-clamp-min { font-size:clamp(16px,1rem,20px); }
.neon-square-button {
  background: transparent;
  border:2px solid #39ff14 !important;
  color:#39ff14;
  padding:0.4em 1em;
  border-radius:6px;
  cursor:pointer;
}
.round-border { border-radius:10px; }

/* Forms */
@media (min-width:1024px) and (orientation:landscape) {
  .form-floating > .form-control {
    padding:0.4rem 0.75rem !important;
    height:calc(2rem + 2px) !important;
    line-height:1 !important;
  }
}

/* Modal */
.modal-backdrop {
  z-index:300;
  background-color: var(--dark-blue);
}
.modal-header { padding:0.5rem; }

/* Error */
.error-message {
  color:red;
  margin-bottom:0.5rem;
  font-size:0.9rem;
}

/* Navbar */
.navbar-lewagon {
  justify-content:space-between;
  position:sticky; top:0; width:100%;
  background-color: var(--cyan);
  padding:0.3rem 1rem;
  z-index:1001;
}
.navbar-lewagon .navbar-brand img {
  width:3rem; max-width:80px; min-width:50px;
}
.dropdown img { width:2rem; max-width:50px; min-width:30px; }
.dropdown-menu {
  background-color:#fff;
  min-width:10rem !important;
  padding:1rem !important;
}
.dropdown-menu.blue-bkg {
  background-color: var(--dark-blue) !important;
}
.dropdown-menu li a {
  color: #fff; text-decoration:none; font-weight:300;
}
.dropdown-menu li a:hover { color:var(--cyan); font-weight:400; }
.dropdown-menu.show {
  display:flex; flex-wrap:nowrap; flex-direction:column;
  justify-content:center; gap:1rem;
  min-width:20rem !important;
  left:-18rem !important;
  padding:2rem !important;
  border-radius:1rem;
}

/* ===========================
   PAGES — HOME
   =========================== */

/* Landing page */
.landing-page {
  position:relative;
  display:grid;
  grid-template-columns:repeat(20,1fr);
  grid-template-rows:repeat(17,1fr);
  width:100%; height:90vh;
  background-color: var(--cyan);
  gap:2rem; padding-top:4rem;
}
.landing-page h1 {
  position:relative; color:#fff; font-weight:900;
  width:100%; padding:20px; font-size:5rem;
  line-height:0.8; letter-spacing:-0.3rem; z-index:12;
  grid-area:1/2/-1/19;
}
.landing-page h1 span { color: var(--dark-blue); }
.landing-page img {
  width:100%; min-width:30rem;
  transform:rotate(-90deg);
  grid-area:6/1/17/21;
}
@media (min-width:576.98px) { .landing-page h1 { font-size:5.2rem; } }
@media (min-width:768px) and (orientation:portrait) { .landing-page { min-height:100vh; } }
@media (orientation:landscape) {
  .landing-page {
    height:calc(var(--vh, 1vh) * 90);
    min-height:30rem; padding:0 1.5rem;
  }
  .landing-page h1 { grid-area:1/2/10/14; }
  .landing-page img {
    width:100%; transform:none;
    grid-area:1/6/21/20;
    max-width:65vw;
    filter:drop-shadow(16px 43px 15px #00000070);
  }
}

/* Feed */
.feed {
  position:relative; width:100%;
  background-color: var(--dark-blue);
  height:3rem; display:flex;
  justify-content:center; flex-direction:column;
  color:#fff; font-weight:200; font-size:1.8rem;
}
.feed marquee { width:calc(100vw - 9rem); }
.feed .btn-articles {
  position:absolute; background:white;
  height:2rem; right:1rem; width:7rem;
  color: var(--dark-blue);
}

/* Promos */
.promos {
  position:relative; width:100%;
  background-color: var(--dark-cyan);
  display:flex; flex-direction:column;
  align-content:center; justify-content:center;
  align-items:center; flex-wrap:wrap;
  gap:15px; padding:16vw 1rem;
}
.promos h2 { color: var(--dark-blue); font-weight:900; }
.promos h3 { color:#fff; font-weight:900; }
.promos pre { overflow:visible; }
@media (orientation:landscape) {
  .promos {
    padding:0;
    display:grid;
    grid-template-rows:repeat(20,1fr);
    grid-template-columns:repeat(10,1fr);
  }
  .promos h2 { text-align:left; grid-area:1/2/21/8; }
  .promos h3 { grid-area:1/7/21/10; text-align:right; align-self:center; }
  .promos .promos-2 { grid-area:1/1/-1/-1; text-align:center; }
  .promos .promos-3 {
    grid-area:1/1/-1/-1; display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
  }
  .promos .promos-3 pre { align-self:center; }
  .promos .promos-3 pre:first-of-type { grid-area:1/1/3/2; text-align:end; align-self:flex-start; }
  .promos .promos-3 pre:nth-of-type(2) { grid-area:1/2/2/3; }
  .promos .promos-3 pre:nth-of-type(3) { grid-area:2/1/3/2; text-align:end; }
  .promos .promos-3 pre:last-of-type   { grid-area:2/2/3/3; }
}
@media (min-width:1024px) and (orientation:landscape) {
  .promos { padding:2rem 0; }
}

/* Promos with photo */
.promos-with-photo {
  position:relative; width:100%;
  display:flex; justify-content:center;
  flex-direction:column; flex-wrap:wrap;
  align-content:center; align-items:center;
  text-align:center; padding:40px 0;
}
.promos-with-photo .img {
  overflow:hidden; margin-top:-7rem;
}
.promos-with-photo .img img {
  width:70%; transform:rotate(-30deg);
  filter:drop-shadow(4px 4px 6px #00011130);
}
.promos-with-photo .img .reset-image {
  width:100%; transform:unset; filter:none;
}
.promos-with-photo h2 span:nth-of-type(odd)  { color:#fff; }
.promos-with-photo h2 span:nth-of-type(even) { color: var(--dark-cyan); }
@media (orientation:landscape) {
  .promos-with-photo {
    display:grid;
    grid-template-rows:repeat(2,minmax(10rem,1fr));
    grid-template-columns:repeat(2,1fr);
    padding:0 4rem;
  }
  .promos-with-photo .img {
    grid-area:1/1/3/2; justify-self:center;
    overflow:visible; max-height:20rem; margin:0; z-index:1;
  }
  .promos-with-photo .img img { margin-top:-5rem; }
  .promos-with-photo h2 { grid-area:1/2/3/3; align-self:center; text-align:end; justify-self:center; }
  .h2-correction-1280-up { font-size:3rem; padding:0 0 0 3rem !important; }
  .h2-correction-1280-up p { margin:0 !important; }
}
.promos-with-photo_slides-correction {
  max-height:20rem;
}
@media (orientation:landscape) {
  .promos-with-photo_slides-correction { padding:0 4rem 0 0; }
  .promos-with-photo_slides-correction .img { overflow:hidden; }
  .promos-with-photo_slides-correction .img img { margin:0; }
}

/* Prices */
.prices {
  position:relative; display:grid;
}
.prices-title {
  position:relative; grid-area:1/1/-1/-1;
  display:block; background-color: var(--cyan);
  padding:2rem 0; color: var(--dark-blue); text-align:center;
}
.prices-title h2 { margin:0; }
.price {
  position:relative; min-height:200px;
  display:grid; padding:30px 10px; gap:15px 0;
  grid-template-columns:1fr;
  grid-template-rows:3fr repeat(2,1fr);
}
.price h3 { text-align:center; grid-area:1/1/2/5; padding-bottom:20px; }
.price-period {
  position:relative; grid-column:1/2;
  display:flex; justify-content:space-between; align-items:center;
}
.price-period-centered { align-self:center; justify-self:center; }
.prices-index { display:grid; }
@media (orientation:landscape) {
  .prices-index {
    grid-template-rows:1fr;
    grid-template-columns:repeat(3,1fr);
  }
  .prices-index .price { font-size:1rem; padding:3rem 1rem; }
  .prices-index .price h3 { font-size:2rem; }
}
.price-payment {
  position:relative; display:flex; width:100%; justify-content:center;
}

/* Hours */
.hours-index {
  grid-template-columns:repeat(2,1fr); display:grid;
  font-size:1.7rem; font-weight:900; color:#fff;
  background-color:#313D5A; padding:2rem;
}
.hours-index .day { justify-self:center; text-align:center; }

/* Pool seal */
.pool-seal {
  position:relative; display:grid;
  grid-template-rows:65% 1fr;
  grid-template-columns:1fr 1fr;
}
.pool-seal .seal { position:relative; grid-area:1/1/2/-1; display:flex; justify-content:center; align-items:center; }
.pool-seal .seal img { width:75%; padding:30px; }
.pool-seal .seal-text { position:relative; text-align:center; grid-area:2/1/3/-1; padding:20px 40px; }
@media (orientation:landscape) {
  .pool-seal { grid-template-rows:1fr; grid-template-columns:35% 65%; }
  .pool-seal .seal { grid-area:1/1/2/2; }
  .pool-seal .seal-text { grid-area:1/2/2/3; align-self:center; }
}

/* Maps */
.maps { position:relative; }
.maps-query {
  position:relative; text-align:center; padding:2rem 0;
  min-height:2rem; display:flex; align-items:center; justify-content:center;
}
.maps-answer {
  position:relative; text-align:center; padding:40px 0;
  height:250px; display:flex; flex-direction:column;
  justify-content:center; align-items:center;
}
.maps-answer p { font-size:inherit; }
.btn-cust {
  position:relative; min-width:15rem; margin:0 auto;
  background-color: var(--dark-cyan); margin-top:20px;
  border:0.1rem solid var(--dark-blue) !important;
}
.btn-cust:hover { background-color: var(--cyan); }
@media (orientation:landscape) {
  .maps-answer {
    display:grid; grid-template-rows:1fr 1fr 1fr;
    grid-template-columns:60% 40%; padding:2rem 0; min-height:10rem;
  }
  .maps-answer p:first-of-type { align-self:end; }
  .maps-answer p:nth-of-type(3) { grid-area:3/1/4/2; align-self:flex-start; }
  .maps-answer .btn-cust { grid-area:1/2/4/3; align-self:center; }
}

/* Map modal */
.map-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.75);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.map-modal-content {
  position:relative; width:100%; max-width:800px;
  height:70vh; background:#fff; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
}
.map-modal-close {
  position:absolute; top:8px; right:12px; z-index:10;
  background:rgba(0,0,0,0.6); color:#fff; border:none;
  font-size:1.5rem; line-height:1; width:2rem; height:2rem;
  border-radius:50%; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
}
.map-modal-close:hover { background:rgba(0,0,0,0.9); }
.map-modal-content iframe { flex:1; width:100%; border:0; }
.map-modal-external {
  display:block; text-align:center; padding:0.5rem;
  background:#f1f1f1; color:#1a73e8; font-size:0.9rem;
  text-decoration:none;
}
.map-modal-external:hover { text-decoration:underline; }

/* More info */
.more-info {
  position:relative; padding:4rem 0; display:grid;
  grid-template-columns:1fr; grid-template-rows:1fr 1fr;
}
.more-info .more-info-social { align-self:end; }
.more-info .more-info-social a { color: var(--dark-blue); }
.social-modal-btn {
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--dark-blue); font-size:inherit; line-height:1;
  vertical-align:middle;
}
.social-modal-btn:hover { opacity:0.75; }

/* Footer */
footer {
  position:relative; font-size:1.5rem; font-weight:100;
  display:grid; text-align:center; padding:20px 0; gap:10px;
}
footer p:last-of-type { font-size:.8em; }
footer img:last-of-type { width:2rem; }

/* ===========================
   PAGES — DASHBOARD
   =========================== */
.dashboard { position:relative; width:100%; display:grid; gap:24px; padding:1rem 0; }
.dashboard-section {
  position:relative; padding:1.25rem 1.5rem;
  display:flex; flex-direction:column; gap:1rem;
  border:1px solid rgba(49,61,90,0.18); width:95%;
  max-width:660px; margin:0 auto; border-radius:12px;
  background:#fff;
}
.dashboard-section-title { font-size:clamp(14px,1.6vw,18px); font-weight:700; color:var(--dark-blue); }
.dashboard-table { font-size:clamp(12px,1.4vw,15px); }
.dashboard-table th { font-weight:600; color:var(--dark-blue); border-bottom:2px solid rgba(49,61,90,0.15); }
.dashboard-table td { vertical-align:middle; }

/* ===========================
   ARTICLES / RULES
   =========================== */
.articles-container { min-height:80vh; }
#articles-main-title { font-size:3rem; font-weight:900; color: var(--dark-blue); }
.article-body { border:1px solid #dee2e6; }
.news-edit { display:flex; gap:1rem; margin-top:0.5rem; }
.news-edit a, .news-edit button { color: var(--dark-blue); }
.rule-card { gap:1rem; padding:1rem; }
.rule-card img { max-height:90px; }
.rule-controls { top:0.5rem; right:0.5rem; gap:0.5rem; }
.rules-page-title { font-size:3rem; font-weight:900; }

/* Off-season banner */
.banner-main {
  position:fixed; inset:0; z-index:9999;
  background: linear-gradient(160deg, #081525 0%, #0c2640 55%, #093240 100%);
  display:flex;
  align-items:center; justify-content:center;
  padding:1.5rem;
}
.banner-card {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(0,212,235,0.2);
  border-radius:2rem;
  padding:clamp(28px, 5vw, 48px) clamp(24px, 6vw, 56px);
  max-width:460px; width:100%;
  box-shadow: 0 0 80px rgba(0,212,235,0.12), inset 0 0 40px rgba(0,0,0,0.15);
}
.banner-logo {
  width:clamp(52px, 10vw, 76px);
  opacity:0.92;
  filter: drop-shadow(0 0 14px rgba(0,212,235,0.55));
  margin-bottom:24px;
}
.banner-season {
  font-family: var(--font);
  font-size:clamp(9px, 1.6vw, 12px);
  font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: rgba(0,212,235,0.7);
  margin-bottom:14px;
}
.banner-headline {
  font-family: var(--font);
  font-size:clamp(30px, 7vw, 54px);
  font-weight:900;
  line-height:1.08;
  color:#ffffff;
}
.banner-accent {
  display:block;
  color: var(--cyan);
  text-shadow: 0 0 28px rgba(0,212,235,0.5);
  line-height:1.15;
}
.banner-waves {
  display:flex; gap:5px; align-items:flex-end;
  height:28px;
  margin:22px 0 26px;
}
.banner-waves span {
  display:block;
  width:6px; border-radius:3px;
  background: var(--cyan);
  opacity:0.65;
  animation: wave-bounce 1.2s ease-in-out infinite;
}
.banner-waves span:nth-child(2) { animation-delay:0.2s; }
.banner-waves span:nth-child(3) { animation-delay:0.4s; }
@keyframes wave-bounce {
  0%,100% { height:6px;  opacity:0.35; }
  50%      { height:24px; opacity:0.9;  }
}
.banner-btn {
  font-family: var(--font);
  font-size:clamp(12px, 2.2vw, 16px);
  font-weight:700;
  letter-spacing:0.06em;
  color:#081525;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--dark-cyan) 100%);
  border:none; border-radius:3rem;
  padding:0.8em 2.8em;
  cursor:pointer;
  box-shadow: 0 4px 22px rgba(0,212,235,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.banner-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 7px 30px rgba(0,212,235,0.55);
}

/* About */
.about-container { padding:2rem 1rem; }
.about-images-container {
  overflow-x:auto; gap:1.5rem; padding-bottom:1rem;
}
.about-images-container .photo img {
  width:300px; height:200px; object-fit:cover;
}
.about-images-container .photo .font { padding:0.5rem; }
.photo-title { font-size:1.2rem; font-weight:900; }
.photo-describe { font-size:0.9rem; }
.about-history { font-size:1.1rem; line-height:1.6; margin-bottom:1rem; }
.about-p-font { font-size:1.1rem; }
.about-arrow { font-size:2rem; align-self:center; }
#foca { width:100%; max-width:300px; }