/*
Theme Name: Tied Out Books — Extendable Child
Description: Site-wide nautical design system and Gutenberg templates for Tied Out Books.
Author: Tied Out Books
Template: extendable
Version: 1.1.0
Text Domain: tied-out-extendable
*/

:root {
  --tob-cream: #f5efe1;
  --tob-cream-2: #efe7d3;
  --tob-cream-3: #e8ddc4;
  --tob-navy: #22333d;
  --tob-teal: #3e6b61;
  --tob-teal-dark: #2c5049;
  --tob-orange: #c9702b;
  --tob-orange-dark: #b25a1c;
  --tob-gold: #c8934a;
  --tob-gold-dark: #a87a34;
  --tob-ink-soft: #4b5b60;
  --tob-content: 760px;
  --tob-wide: 1140px;
  --tob-gutter: clamp(20px, 4vw, 34px);
  --tob-section: clamp(64px, 8vw, 88px);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body,
.editor-styles-wrapper {
  font-family: "Cormorant Garamond", Georgia, serif !important;
}
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
  font-family: "Playfair Display", Georgia, serif !important;
}
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
a { text-underline-offset: .16em; }

.tob-caps,
.tob-kicker,
.tob-topbar,
.tob-site-header .wp-block-navigation,
.tob-site-footer h3 {
  font-family: var(--wp--preset--font-family--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tob-script { font-family: var(--wp--preset--font-family--script); font-weight: 400; }
.tob-section { padding: var(--tob-section) var(--tob-gutter); }
.tob-section-head { max-width: 680px; margin-inline: auto; text-align: center; }
.tob-section-head .tob-kicker { color: var(--tob-orange); font-size: .72rem; }
.tob-section-head h2 { margin-top: 10px; }

.tob-rope {
  height: 14px;
  background: repeating-linear-gradient(115deg,var(--tob-gold) 0 9px,var(--tob-gold-dark) 9px 12px,var(--tob-gold) 12px 20px);
  border-block: 2px solid var(--tob-gold-dark);
}
.tob-topbar { font-size: .68rem; }
.tob-topbar > .wp-block-group { min-height: 42px; padding-inline: var(--tob-gutter); }
.tob-site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--tob-cream-3); }
.admin-bar .tob-site-header { top: 32px; }
.tob-site-header > .wp-block-group { padding: 12px var(--tob-gutter); }
.tob-site-header .wp-block-site-logo img { max-height: 66px; width: auto; }
.tob-site-header .wp-block-navigation { font-size: .74rem; font-weight: 600; }
.tob-site-header .wp-block-navigation,
.tob-site-header .wp-block-button__link { font-family: "Josefin Sans", Arial, sans-serif !important; }
.tob-site-header .wp-block-navigation-item__content:hover { color: var(--tob-orange); }

.wp-block-button__link,
.wp-element-button {
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 var(--tob-navy);
  font-family: var(--wp--preset--font-family--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.wp-block-button,
.wp-block-button.is-style-outline,
.wp-block-button.is-style-fill { border-radius: 2px !important; }
.wp-block-button__link:hover,
.wp-element-button:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--tob-navy); }
.is-style-outline > .wp-block-button__link { box-shadow: none; }

.tob-hero { position: relative; padding: clamp(64px,9vw,100px) var(--tob-gutter) 150px; overflow: hidden; text-align: center; }
.tob-hero::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 105px;
  background: url("assets/engraved-waves.png") center bottom / cover no-repeat;
  content: "";
  opacity: .9;
  pointer-events: none;
}
.tob-hero h1 { max-width: 900px; margin-inline: auto; font-size: clamp(2.7rem,6vw,4.3rem); line-height: 1.02; }
.tob-hero .tob-script { display: block; color: var(--tob-orange); font-size: 1.3em; line-height: .95; }
.tob-hero .tob-lead { max-width: 46ch; margin-inline: auto; color: var(--tob-ink-soft); font-size: clamp(1.1rem,2vw,1.3rem); }
.tob-hero .wp-block-buttons { margin-top: 30px; }

