/* ==================================================================
   Rowdy Base CSS (drop-in for foundation.css)
   - Floating/glassy top bar
   - Responsive grid: .row + .columns, small-*, medium-*, large-*
   - Buttons, forms, tables, cards, utilities
   - Ivory + tan/brown palette via CSS variables
   ================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --bg:#FEFCF8;           /* ivory */
  --surface:#FFFFFF;
  --card:#FFFCF3;
  --muted:#6E6256;        /* warm gray-brown */
  --text:#2E2217;         /* deep brown */
  --brand:#C59A6D;        /* saddle tan */
  --brand-2:#8B5E3C;      /* chestnut */
  --danger:#9B2C2C;
  --border:#EEE5D9;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 26px rgba(80,56,30,.12);
  --shadow-lg:0 20px 50px rgba(80,56,30,.16);
  --ring:0 0 0 3px rgba(197,154,109,.35);
  --nav-height:64px;

  --container:1200px;
  --gutter: 1rem;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video,canvas{display:block;max-width:100%}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Grid ---------- */
.container{max-width:var(--container);margin-inline:auto;padding:0 var(--gutter)}
.row{display:flex;flex-wrap:wrap;margin-left:calc(var(--gutter)*-0.5);margin-right:calc(var(--gutter)*-0.5)}
.columns{padding-left:calc(var(--gutter)*.5);padding-right:calc(var(--gutter)*.5);width:100%}

/* Width helpers */
[class*="small-"]{width:100%}
.small-12{width:100%}.small-6{width:50%}.small-4{width:33.333%}.small-3{width:25%}

@media(min-width:960px){
  .medium-12{width:100%}.medium-6{width:50%}.medium-4{width:33.333%}.medium-3{width:25%}
}
@media(min-width:1200px){
  .large-12{width:100%}.large-6{width:50%}.large-4{width:33.333%}.large-3{width:25%}
}

/* ---------- Top Bar ---------- */
.top-bar{position:sticky;top:0;z-index:1000;height:var(--nav-height);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--border)}
.top-bar .title-area{list-style:none;margin:0;padding:0}
.top-bar .name h1{font-size:1.05rem;margin:0}
.top-bar .name a{color:var(--text);text-decoration:none}
.top-bar .top-bar-section{display:flex;justify-content:space-between;align-items:center;height:100%}
.top-bar .top-bar-section .right,.top-bar .top-bar-section .left{
  display:flex;gap:.75rem;list-style:none;margin:0;padding:0;align-items:center}
.top-bar .top-bar-section a{display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .75rem;border-radius:10px;color:var(--text)}
.top-bar .top-bar-section a:hover{background:color-mix(in srgb,var(--brand-2) 12%,transparent)}

@media(max-width:800px){
  .top-bar{height:auto;padding:.5rem 0}
  .top-bar .top-bar-section{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{line-height:1.25;margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,2.6rem)}
h2{font-size:clamp(1.6rem,4vw,2rem)}
h3{font-size:clamp(1.25rem,3vw,1.5rem)}
p{margin:0 0 1rem}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.button,.btn{display:inline-block;border:1px solid var(--brand);
  background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand)70%,#5f4226));
  color:#fff;font-weight:700;padding:.65rem 1rem;border-radius:12px;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .12s ease,filter .12s ease}
.button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn-danger{background:linear-gradient(180deg,var(--danger),#7e1f1f);border-color:var(--danger)}
.btn:focus-visible,.button:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---------- Forms ---------- */
input,select,textarea{width:100%;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:12px;padding:.65rem .8rem;box-shadow:var(--shadow)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring)}
label{display:block;font-weight:600;margin:.3rem 0}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 1rem;
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* If you want certain cards with *extra* padding, you can still add .pad */
.card.pad {
  padding: 1.5rem;            /* a bit more breathing room */
}


/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:.75rem;border-bottom:1px solid var(--border);vertical-align:top}
.table tr:last-child td{border-bottom:none}

/* ---------- Utility ---------- */
.text-center{text-align:center}.text-right{text-align:right}
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}
.round{border-radius:var(--radius)}.shadow{box-shadow:var(--shadow)}.border{border:1px solid var(--border)}

