/*
Theme Name: Cross Shore Child
Theme URI: https://cross-shore.com
Description: Minimal-editorial child theme for GeneratePress. Baked-in design for Cross Shore (Kamakura x Chiang Mai). Two-shore concept, matcha-green accent, Fraunces + Instrument Sans + IBM Plex Mono.
Author: Cross Shore
Template: generatepress
Version: 1.0.0
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --cs-paper:#F3F4EF;
  --cs-panel:#EAEBE3;
  --cs-sand:#E8E3D7;
  --cs-ink:#1B241F;
  --cs-body:#2A312B;
  --cs-muted:#6A716A;
  --cs-line:#D6D5CB;
  --cs-accent:#2C4A3A;      /* matcha / pine green */
  --cs-accent-soft:#E9EEEA;
  --cs-warn:#9A5A3A;        /* used only for "cons" markers */

  --cs-serif:'Fraunces','Iowan Old Style',Palatino,Georgia,serif;
  --cs-sans:'Instrument Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --cs-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* ============================================================
   2. BASE
   ============================================================ */
body{
  background:var(--cs-paper);
  color:var(--cs-body);
  font-family:var(--cs-sans);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.grid-container{max-width:1080px;}
a{color:var(--cs-accent);}
a:hover{color:var(--cs-ink);}

h1,h2,h3,h4{
  font-family:var(--cs-serif);
  font-weight:400;
  color:var(--cs-ink);
  line-height:1.12;
  letter-spacing:-.015em;
}
.entry-content h2{font-size:clamp(24px,3.4vw,32px);margin:2.4em 0 .4em;}
.entry-content h3{font-size:clamp(20px,2.6vw,25px);margin:1.9em 0 .3em;}
.entry-content p{margin:1.15em 0;}
.entry-content a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}

/* ============================================================
   3. HEADER + NAV (quiet, editorial)
   ============================================================ */
.site-header{
  background:rgba(243,244,239,.9);
  border-bottom:1px solid var(--cs-line);
  backdrop-filter:saturate(180%) blur(8px);
}
.main-title,.site-title{
  font-family:var(--cs-mono)!important;
  font-size:15px!important;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
}
.main-navigation .main-nav ul li a{
  font-family:var(--cs-sans);
  font-size:15px;
  color:var(--cs-muted);
  text-transform:none;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{color:var(--cs-ink);}
.main-navigation{background:transparent;}

/* ============================================================
   4. ARTICLE HEADER
   ============================================================ */
.entry-header .entry-title,
.page-header .entry-title,
h1.entry-title{
  font-size:clamp(32px,6vw,54px);
  letter-spacing:-.025em;
  margin-bottom:.4em;
}
.entry-meta{
  font-family:var(--cs-mono);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--cs-muted);
  text-transform:none;
}
.entry-meta a{color:var(--cs-muted);}

/* Lede: add class "cs-lede" to the first paragraph */
.entry-content p.cs-lede{
  font-size:21px;
  line-height:1.5;
  color:var(--cs-ink);
}

/* ============================================================
   5. EDITORIAL CALLOUT  (use a normal blockquote)
   ============================================================ */
.entry-content blockquote{
  border:0;
  border-top:1px solid var(--cs-ink);
  border-bottom:1px solid var(--cs-ink);
  margin:2.2em 0;
  padding:1.4em 0;
  background:transparent;
}
.entry-content blockquote p{
  font-family:var(--cs-serif);
  font-style:italic;
  font-size:clamp(20px,3vw,25px);
  line-height:1.34;
  color:var(--cs-ink);
  margin:0;
}
.entry-content blockquote cite,
.entry-content blockquote .cs-by{
  display:block;
  font-family:var(--cs-mono);
  font-style:normal;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cs-muted);
  margin-top:.9em;
}

/* ============================================================
   6. COMPARISON TABLE  (any table in content)
   ============================================================ */
