/*
Theme Name: Reef
Theme URI: https://jsgtech.com/
Author: JSG Technologies LLC
Description: Reef LLC
Version: 1.0.0
License: GPLv2 or later
Text Domain: reef
*/

:root{
  --bg: #0b1320;
  --surface: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --brand: #2dd4bf;    /* seafoam */
  --brand2: #60a5fa;   /* ocean blue */
  --danger: #fb7185;   /* coral */
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --max: 1100px;
}

/* Base */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1000px 700px at 15% 20%, rgba(45,212,191,.10), transparent 60%),
              radial-gradient(900px 600px at 85% 35%, rgba(96,165,250,.10), transparent 55%),
              var(--bg);
  line-height: 1.5;
}
a{ color: inherit; }
img{ max-width:100%; height:auto; }

/* Parallax Background */
.site-parallax-bg{
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url('assets/bg.webp');
  background-size: cover;
  background-position: center;

  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}

/* Layout helpers */
.container{
  width: min(var(--max), calc(100% - 2rem));
  margin-inline: auto;
}
.stack > * + *{ margin-top: 1rem; }

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(11,19,32,.65);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: .75rem;
  text-decoration:none;
}
.brand-title{
  font-weight: 750;
  letter-spacing: .2px;
}
.brand-tag{
  display:block;
  font-size: .85rem;
  color: var(--muted);
}
.site-logo img{ height: 36px; width:auto; }

/* Nav */
.primary-nav{
  display:flex;
  align-items:center;
  gap: .75rem;
}
.primary-nav ul{
  list-style:none;
  display:flex;
  gap:.25rem;
  padding:0;
  margin:0;
}
.primary-nav a{
  display:inline-flex;
  align-items:center;
  padding: .55rem .75rem;
  border-radius: 999px;
  text-decoration:none;
  color: var(--muted);
}
.primary-nav a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: .55rem .8rem;
  cursor:pointer;
}
@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .primary-nav ul{
    display:none;
    position:absolute;
    right: 1rem;
    top: 64px;
    flex-direction: column;
    min-width: 240px;
    padding: .5rem;
    background: rgba(11,19,32,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
  .primary-nav ul.is-open{ display:flex; }
  .primary-nav a{ width:100%; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .85rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: linear-gradient(135deg, rgba(45,212,191,.95), rgba(96,165,250,.95));
  border-color: rgba(255,255,255,.18);
  color: rgba(5,10,18,.95);
}
.btn-secondary{
  background: rgba(255,255,255,.06);
}
.btn-coral{
  background: linear-gradient(135deg, rgba(251,113,133,.92), rgba(245,158,11,.85));
  border-color: rgba(255,255,255,.18);
  color: rgba(5,10,18,.95);
}

/* Hero */
.hero{
  position: relative;
  min-height: clamp(300px, 48vh, 460px);
  display:flex;
  align-items: stretch;
}
.hero-media{
  position:absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,19,32,.35), rgba(11,19,32,.88)),
              radial-gradient(900px 700px at 25% 35%, rgba(45,212,191,.20), transparent 55%),
              radial-gradient(900px 700px at 75% 25%, rgba(96,165,250,.20), transparent 60%);
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .78;
  filter: saturate(1.06) contrast(1.03);
}
.hero-inner{
  position: relative;
  width:100%;
  padding: clamp(1.25rem, 4vw, 2.5rem) 0;
  display:flex;
  align-items:center;
  justify-content:center; /* ← centers the card horizontally */
  text-align:center;       /* ← centers text inside */
}
.hero-card{
  width: min(640px, 100%);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow);
  padding: clamp(.9rem, 2.5vw, 1.5rem);
}
.hero h1{
  margin: 0 0 .6rem 0;
  font-size: clamp(2.0rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: .2px;
}
.hero p{
  margin: 0 0 1.25rem 0;
  color: var(--muted);
  font-size: clamp(1.0rem, 1.6vw, 1.12rem);
}
.hero-ctas{
  display:flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .25rem;
  justify-content: center;
}
.hero-meta{
	margin-top: 1.25rem;
	display:flex;
	flex-wrap: wrap;
	gap: .8rem 1.2rem;
	color: var(--muted);
	font-size: .95rem;
	justify-content: center;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

/* Content */
.page-content{
  padding: 2.5rem 0 3.5rem;
}
.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  padding: 1.25rem;
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(11,19,32,.65);
  padding: 2rem 0;
  color: var(--muted);
}
.footer-inner{
  display:flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items:center;
  justify-content: space-between;
}
.footer-links a{
  color: var(--muted);
  text-decoration:none;
  margin-right: .9rem;
}
.footer-links a:hover{ color: var(--text); }

/* WordPress defaults: keep basic readability */
.entry-content :where(h2,h3){ margin-top: 1.4rem; }
.entry-content a{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* --- Swipe Rails (mobile-first) ------------------------------------------- */

.rails-wrap{
  padding: 1rem 0 3rem;
}

.rail-section + .rail-section{
  margin-top: 1.75rem;
}

.rail-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .75rem 0;
}

.rail-title{
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: .2px;
}

.rail-more a{
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.rail-more a:hover{ color: var(--text); }

.rail{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: .75rem;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 1rem;

  padding: .25rem .75rem .75rem;
  margin: 0 -.75rem; /* lets cards “bleed” edge-to-edge on mobile */
}

@media (min-width: 700px){
  .rail{
    grid-auto-columns: 340px; /* desktop becomes card columns */
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-padding-left: 0;
  }
}

.rail-card{
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--text);

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  overflow: hidden;

  display: grid;
  grid-template-rows: 160px auto;
  min-height: 280px;
}

.rail-card:hover{
  transform: translateY(-1px);
}

.rail-card-media{
  position: relative;
  background: rgba(255,255,255,.05);
}
.rail-card-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}
.rail-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(11,19,32,.05), rgba(11,19,32,.55));
}

.rail-card-body{
  padding: .95rem 1rem 1rem;
  display:flex;
  flex-direction: column;
  gap: .45rem;
}

.rail-card-title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.rail-card-excerpt{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;

  /* clamp to ~3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rail-card-cta{
  margin-top: auto;
  display:flex;
  align-items:center;
  gap:.45rem;
  color: rgba(45,212,191,.95);
  font-weight: 650;
  font-size: .95rem;
}