/* style/ephemeris.css
   ------------------------------------------------------------
   EPHEMERIS GLOBAL STYLESHEET
   Goals:
   - Universal header/nav across all pages
   - Universal main container layout:
       * 1320px wide on desktop
       * responsive padding on smaller devices
       * container background (#3A3D40) with subtle noise
   - Reusable component styles:
       * panels / inner containers
       * tables
       * buttons / inputs
   - Page-specific rules ONLY at the bottom
   ------------------------------------------------------------ */

/* ============================================================
   1) RESET + BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body{
  background: #1C2020;
  color: rgba(255,255,255,0.90);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

img{ display: block; height: auto; }
svg{ display: block; }

/* ============================================================
   2) UNIVERSAL LAYOUT WRAPPERS
   ============================================================ */
.ep-container{
  width: min(1320px, calc(100% - 80px));
  margin: 0 auto;
}

@media (max-width: 749px){
  .ep-container{ width: calc(100% - 32px); }
}

/* Universal “main shell” background + subtle noise (ONLY here) */
.ep-shell{
  background-color: #3A3D40;

  /* ✅ noise tile from assets */
  background-image: eph_url("/assets/400-60-20-monochrome.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  filter: none;

  position: relative;
  border-radius: 22px;
  overflow: hidden;                 /* keep noise clipped to radius */
  padding: 22px;
  margin-top: 0;

  box-shadow:
    0 18px 55px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06); /* subtle top sheen */
}

/* Global page title inside ep-shell */
.ep-shell h1{
  margin: 0 0 10px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
}

/* Default page spacing */
.ep-main{ padding: 26px 0 56px; }

@media (max-width: 749px){
  .ep-main{ padding: 18px 0 44px; }
  .ep-shell{ padding: 16px; border-radius: 18px; }
}

/* ============================================================
   3) TOPBAR (ANNOUNCEMENT)
   ============================================================ */
.rk-topbar{
  background: #161a1b;
  border-bottom: 1px solid rgba(234,232,230);
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0;
}

.rk-topbar__text{
  display: block;
  text-align: center;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 16.8px;
  color: rgba(255,255,255,0.78);
}

.rk-topbar a { color: rgba(255,255,255,0.82); }

@media (max-width: 749px){
  .rk-topbar__text{ font-size: 11px; }
}

/* ============================================================
   4) HEADER (LOGO / TITLE / ICONS)
   ============================================================ */
.rk-mainbar{ background: #1C2020; }

/* Force header row full width (not constrained by .ep-container) */
.rk-mainbar__inner.wrap,
.rk-mainbar__inner.ep-container{
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Header grid */
.rk-mainbar__inner{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 24px;
  padding: 18px 18px 14px;
}

/* Logo sizing */
.rk-logo__img{
  width: 120px;
  height: 100px;
  object-fit: contain;
}

/* Headline typography */
.rk-heroTitle{
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 300;
  color: rgba(240,234,224);
  line-height: 40px;
}
.rk-heroTitle__line1,
.rk-heroTitle__line2{ margin: 0; }

/* Icons */
.rk-icons{
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.rk-iconBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.78);
}
.rk-iconBtn svg{ width: 22px; height: 22px; }
.rk-iconBtn:hover{ color: rgba(255,255,255,0.95); }

/* Header divider */
.rk-header{ position: relative; }
.rk-header::after{
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #c8a96a 18%,
    #c8a96a 82%,
    transparent 100%
  );
  opacity: 0.95;
}

/* ============================================================
   5) NAVIGATION (GLOBAL MENU)
   ============================================================ */

.ep-nav{
  width: 100%;
  background: #1C2020;
  position: relative;          /* anchor for absolute dropdown */
  z-index: 100000;             /* keeps nav above page content */
  overflow: visible;           /* allow dropdown to escape */
}

.ep-nav-inner{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 42px;                   /* tighten spacing */
  overflow: visible;           /* allow dropdown to escape */
}

.ep-nav-link{
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: rgba(201,208,210);
  padding: 8px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.ep-nav-link:hover{ color: rgba(255,255,255,1); }

/* Dropdown */
.ep-nav-dd{ position: static; }  /* IMPORTANT: don't anchor the panel to the Tools item */
.ep-nav-link-dd{ display: inline-flex; gap: 8px; align-items: center; }
.ep-nav-caret{ opacity: 0.7; font-size: 12px; transform: translateY(-1px); }

.ep-nav-panel{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 100%;
  background: #1C2020;
  padding: 22px 0;
  display: none;
  z-index: 100001;
}

/* Hover runway so the menu doesn't collapse while moving mouse down */
.ep-nav-panel::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -18px;      /* runway sits ABOVE the panel */
  height: 18px;
  background: transparent;
}