.entry-content table,
.entry-content .wp-block-table table{
  border-collapse:collapse;
  width:100%;
  font-family:var(--cs-sans);
  font-size:15px;
}
.entry-content th{
  font-family:var(--cs-mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--cs-muted);
  font-weight:500;
  text-align:left;
  border:0;
  border-bottom:1px solid var(--cs-ink);
  padding:0 14px 10px;
}
.entry-content td{
  border:0;
  border-bottom:1px solid var(--cs-line);
  padding:14px;
  vertical-align:top;
  color:var(--cs-body);
}
.entry-content tr td:first-child{
  font-family:var(--cs-serif);
  font-size:17px;
  color:var(--cs-ink);
}
/* highlight a row: add class "cs-best" to a table row via HTML block */
.entry-content tr.cs-best td{background:var(--cs-accent-soft);}

/* ============================================================
   7. UTILITY CLASSES  (add via block "Additional CSS class(es)")
   ============================================================ */

/* eyebrow / mono tag */
.cs-eyebrow{
  font-family:var(--cs-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cs-accent);
}

/* small pill */
.cs-pill{
  font-family:var(--cs-mono);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cs-accent);
  border:1px solid var(--cs-accent);
  border-radius:100px;
  padding:2px 8px;
}

/* pros / cons  — a Columns block: left column class cs-pros, right cs-cons */
.cs-pros,.cs-cons{
  border:1px solid var(--cs-line);
  background:#FBFBF8;
  padding:22px 24px;
}
.cs-pros ul,.cs-cons ul{list-style:none;margin:0;padding:0;}
.cs-pros li,.cs-cons li{
  position:relative;
  padding:8px 0 8px 22px;
  border-bottom:1px solid #EDEDDF;
  font-size:15.5px;
}
.cs-pros li:last-child,.cs-cons li:last-child{border-bottom:0;}
.cs-pros li::before{content:"+";position:absolute;left:0;color:var(--cs-accent);font-weight:600;}
.cs-cons li::before{content:"–";position:absolute;left:0;color:var(--cs-warn);font-weight:600;}

/* affiliate row — a Group block with class cs-aff */
.cs-aff{
  background:var(--cs-panel);
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:1.8em 0;
}
.cs-aff .cs-aff-name{font-family:var(--cs-serif);font-size:19px;color:var(--cs-ink);}
.cs-aff .cs-aff-sub{font-size:13px;color:var(--cs-muted);}

/* affiliate CTA — add class cs-cta to a Button block (and rel=sponsored) */
.wp-block-button.cs-cta .wp-block-button__link{
  background:transparent;
  color:var(--cs-accent);
  font-family:var(--cs-mono);
  font-size:14px;
  letter-spacing:.03em;
  border:0;
  border-bottom:1.5px solid var(--cs-accent);
  border-radius:0;
  padding:4px 2px;
}
.wp-block-button.cs-cta .wp-block-button__link:hover{color:var(--cs-ink);border-color:var(--cs-ink);}

/* author box — a Group block with class cs-author */
.cs-author{
  display:flex;
  gap:20px;
  align-items:flex-start;
  border-top:1px solid var(--cs-ink);
  margin:3em 0 0;
  padding:1.6em 0 0;
}
.cs-author img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;}
.cs-author .cs-author-name{font-family:var(--cs-serif);font-size:19px;color:var(--cs-ink);}
.cs-author .cs-author-role{
  font-family:var(--cs-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cs-muted);margin:3px 0 8px;
}

/* affiliate disclosure — a Paragraph with class cs-disclosure */
.cs-disclosure{
  background:var(--cs-panel);
  border-left:2px solid var(--cs-accent);
  padding:12px 16px;
  font-size:13.5px;
  color:#4A514A;
}

/* ============================================================
   8. BUTTONS (default) + FOOTER
   ============================================================ */
.wp-block-button__link,button,.button,input[type="submit"]{
  border-radius:2px;
  background:var(--cs-accent);
  font-family:var(--cs-sans);
}
.site-info{
  background:var(--cs-paper);
  border-top:1px solid var(--cs-line);
  font-size:13px;
  color:var(--cs-muted);
}
.site-info a{color:var(--cs-muted);}

/* ============================================================
   9. QUALITY FLOOR
   ============================================================ */
a:focus,button:focus,input:focus{outline:2px solid var(--cs-accent);outline-offset:2px;}
img{max-width:100%;height:auto;}

@media (max-width:768px){
  body{font-size:16px;}
  .cs-aff{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}