/* =========================================================
   Old Shrimp Road Press — styles.css
   ---------------------------------------------------------
   CUSTOMIZATION GUIDE (quick):
   1) Colors: edit CSS variables in :root (below)
   2) Fonts:  edit --font-heading and --font-body
   3) Spacing: edit --space-* scale
   4) Max width: edit --container
   ---------------------------------------------------------
   NOTE: This site is pure HTML/CSS (no JS). Forms use
         placeholder action URLs you can wire up later.
   ========================================================= */

/* ---------- Design Tokens (EDIT THESE) ---------- */
:root{
  /* Color palette (per requirements) */
  --color-primary: #1a4d6d;     /* deep navy blue */
  --color-secondary: #2d8b8b;   /* teal/turquoise */
  --color-accent: #d4a574;      /* warm gold */
  --color-bg: #fdfbf7;          /* warm off-white */
  --color-bg-2: #f5f1eb;        /* light cream */
  --color-text: #2c3e50;        /* dark gray-blue */
  --color-muted: #5a6d7a;
  --color-border: rgba(44,62,80,.15);
  --color-shadow: rgba(26,77,109,.14);

  /* Typography */
  --font-heading: Georgia, Garamond, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Layout */
  --container: 1100px;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 10px 24px var(--color-shadow);
  --shadow-sm: 0 6px 16px rgba(26,77,109,.10);

  /* Component sizing */
  --nav-height: 72px;
  --focus-ring: 0 0 0 3px rgba(45,139,139,.25);
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: linear-gradient(180deg, var(--color-bg), var(--color-bg-2));
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}
img{ max-width: 100%; height:auto; }
a{ color: var(--color-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }
p{ margin: 0 0 var(--space-4); }
h1, h2, h3, h4{
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}
small, .small{ color: var(--color-muted); }

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: var(--space-4); top: var(--space-4);
  width:auto; height:auto; padding: var(--space-3) var(--space-4);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  z-index: 9999;
}

/* ---------- Layout Helpers ---------- */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.section{
  padding: var(--space-7) 0;
}
.section.compact{
  padding: var(--space-6) 0;
}
.grid{
  display:grid;
  gap: var(--space-5);
}
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){
  .grid.two, .grid.three{ grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.card{
  background: rgba(255,255,255,.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.card.tight{ padding: var(--space-4); }
.card header{ margin-bottom: var(--space-3); }
.kicker{
  display:inline-block;
  color: var(--color-secondary);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
}
.badge{
  display:inline-block;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .85rem;
  background: rgba(212,165,116,.12);
}
.hr{
  height:1px; background: var(--color-border);
  margin: var(--space-5) 0;
}

/* ---------- Buttons / Links ---------- */
.btn{
  display:inline-block;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration:none !important;
  transition: transform .08s ease, box-shadow .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 18px rgba(26,77,109,.22);
}
.btn.primary:hover{ filter: brightness(1.06); }
.btn.secondary{
  background: rgba(45,139,139,.12);
  border-color: rgba(45,139,139,.35);
  color: var(--color-primary);
}
.btn.secondary:hover{ background: rgba(45,139,139,.18); }
.link-row{
  display:flex; gap: var(--space-3);
  flex-wrap: wrap;
  align-items:center;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 1000;
  background: rgba(253,251,247,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: var(--nav-height);
  gap: var(--space-5);
}
.brand{
  display:flex; align-items:center; gap: var(--space-3);
}
.brand-mark{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 8px 16px rgba(26,77,109,.18);
}
.brand h1{
  font-size: 1.15rem;
  margin:0;
}
.brand .tagline{
  font-size: .85rem;
  color: var(--color-muted);
  margin-top: .1rem;
}
.navlinks{
  display:flex;
  align-items:center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.navlinks a{
  padding: .45rem .75rem;
  border-radius: 999px;
  font-weight: 700;
  color: var(--color-text);
}
.navlinks a:hover{
  background: rgba(26,77,109,.08);
  text-decoration:none;
}
.navlinks a.active{
  background: rgba(212,165,116,.18);
  border: 1px solid rgba(212,165,116,.35);
}
@media (max-width: 820px){
  .navbar{ height: auto; padding: var(--space-4) 0; flex-direction: column; align-items: flex-start; }
  .navlinks{ width:100%; justify-content:flex-start; }
}

/* ---------- Hero ---------- */
.hero{
  padding: var(--space-8) 0 var(--space-7);
}
.hero-wrap{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: var(--space-6);
  align-items:center;
}
@media (max-width: 900px){ .hero-wrap{ grid-template-columns: 1fr; } }
.hero h2{
  font-size: clamp(2rem, 3.2vw, 3rem);
}
.hero p{
  font-size: 1.08rem;
  color: var(--color-muted);
}
.hero-panel{
  background: linear-gradient(135deg, rgba(26,77,109,.10), rgba(45,139,139,.10));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}
.hero-panel .img-placeholder{
  height: 220px;
}

/* ---------- Image placeholders ---------- */
.img-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius);
  border: 1px dashed rgba(44,62,80,.28);
  background: rgba(255,255,255,.55);
  color: rgba(44,62,80,.65);
  font-weight: 700;
  text-align:center;
  padding: var(--space-5);
}
.img-placeholder.tall{ height: 320px; }
.img-placeholder.square{ height: 240px; }

/* ---------- Forms ---------- */
form{
  display:grid;
  gap: var(--space-3);
}
label{
  font-weight: 700;
  font-size: .95rem;
}
input, textarea, select{
  width:100%;
  padding: .8rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.9);
  font: inherit;
}
textarea{ min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: rgba(45,139,139,.55);
}
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 800px){
  .form-row{ grid-template-columns: 1fr; }
}
.form-note{
  margin-top: var(--space-2);
  font-size: .9rem;
  color: var(--color-muted);
}

/* ---------- Book meta ---------- */
.meta{
  display:flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.meta .pill{
  display:inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.7);
  font-size: .9rem;
}
blockquote{
  margin: 0;
  padding: var(--space-4);
  border-left: 4px solid rgba(212,165,116,.6);
  background: rgba(212,165,116,.10);
  border-radius: var(--radius-sm);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--color-border);
  background: rgba(253,251,247,.9);
  padding: var(--space-7) 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.footer-links a{
  display:inline-block;
  margin: 0 var(--space-3) var(--space-2) 0;
}
.footer-social a{
  display:inline-block;
  margin-right: var(--space-3);
}

/* ---------- Page heading ---------- */
.page-head{
  padding: var(--space-6) 0 var(--space-4);
}
.breadcrumb{
  font-size: .95rem;
  color: var(--color-muted);
}
.page-title{
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
}
.lede{ color: var(--color-muted); font-size: 1.05rem; max-width: 70ch; }

/* ---------- FAQ ---------- */
details{
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: rgba(255,255,255,.75);
}
details + details{ margin-top: var(--space-3); }
summary{
  cursor: pointer;
  font-weight: 800;
  font-family: var(--font-heading);
}


/* ---------- Media helpers ---------- */
.figure{
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.6);
  overflow: hidden;
}
.figure img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- Callouts ---------- */
.callout{
  border-radius: var(--radius);
  border: 1px solid rgba(212,165,116,.40);
  background: linear-gradient(135deg, rgba(212,165,116,.16), rgba(45,139,139,.10));
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.callout h3{ margin-bottom: var(--space-2); }
.callout .small{ margin: 0; }