/* ============================================================
   Crucian — Living St. Croix custom CSS
   Only the signature details that core/GenerateBlocks can't
   express cleanly. Everything else lives in theme.json or
   block settings. See DESIGN-TOKENS.md + BUILD-PLAN.md.
   ============================================================ */

/* --- Line–dot–line divider motif -------------------------------
   Markup:
   <div class="lsc-divider"><span></span><i></i><span></span></div>
   Add .lsc-divider--teal for the teal dot, .lsc-divider--sm for the
   small in-section variant. */
.lsc-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0;
}
.lsc-divider span {
  width: 96px;
  height: 1px;
  background: #cdd6d8;
}
.lsc-divider i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FC4C02;          /* primary: orange dot */
}
.lsc-divider--teal i { background: #008E97; }   /* secondary: teal dot */
.lsc-divider--sm    { gap: 14px; }
.lsc-divider--sm span { width: 64px; background: rgba(252,76,2,0.4); }
.lsc-divider--sm i  { width: 11px; height: 11px; }

/* --- Striped photo placeholder ---------------------------------
   For sections awaiting Andrew's real photos. Replace the element
   with an <img>/cover block once a photo exists.
   Markup: <div class="lsc-placeholder" data-label="[ photo · beach ]"></div> */
.lsc-placeholder {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, #eef3f4 0 14px, #e3ecee 14px 28px);
}
.lsc-placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9fb0b4;
}
/* Per-category stripe tints (Home explore grid). Each overrides the base
   stripe + the monospace label color. */