/* ---------- Hero & CTA ---------- */
.rl-hero{padding:3rem 0 2rem}
.rl-hero__title{margin-bottom:.25rem}
.rl-hero__subtitle{color:var(--muted);max-width:60ch}
.rl-hero__cta .button{margin-right:.5rem}
.rl-cards{padding:1rem 0 2rem}
.rl-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;color:inherit;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.rl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.rl-card__media{aspect-ratio:4/3;background:#f4ede2 center/cover no-repeat}
.rl-card__body{padding:.9rem 1rem}
.rl-cta{padding:2rem 0;text-align:center;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.rl-footer{padding:2rem 0;text-align:center}

/* ======= Header Polish ======= */
.rl-topbar{
  position:sticky; top:0; z-index:1000; height:var(--nav-height,64px);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom:1px solid var(--border, #eee5d9);
  transition: box-shadow .2s ease, background .2s ease;
}
.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem}

.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--text,#2e2217)}
.brand-mark{font-size:1.25rem; line-height:1}
.brand-text{font-size: 1.45rem; font-weight:800; letter-spacing:.2px}
.brand-logo {
  height: 34px;          /* keeps it proportional in the header */
  width: auto;           /* let width auto-scale */
  display: inline-block;
  vertical-align: middle;
}

.nav{display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0}
.nav > li{position:relative}
.nav > li > a{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem .8rem; border-radius:999px; color:var(--text,#2e2217); text-decoration:none;
}
.nav > li > a:hover{ background: color-mix(in srgb, var(--brand-2,#8b5e3c) 12%, transparent) }
.nav > li > a::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem;
  height:2px; background:transparent; border-radius:2px; transition:background .15s ease;
}
.nav > li > a:hover::after{ background: color-mix(in srgb, var(--brand,#c59a6d) 60%, transparent) }

.nav .divider{ width:1px; height:24px; background:var(--border,#eee5d9); margin:0 .25rem }
.btn-small{ padding:.5rem .8rem; font-size:.95rem }

/* Subtle shadow when page is scrolled (optional tiny JS below) */
body.scrolled .rl-topbar{ box-shadow: 0 10px 26px rgba(80,56,30,.12) }

/* ======= Mobile nav (pure CSS) ======= */
.nav-toggle{ display:none }
.hamburger{
  display:none; width:44px; height:44px; border-radius:10px;
  align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--border,#eee5d9); background:var(--surface,#fff);
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  display:block; width:20px; height:2px; background:var(--text,#2e2217); position:relative; border-radius:2px
}
.hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0 }
.hamburger span::before{ top:-6px } .hamburger span::after{ top:6px }

/* Mobile layout */
@media (max-width: 900px){
  .nav{ position:absolute; top:calc(var(--nav-height,64px) + 8px); right:0; left:0;
        margin:0; padding:.5rem; display:none; flex-direction:column; gap:.25rem;
        background: color-mix(in srgb, var(--surface,#fff) 96%, transparent);
        backdrop-filter: blur(10px); border-bottom:1px solid var(--border,#eee5d9) }
  .nav > li > a{ width:100% }
  .nav .divider{ display:none }
  .hamburger{ display:flex }
  .nav-toggle:checked ~ .hamburger span{ background:transparent }
  .nav-toggle:checked ~ .hamburger span::before{ transform:translateY(6px) rotate(45deg) }
  .nav-toggle:checked ~ .hamburger span::after{ transform:translateY(-6px) rotate(-45deg) }
  .nav-toggle:checked ~ .nav{ display:flex }
}

/* Optional: highlight current page (add .is-active to the <li>) */
.nav > li.is-active > a{ background: color-mix(in srgb, var(--brand-2,#8b5e3c) 14%, transparent) }
.nav > li.is-active > a::after{ background: var(--brand,#c59a6d) }