/* Show logic */
.ep-nav-dd:hover .ep-nav-panel,
.ep-nav-panel:hover{ display: block; }

.ep-nav-panel.on{ display:block; }


.ep-nav-grid{
  width: min(980px, calc(100vw - 36px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 220px);
  justify-content: center;
  gap: 42px;
}

@media (max-width: 980px){
  .ep-nav-grid{ grid-template-columns: repeat(2, 220px); gap: 26px; }
}

@media (max-width: 560px){
  .ep-nav-grid{ grid-template-columns: 1fr; }
  .ep-nav-thumb{ width: 100%; }
}

.ep-nav-card{
  display: block;
  text-decoration: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.ep-nav-thumb{
  height: 120px;
  width: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}

.ep-nav-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-nav-card-title{
  padding: 10px 0 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

.ep-nav-card:hover .ep-nav-thumb{
  outline: 1px solid rgba(229, 233, 233);
}

/* Prevent page wrappers from clipping the dropdown */
.header-card,
.header-card__inner,
.ep-shell{
  overflow: visible;
}


/* ============================================================
   HERO (FULL-WIDTH IMAGE + TAGLINE)
   ============================================================ */
.ep-heroFull{
  position: relative;
  margin-top: 18px;
}

.ep-heroFull::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 32px;
  background: linear-gradient(to bottom,
    rgba(15,18,19,0.00),
    rgba(15,18,19,0.65)
  );
}

.ep-heroFull__img{
  width: 100%;
  height: auto;
  display: block;
}

.ep-heroTagline{
  margin: 16px 0 22px;
  text-align: center;
  font-family: "Lato", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(120,170,255,0.95);
}

@media (max-width: 749px){
  .ep-heroFull{ margin-top: 14px; }
  .ep-heroTagline{
    margin: 14px 0 18px;
    font-size: 14px;
    padding: 0 16px;
  }
}

/* ============================================================
   6) REUSABLE COMPONENTS
   ============================================================ */
.ep-panel{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  padding: 18px;
}

.ep-h1{
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 400;
  color: rgba(255,255,255,0.95);
}
.ep-muted{ color: rgba(255,255,255,0.65); }
.ep-small{ font-size: 13px; color: rgba(255,255,255,0.72); }

.ep-btn{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  padding: 9px 12px;
  cursor: pointer;
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
}
.ep-btn:hover{ background: rgba(255,255,255,0.09); }
.ep-btn.primary{ border-color: rgba(200,169,106,0.40); }

.ep-in{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.90);
  padding: 10px 12px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 15px;
  outline: none;
}
.ep-in:focus{
  border-color: rgba(200,169,106,0.55);
  box-shadow: 0 0 0 3px rgba(200,169,106,0.10);
}

/* ============================================================
   TABLES + SECTIONS (GLOBAL)
   ============================================================ */
.ep-section{ margin-top: 18px; }

.ep-sectionHead{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.ep-sectionTitle{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.ep-tableScroll{
  overflow-x: auto;
  padding-top: 10px;
}

.ep-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.ep-table th,
.ep-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.90);
  white-space: nowrap;
}

.ep-table th{
  font-weight: 700;
  color: rgba(255,255,255,0.82);
}

.ep-table tbody tr:hover td{
  background: rgba(255,255,255,0.04);
}

.ep-pill{
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.86);
}

/* Recessed cut-out card (printed into the base) */
.header-card{
  background: #1c2020;
  border-radius: 18px;
  box-shadow:
    inset 0 18px 40px rgba(0, 0, 0, 0.78),
    inset 0 -8px 25px rgba(0, 0, 0, 0.55);
  margin-bottom: 18px;
}

.header-card__inner{ padding: 18px; }

@media (max-width: 749px){
  .header-card__inner{ padding: 14px; }
  .header-card{ margin-bottom: 14px; }
}

/* ============================================================
   7) RESPONSIVE HEADER TWEAKS
   ============================================================ */