.tob-trust { padding: 25px var(--tob-gutter); }
.tob-trust .wp-block-columns { max-width: var(--tob-wide); margin: 0 auto; }
.tob-trust strong { display: block; color: var(--tob-gold); font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; }
.tob-trust p { color: #cbd6d0; font-family: var(--wp--preset--font-family--sans); font-size: .66rem; letter-spacing: .12em; text-align: center; text-transform: uppercase; }

.tob-voyages { gap: 18px; margin-top: 46px; }
.tob-card { min-height: 100%; padding: 30px 20px 26px; border: 1.5px solid var(--tob-cream-3); border-radius: 5px; background: var(--tob-cream-2); text-align: center; transition: transform .18s,box-shadow .18s; }
.tob-card:hover { transform: translateY(-5px); box-shadow: 5px 9px 0 rgb(34 51 61 / 10%); }
.tob-card-featured { border: 2px solid var(--tob-orange); background: #fbf5e8; }
.tob-card .tob-number { color: var(--tob-gold-dark); font-family: var(--wp--preset--font-family--display); font-style: italic; }
.tob-card::before {
  display: block;
  margin-bottom: 8px;
  color: var(--tob-teal);
  font-family: Georgia, serif;
  font-size: 2.35rem;
  line-height: 1;
}
.tob-voyages > .wp-block-column:nth-child(1) .tob-card::before { content: "⚓"; }
.tob-voyages > .wp-block-column:nth-child(2) .tob-card::before { content: "⌁"; }
.tob-voyages > .wp-block-column:nth-child(3) .tob-card::before { content: "✦"; }
.tob-voyages > .wp-block-column:nth-child(4) .tob-card::before { content: "☷"; }
.tob-voyages > .wp-block-column:nth-child(5) .tob-card::before { content: "⌖"; }
.tob-card h3 { margin-top: 12px; font-size: 1.28rem; }
.tob-card p:last-child { color: var(--tob-ink-soft); font-size: .98rem; line-height: 1.45; }

.tob-makeover { position: relative; text-align: center; }
.tob-makeover .tob-section-head p { color: #eaf1ec; }
.tob-win { min-height: 100%; padding: 24px; border: 1.5px solid var(--tob-gold); border-radius: 8px; background: rgb(245 239 225 / 10%); }
.tob-win h3 { color: var(--tob-gold); }

.tob-about .wp-block-columns { gap: clamp(32px,6vw,60px); }
.tob-panel { padding: clamp(26px,4vw,38px); border: 2px solid var(--tob-cream-3); border-radius: 6px; }
.tob-checklist { list-style: "⚓  "; padding-left: 1.5rem; }
.tob-checklist li { padding: 8px 0; border-bottom: 1px dashed var(--tob-cream-3); }

.tob-crew-card { min-height: 100%; padding: 34px; border: 1.5px solid var(--tob-cream-3); border-radius: 6px; text-align: center; }
.tob-monogram { display: grid; width: 132px; height: 132px; margin: 0 auto 20px; place-items: center; border: 7px solid var(--tob-cream); border-radius: 50%; outline: 2px solid var(--tob-gold); background: var(--tob-navy); color: var(--tob-gold); font-family: var(--wp--preset--font-family--display); font-size: 2.4rem; }
.tob-role { color: var(--tob-orange); font-family: var(--wp--preset--font-family--script); font-size: 1.45rem; }

.tob-testimonials .wp-block-quote { height: 100%; margin: 0; padding: 30px; border: 1px solid rgb(200 147 74 / 50%); border-radius: 6px; }
.tob-testimonials cite { color: var(--tob-gold); }
.tob-cta { text-align: center; }
.tob-cta::before {
  display: block;
  width: min(100%, 1140px);
  height: 78px;
  margin: -40px auto 35px;
  background: url("assets/engraved-waves.png") center / cover no-repeat;
  content: "";
  filter: brightness(0) invert(1);
  opacity: .45;
}
.tob-cta p { max-width: 48ch; margin-inline: auto; }

.tob-site-footer { padding: 54px var(--tob-gutter) 28px; }
.tob-site-footer a { color: #c7d2cc; text-decoration: none; }
.tob-site-footer a:hover { color: var(--tob-gold); }
.tob-site-footer .wp-block-site-title { color: var(--tob-gold); font-family: var(--wp--preset--font-family--display); letter-spacing: .18em; text-transform: uppercase; }
.tob-footer-bottom { padding-top: 22px; border-top: 1px solid #3a4c54; color: #91a19b; font-family: var(--wp--preset--font-family--sans); font-size: .68rem; letter-spacing: .14em; text-align: center; text-transform: uppercase; }

.tob-default-main { padding: var(--tob-section) var(--tob-gutter); }

@media (max-width: 781px) {
  .admin-bar .tob-site-header { top: 46px; }
  .tob-topbar .tob-topbar-center { display: none; }
  .tob-site-header .wp-block-navigation__responsive-container { padding: 32px; background: var(--tob-cream); }
  .tob-voyages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tob-voyages > .wp-block-column { width: auto !important; }
}
@media (max-width: 520px) {
  .tob-voyages { grid-template-columns: 1fr; }
  .tob-topbar-right { display: none; }
}