.lsc-placeholder--beach     { background: repeating-linear-gradient(45deg, #e6f3f4 0 14px, #d8ecee 14px 28px); }
.lsc-placeholder--beach::after     { color: #8aa0a4; }
.lsc-placeholder--adventure { background: repeating-linear-gradient(45deg, #e8f0ec 0 14px, #dbe8e1 14px 28px); }
.lsc-placeholder--adventure::after { color: #93a89c; }
.lsc-placeholder--food      { background: repeating-linear-gradient(45deg, #f3efe9 0 14px, #ece5db 14px 28px); }
.lsc-placeholder--food::after      { color: #a89c8a; }
.lsc-placeholder--island    { background: repeating-linear-gradient(45deg, #e9eef0 0 14px, #dde6e9 14px 28px); }
.lsc-placeholder--island::after    { color: #93a3a8; }

/* Orange date tag (top-left) on Food & Dining cards */
.lsc-datetag {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FC4C02;
}

/* Hero variant: teal gradient + faint diagonal stripe overlay */
.lsc-placeholder--hero {
  background: linear-gradient(150deg, #34b9c2 0%, #0a9aa3 48%, #0a7d90 100%);
}
.lsc-placeholder--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0) 14px 28px);
}
.lsc-placeholder--hero::after { color: rgba(255,255,255,0.6); }

/* --- Kicker / eyebrow label ------------------------------------ */
.lsc-kicker {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FC4C02;
}
.lsc-kicker--aqua { color: #008E97; letter-spacing: 0.2em; }

/* --- Active nav item underline --------------------------------- */
.lsc-nav-active,
.main-navigation .current-menu-item > a {  /* GeneratePress menu hook */
  color: #005778 !important;
  border-bottom: 2px solid #FC4C02;
  padding-bottom: 3px;
}

/* --- Card hover lift -------------------------------------------
   Apply .lsc-card to the card wrapper (a group or link). In the
   Gutenberg patterns the wrapper is a core Group; the image and the
   title each carry their own link to the same URL. */
.lsc-card {
  display: block;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.lsc-card:hover { transform: translateY(-4px); }
.lsc-card:hover .lsc-placeholder { filter: brightness(0.97); }
/* Card links (image wrapper + title) inherit color, drop underline,
   so the whole card reads as one tappable unit. */
.lsc-card-link,
.lsc-card .wp-block-heading a {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* --- Article: tag pills (dynamic core/post-terms) -------------- */
.lsc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lsc-tags a {
  border: 1px solid #d8dfe1;
  color: #005778;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
}
.lsc-tags a:hover { border-color: #005778; }

/* --- Fact-tag chip (beach guide, etc.) ------------------------- */
.lsc-fact {
  display: inline-block;
  background: #f1f6f7;
  color: #006d86;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 4px;
}

/* --- Sticky info sidebar (dining review) ----------------------- */
.lsc-sidebar { position: sticky; top: 24px; }

/* --- Responsive: stack the alternating / multi-col grids ------- */
@media (max-width: 768px) {
  .lsc-entry,            /* beach-entry alternating grid */
  .lsc-split {           /* generic 2-col splits */
    grid-template-columns: 1fr !important;
  }
  .lsc-entry .lsc-placeholder { order: -1; }   /* image first on mobile */
  .lsc-sidebar { position: static !important; }  /* drop sticky sidebar */
}

/* --- GeneratePress typography compatibility -------------------------------
   GP's base CSS (assets/css/main.css) resets `body` and `h1–h6`
   font-family / -size / -weight at element specificity (0,0,1) and loads after
   theme.json's global styles, overriding theme.json's element typography
   (color survives because GP's reset doesn't set it). Re-assert the design
   typography one notch higher (0,0,2) so it wins by specificity in both the
   front end and the editor iframe; reuse theme.json presets to stay DRY. */
html body {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--base);   /* 18px */
  line-height: 1.85;
}
body h1 { font-family: var(--wp--preset--font-family--playfair);   font-weight: 800; font-size: var(--wp--preset--font-size--title); }  /* 52px */
body h2 { font-family: var(--wp--preset--font-family--playfair);   font-weight: 700; font-size: var(--wp--preset--font-size--h-2); }   /* 30px */
body h3 { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: var(--wp--preset--font-size--h-3); }   /* 19px */

/* --- Nav (P2.1) — GeneratePress header styled to LSC-Nav ------------------
   GP renders the primary menu (term 2) in its PHP header; we style it here.
   Selectors are prefixed with .site-header so they beat GP's defaults
   (which load after this file) by specificity rather than source order. */
.site-header { background:#ffffff; border-bottom:1px solid #e9edee; }
.site-header .inside-header { max-width:1280px; padding:14px 40px; }
.site-header .site-logo img { height:52px; width:auto; }
.site-header .main-navigation .main-nav ul li a {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight:600;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  color:#4a5a60;
}
.site-header .main-navigation .main-nav ul li a:hover,
.site-header .main-navigation .main-nav ul li.current-menu-item a:hover { color:#005778; }

/* --- Footer (P2.2) — LSC-Footer synced pattern --------------------------- */
/* Band 1: newsletter */
.lsc-news { background:#e9f6f7; padding:88px 48px; text-align:center; }
.lsc-news .lsc-news-title { font-family:var(--wp--preset--font-family--playfair); font-weight:700; font-size:34px; line-height:1.2; color:#005778; margin:14px 0; }
.lsc-news .lsc-news-body { color:#58595B; font-size:16px; max-width:560px; margin:0 auto 24px; }
.lsc-news-form { display:flex; gap:10px; max-width:460px; margin:0 auto; }
.lsc-news-form input[type=email] { flex:1; border:1px solid #c2dde0; background:#fff; border-radius:4px; padding:13px 14px; font-family:var(--wp--preset--font-family--montserrat); font-size:15px; color:#2f3c41; }
.lsc-news-form button { background:#FC4C02; color:#fff; border:0; border-radius:5px; padding:13px 22px; font-family:var(--wp--preset--font-family--montserrat); font-weight:700; font-size:15px; cursor:pointer; }
.lsc-news-form button:hover { background:#e34402; }
/* Band 2: footer */
.lsc-foot { background:#efeeec; padding:76px 48px 56px; }
.lsc-foot .lsc-foot-grid { gap:60px; align-items:flex-start; }
.lsc-foot-grid .lsc-foot-brand { flex-basis:58%; }
.lsc-foot-grid .lsc-foot-nav { flex-basis:34%; border-left:1px solid #dcdad6; padding-left:48px; }
.lsc-foot-badge { width:124px; height:124px; border-radius:50%; background:#005778; display:flex; align-items:center; justify-content:center; margin:0 0 22px; }
.lsc-foot-badge img { width:92px; height:auto; }
.lsc-foot-about { text-transform:uppercase; letter-spacing:0.07em; font-size:12.5px; line-height:1.9; color:#7c8389; max-width:360px; }
.lsc-foot-links { list-style:none; margin:0; padding:0; }
.lsc-foot-links li { border-bottom:1px solid #dcdad6; }
.lsc-foot-links li a { display:block; padding:15px 0; text-decoration:none; text-transform:uppercase; letter-spacing:0.18em; font-size:12.5px; font-weight:600; color:#8a9094; font-family:var(--wp--preset--font-family--montserrat); }
.lsc-foot-links li a:hover { color:#005778; }
.lsc-foot-bottom { margin-top:48px; padding-top:22px; border-top:1px solid #dcdad6; align-items:center; }
.lsc-foot-copy { color:#8a9094; font-size:13px; margin:0; }
.lsc-foot-social a { color:#7c8389; }
.lsc-foot-social a:hover { color:#005778; }
@media (max-width:900px) {
  .lsc-foot-grid .lsc-foot-nav { border-left:0; padding-left:0; }
  .lsc-foot-bottom { flex-direction:column; gap:16px; align-items:flex-start; }
}

/* --- Nav layout fix (horizontal menu + sized logo on desktop) ------------- */
.site-header .site-logo img,
.site-header .header-image.is-logo-image { height:52px; width:auto; max-height:52px; }
@media (min-width:901px) {
  .site-header .main-navigation .main-nav > ul {
    display:flex; flex-wrap:wrap; align-items:center;
  }
  .site-header .main-navigation .main-nav > ul > li > a { padding:8px 11px; }
}

/* Hero headline link keeps the heading's color, no underline (replaces the removed inline style) */
.wp-block-cover h1 a { color: inherit; text-decoration: none; }