@media (max-width: 749px){
  .rk-mainbar__inner{
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "logo icons"
      "title title";
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .rk-logo{ grid-area: logo; }
  .rk-icons{ grid-area: icons; }
  .rk-heroTitle{ grid-area: title; font-size: 22px; }
}

/* ============================================================
   8) PAGE-SPECIFIC STYLES (QUARANTINE ZONE)
   ============================================================ */

/* ------------------------------------------------------------
   equipment/my_rig.php
   ------------------------------------------------------------ */
.ep-rigTop{
  display: grid;
   grid-template-columns: 260px minmax(520px, 1fr) 360px;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .ep-rigTop{ grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   weather/index.php (PAGE-SPECIFIC ONLY)
   ------------------------------------------------------------ */

/* tonight/weather: small "spec table" inside the recessed card */
.wx-spec{
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}

.wx-spec-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.wx-spec-row:first-child{
  border-top: 0;
  padding-top: 0;
}

.wx-spec dt{
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

.wx-spec dd{
  margin: 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
}

.wx-dateNav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 10px 0 6px;
  margin-bottom: 12px;
}

.wx-dateTitle{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.wx-head{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width:980px){
  .wx-head{ grid-template-columns: 1fr; }
}

.wx-locHeader{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  margin-bottom: 10px;
}

.wx-editLink{
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  color: rgba(200, 169, 106, 0.95);
  text-decoration: underline;
  opacity: .95;
}
.wx-editLink:hover{ opacity: 1; }

.wx-days{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width:980px){
  .wx-days{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .wx-days{ grid-template-columns: 1fr; }
}

.wx-day{ text-align: center; }

.wx-dayTop{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}

.wx-dayTemps{
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.80);
}

.wx-iconFrame{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 8px;
}

.wx-iconImg{
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}
@media (max-width:980px){
  .wx-iconImg{ width: 96px; height: 96px; }
}
@media (max-width:560px){
  .wx-iconImg{ width: 84px; height: 84px; }
}

.wx-codeFallback{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.92);
}

.wx-dayMeta{
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.wx-dayMetaDate{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

.wx-dayMetaLabel{
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

/* Score pill (green/yellow/red) */
.wx-scorePill{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.wx-score--good{
  background: rgba(40, 160, 90, 0.22);
  border-color: rgba(40, 160, 90, 0.45);
  color: rgba(220, 255, 235, 0.92);
}
.wx-score--meh{
  background: rgba(210, 160, 40, 0.20);
  border-color: rgba(210, 160, 40, 0.45);
  color: rgba(255, 245, 220, 0.92);
}
.wx-score--bad{
  background: rgba(190, 60, 60, 0.20);
  border-color: rgba(190, 60, 60, 0.45);
  color: rgba(255, 225, 225, 0.92);
}
.wx-score--na{
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}

/* Hourly alignment */
#hourlyBody td,
#hourlyBody th{ text-align: center; }

#hourlyBody td:first-child,
#hourlyBody th:first-child{ text-align: left; }

/* Modal */
.wx-modalBack{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}
.wx-modalBack.on{ display: flex; }

.wx-modal{ width: min(720px, 100%); }

.wx-modal .ep-panel{ background: rgba(28, 32, 32, 0.98); }

.wx-modalHead{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.wx-modalTitle{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.92);
}

.wx-modalClose{
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  opacity: .8;
  text-decoration: underline;
}
.wx-modalClose:hover{ opacity: 1; }

/* IMPORTANT: allow dropdown to overflow (no clipping) */
.wx-modalBack,
.wx-modal,
.wx-modal .ep-panel{ overflow: visible; }

.wx-modalInner{
  display: flex;
  flex-direction: column;
  height: 420px;
  max-height: 80vh;
}

/* scroll stays on the modal body */
.wx-modalBody{
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 6px;
}

.wx-modalFoot{
  flex: 0 0 auto;
  margin-top: 12px;
}

/* Accordion */
.wx-accItem{
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  overflow: visible; /* key: don't clip dropdowns */
  margin-bottom: 12px;
}

.wx-accBtn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
}
.wx-accBtn:hover{ background: rgba(0, 0, 0, 0.24); }

.wx-accCaret{
  width: 22px;
  display: inline-flex;
  justify-content: center;
  opacity: 0.85;
}

.wx-accTitle{
  font-family: "Lato", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(120, 170, 255, 0.95);
}

.wx-accBody{
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.wx-accGrid2{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}
@media (max-width:749px){
  .wx-accGrid2{ grid-template-columns: 1fr; }
}

.wx-accGridZip{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Open state */
.wx-accItem.is-open{ background: #3A3D40; }
.wx-accItem.is-open .wx-accBtn{ background: transparent; }
.wx-accItem.is-open .wx-accBody{
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* City autocomplete dropdown */
.wx-cityWrap{ position: relative; }

.wx-citySug{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 999999;

  max-height: min(60vh, 420px);
  overflow-y: auto;

  background: #1c2020;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}