/*
Theme Name: Sailing Holidays Logbook
Theme URI: https://sailingholidays.blog
Description: Child theme of Twenty Twenty-Five for sailingholidays.blog — a community logbook of Ionian trip reports, with member tier badges on every byline.
Author: Sailors Breeze
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sailing-holidays-logbook
WPVibe: yes
Update URI: false
*/

/* ---------------------------------------------------------------
   Night watch — the dark theme.
   theme.json ships the daylight palette; this remaps the same
   preset custom properties when the reader's device asks for dark.
   Every value here comes from the design system, not from guesswork.
   --------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--surface-page: #15202e;
    --wp--preset--color--surface-card: #1f2f44;
    --wp--preset--color--surface-sunk: #101a26;
    --wp--preset--color--surface-deep: #0e1826;
    --wp--preset--color--ink: #f2ede4;
    --wp--preset--color--ink-muted: #a8a295;
    --wp--preset--color--ink-inverse: #f2ede4;
    --wp--preset--color--ink-inverse-muted: #a9c9cc;
    --wp--preset--color--accent: #7fc4c9;
    --wp--preset--color--accent-ink: #8fd0d5;
    --wp--preset--color--accent-wash: #1c3b45;
    --wp--preset--color--accent-deep: #14484e;
    --wp--preset--color--action: #e8795a;
    --wp--preset--color--action-hover: #f08f72;
    --wp--preset--color--on-action: #2b1208;
    --wp--preset--color--action-bright: #e8795a;
    --wp--preset--color--sand: #6b5e45;
    --wp--preset--color--sand-ink: #f0e6d2;
    --wp--preset--color--border: #2f4157;
    --wp--preset--color--border-strong: #445973;
    --wp--preset--color--tier-aboard-bg: #2b3947;
    --wp--preset--color--tier-aboard-ink: #d3dde5;
    --wp--preset--color--tier-page-bg: #432e22;
    --wp--preset--color--tier-page-ink: #eac3a8;
    --wp--preset--color--tier-chapter-bg: #333f49;
    --wp--preset--color--tier-chapter-ink: #dbe4ea;
    --wp--preset--color--tier-volume-bg: #48390f;
    --wp--preset--color--tier-volume-ink: #f2d98c;
  }
}

/* --- Focus: never removed, 2px at 2px offset --- */

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-ink);
  outline-offset: 2px;
}

/* --- Brand lockup --- */

.logbook-brand { gap: 0.5rem; }
.logbook-brand .logbook-mark { width: 2.2em; height: auto; flex: none; display: block; }
.logbook-wordmark a,
.logbook-wordmark {
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
}
.logbook-wordmark .tld { color: var(--wp--preset--color--action-bright); }

/* --- Story cards --- */

.logbook-card { height: 100%; }
.logbook-card:hover { border-color: var(--wp--preset--color--border-strong); }
.logbook-card .wp-block-post-title a { text-decoration: none; }
.logbook-card:hover .wp-block-post-title a { text-decoration: underline; }
.logbook-card .wp-block-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Byline and tier badge --- */

.logbook-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--ink-muted);
  margin-top: auto;
}
.logbook-byline a { color: inherit; text-decoration: none; }
.logbook-byline a:hover { text-decoration: underline; }
.logbook-byline .name { color: var(--wp--preset--color--ink); }

.logbook-badge {
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  line-height: 18px;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.logbook-badge.is-aboard  { background: var(--wp--preset--color--tier-aboard-bg);  color: var(--wp--preset--color--tier-aboard-ink); }
.logbook-badge.is-page    { background: var(--wp--preset--color--tier-page-bg);    color: var(--wp--preset--color--tier-page-ink); }
.logbook-badge.is-chapter { background: var(--wp--preset--color--tier-chapter-bg); color: var(--wp--preset--color--tier-chapter-ink); }
.logbook-badge.is-volume  { background: var(--wp--preset--color--tier-volume-bg);  color: var(--wp--preset--color--tier-volume-ink); }
.logbook-badge.is-lapsed  { opacity: .7; }

.logbook-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wp--preset--color--accent-wash);
  color: var(--wp--preset--color--accent-ink);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 500;
}

/* --- Trip facts --- */

.logbook-tripfacts {
  background: var(--wp--preset--color--surface-sunk);
  border-radius: 8px;
  padding: 20px;
  margin: 0 0 var(--wp--preset--spacing--50);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px 16px;
}
.logbook-tripfacts dt {
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--ink-muted);
  margin-bottom: 3px;
}
.logbook-tripfacts dd {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 22px;
  color: var(--wp--preset--color--ink);
}
.logbook-tripfacts dd.fig { font-family: var(--wp--preset--font-family--mono); }
.logbook-tripfacts .wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------
   Links on a dark ground.
   The global link colour is a darkened teal tuned for contrast on
   cream. On navy it measures 2.3:1 and all but disappears, which is
   what the footer nav was doing. Buttons keep their own colours.
   --------------------------------------------------------------- */

.has-surface-deep-background-color a:not(.wp-element-button),
.has-accent-deep-background-color a:not(.wp-element-button) {
  color: var(--wp--preset--color--ink-inverse);
}

/* Footer nav links are stacked text. Give them a real touch target:
   an 18px line alone is under the 24px minimum. */
.has-surface-deep-background-color .wp-block-column a:not(.wp-element-button) {
  display: inline-block;
  padding: 6px 0;
}

/* --- Island tiles --- */

.logbook-islands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 0 0 var(--wp--preset--spacing--70);
}
.logbook-island {
  background: var(--wp--preset--color--sand);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 16px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
}
.logbook-island:hover { border-color: var(--wp--preset--color--border-strong); }
.logbook-island:hover .name { text-decoration: underline; }
.logbook-island .name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--display-card);
  line-height: 25px;
  color: var(--wp--preset--color--ink);
}
.logbook-island .count {
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--sand-ink);
  margin-top: 3px;
}
.logbook-island .count.is-empty { color: #3f5126; }

@media (prefers-color-scheme: dark) {
  .logbook-island .count.is-empty { color: #cdeab5; }
}

/* --- Newsletter --- */

.logbook-newsletter { margin-top: var(--wp--preset--spacing--40); }
.logbook-newsletter .row { display: flex; gap: 8px; flex-wrap: wrap; }
.logbook-newsletter input[type="email"] {
  flex: 1 1 180px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--wp--preset--color--border-strong);
  background: var(--wp--preset--color--surface-page);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body-small);
}
/* The browser default placeholder grey measures about 4.1:1 on cream,
   which fails. ink-muted is 5.2:1 and is the token for exactly this. */
.logbook-newsletter input[type="email"]::placeholder {
  color: var(--wp--preset--color--ink-muted);
  opacity: 1;
}
.logbook-newsletter button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--action);
  color: var(--wp--preset--color--on-action);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--button);
  font-weight: 500;
  cursor: pointer;
}
.logbook-newsletter button:hover { background: var(--wp--preset--color--action-hover); }
.logbook-newsletter .consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: var(--wp--preset--font-size--meta);
  color: var(--wp--preset--color--ink-inverse-muted);
}
.logbook-newsletter .consent input { margin-top: 3px; flex: none; }

/* --- Secondary button style --- */

.wp-block-button.is-style-logbook-secondary .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--border-strong);
}
.wp-block-button.is-style-logbook-secondary .wp-block-button__link:hover {
  background: var(--wp--preset--color--surface-sunk);
}

/* --- Reading measure on single posts --- */

.logbook-article p,
.logbook-article ul,
.logbook-article ol { max-width: 68ch; }