/* South Jersey Yacht Sales: redesign prototype styles
   Tokens live in :root. When this moves to WordPress, map them into theme.json
   (see DESIGN.md, "WordPress mapping"). */

:root {
  /* Color */
  --ink-deep: #0F2430;      /* header, footer, dark panels, primary button */
  --heading: #1C3A47;       /* serif headings on light grounds, links */
  --text: #10222A;          /* body text */
  --body-2: #3A4E57;        /* secondary paragraphs */
  --muted: #5B6E76;         /* small caps labels, meta */
  --muted-2: #6B7D85;       /* inactive tabs, breadcrumbs */
  --stone: #F4F6F6;         /* alternating section ground */
  --rule: #D9DFE1;          /* hairlines */
  --rule-soft: #E5E9EB;
  --field-line: #C9D2D5;    /* underline form fields */
  --accent: #B8975A;        /* muted gold, used sparingly (one hairline, a few labels) */
  --placeholder: #22414E;   /* photo placeholders only; delete once real images are in */
  --white: #FFFFFF;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;

  /* Layout */
  --content-max: 1320px;
  --gutter: 48px;
  --section-pad: 120px;
}

body { margin: 0; background: var(--white); }
a { color: var(--heading); }
a:hover { color: var(--ink-deep); }
img { max-width: 100%; height: auto; }

/* Header and footer mark. Height is set; width follows the file so it cannot stretch. */
.site-logo-link { flex: 0 0 auto; }
.site-logo { display: block; width: auto; height: 76px; max-width: none; align-self: flex-start; }
.site-logo--footer { height: 88px; }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }

/* Display serif: always uppercase, light tracking, weight 400. Never bold. */
.disp { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; margin: 0; }

/* Small tracked caps: nav, labels, buttons, meta. */
.cap { font: 500 13px/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }

/* Buttons: square corners, tracked caps, solid or 1px outline. No pills, no shadows. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px; font: 500 13px var(--font-body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-radius: 0; cursor: pointer; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Photo placeholders. Replace each .ph with an <img> or background image. */
.ph { display: flex; align-items: flex-end; box-sizing: border-box; padding: 14px 16px; background: var(--placeholder); color: rgba(255,255,255,.55); font: 300 12px/1.3 var(--font-body); letter-spacing: .04em; }

/* Real photos. The frame sets the crop; the image covers it. */
.media { position: relative; overflow: hidden; background: var(--placeholder); }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.is-active { opacity: 1; }

[role="search"] input::placeholder { color: var(--muted); opacity: 1; }

.brand-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 36px 48px; }
.brand-row a { display: flex; align-items: center; justify-content: center; flex: 1 1 160px; text-decoration: none; }
.brand-row img { display: block; height: 56px; width: auto; max-width: 100%; }

.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 20px; flex: 1 1 280px; max-width: 420px; min-width: 0; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; flex: 2 1 480px; min-width: 0; }
.footer-links a { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* Underline form fields (listing page) */
.field { display: flex; flex-direction: column; gap: 2px; }
.field span { font: 500 11px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { border: 0; border-bottom: 1px solid var(--field-line); outline: 0; padding: 8px 0 10px; font: 300 18px var(--font-body); color: var(--text); background: transparent; resize: vertical; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--heading); }

/* Text tabs and toggles: underline marks the active state */
.tab, .toggle { padding: 0 0 6px; background: transparent; border: 0; border-bottom: 1px solid transparent; font: 500 13px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); cursor: pointer; min-height: 32px; }
.tab.is-active, .toggle.is-active { color: var(--heading); border-bottom-color: var(--heading); }
[data-tab="desc"], [data-tab="specs"] { min-height: 44px; padding-bottom: 14px; margin-bottom: -1px; }

/* Listing gallery thumbnails */
.thumb { position: relative; overflow: hidden; border: 0; padding: 0; text-align: left; cursor: pointer; min-height: 0; aspect-ratio: 16/10; background: var(--placeholder); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.is-active { outline: 2px solid var(--white); outline-offset: -8px; }

/* Responsive helpers */
.showsm { display: none !important; }
@media (max-width: 760px) {
  :root { --gutter: 20px; --section-pad: 72px; }
  .hidesm { display: none !important; }
  .showsm { display: flex !important; }
  h1.disp { font-size: 46px !important; }
  h2.disp { font-size: 34px !important; }
  .brand-row img { height: 40px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
}