/*
 * Turgon brand look (Nov 2026), after the Turgon product book.
 * Loaded after turgon-ux.css. Changes the shared colours and fonts, so every
 * page picks it up without its own CSS changing.
 *
 *   Fonts   Barlow (text and labels) and Barlow Condensed Light (headings),
 *           self-hosted in /assets/fonts/barlow (SIL Open Font Licence).
 *   Colours deep charcoal-green, pale paper grey and a softer copper accent,
 *           sampled from the product book.
 *
 * To go back to the previous look, remove this file's <link> from layouts/app.blade.php.
 */

/* ---------- Fonts ---------- */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url('/assets/fonts/barlow/barlow-condensed-latin-200-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/barlow/barlow-condensed-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow/barlow-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow/barlow-condensed-latin-500-normal.woff2') format('woff2'); }

/* The older pages name their fonts directly ('HeroicCondensedLight', 'Montserrat',
   'Roboto Slab'). These aliases point those names at Barlow, so the older pages
   match without editing each one. */
@font-face { font-family: 'HeroicCondensedLight'; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/barlow/barlow-condensed-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 100 450; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 451 900; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/barlow/barlow-latin-400-normal.woff2') format('woff2'); }

/* ---------- Shared colours and fonts ---------- */

:root {
  --tg-charcoal: #282D27;   /* header, footer */
  --tg-deep: #212620;       /* product book cover */
  --tg-deep-2: #2A2F28;
  --tg-ink: #23271F;
  --tg-ink-2: #3A3F37;
  --tg-muted: #5D6259;
  --tg-on-dark-muted: #C3C8BF;
  --tg-orange: #D98A4E;     /* copper accent: dark text on it passes WCAG AA */
  --tg-orange-hover: #C8743A;
  --tg-orange-ink: #1F2320;
  --tg-orange-light: #E0965C;
  --tg-link: #9A5424;
  --tg-link-hover: #74401C;
  --tg-sage: #5C6659;
  --tg-stone: #EFF1EF;      /* product book paper */
  --tg-line: #DFE2DE;
  --tg-line-2: #D3D7D1;
  --tg-input: #868B83;
  --tg-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --tg-ui: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --tg-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body { font-family: var(--tg-body); color: var(--tg-ink); }
/* styles.css forces paragraphs to the system font; use Barlow instead. Classed
   paragraphs with their own !important font (e.g. p.tg-label) still win. */
body p, body small, body li { font-family: var(--tg-body) !important; }
body p, body li { line-height: 1.65; }

/* ---------- Headings: thin, wide-spaced capitals ---------- */

.tg-h2, .tg-banner h1, p.tg-hero__title, .tg-product h1, .tg-pagehead h1, .tg-ahero h1, .tg-post__title,
.tg-hello h2, .tg-why__title, .tg-modal__head h2, .tg-howto h2, .tg-info__title, .tg-guide__name,
.tg-album-card__title, .tg-gcta__title, .tg-post-cta__title, .tg-post-card__title, .tg-mini-album__name,
.tg-story__aside h2, .tg-post__body h2, .tg-post__body h3, .tg-range--cta .tg-range__cta-title,
p.tg-pswp__title, .tg-cl-title, .tg-cl-group__title, .tg-cl-dialog__name, .font-heroic {
  font-weight: 300;
  letter-spacing: 0.08em;
}
/* The biggest headings use ExtraLight, closest to the book's hairline titles. */
p.tg-hero__title { letter-spacing: 0.08em !important; font-weight: 200 !important; }
.tg-h2, .tg-banner h1, .tg-product h1, .tg-pagehead h1, .tg-ahero h1, .tg-post__title, .tg-hello h2,
.tg-why__title, .tg-cl-title, .tg-cl-group__title, .tg-cl-dialog__name, .tg-gcta__title, .tg-post-cta__title,
.tg-modal__head h2 { font-weight: 200; }
.tg-h2 { letter-spacing: 0.1em; }
.tg-banner h1 { letter-spacing: 0.1em; background: rgba(33, 38, 32, 0.86); }
p.tg-kicker, .tg-why__kicker { font-weight: 300; letter-spacing: 0.06em; }
/* Phone numbers and other display-font text that isn't a heading stay a touch heavier. */
.tg-footer__phone, .tg-callout a { font-weight: 400; letter-spacing: 0.06em; }

/* Small labels: spaced capitals like "COLOURS | LIGHTS" in the book. */
p.tg-label, .tg-label, .tg-product__cat, .tg-footer h2, .tg-guide__range, .tg-post-card__date,
.tg-album-card__count, .tg-mini-album__count, p.tg-hero__eyebrow {
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* ---------- Buttons: calmer, squarer, spaced capitals ---------- */

.tg-btn { font-weight: 600; letter-spacing: 0.14em; }
.tg-btn--primary { background: var(--tg-orange); color: var(--tg-orange-ink); }
.tg-btn--primary:hover, .tg-btn--primary:focus { background: var(--tg-orange-hover); color: var(--tg-orange-ink); }
.tg-nav .tg-btn--primary { box-shadow: none; }

/* ---------- Header and footer ---------- */

.tg-header { background: var(--tg-deep); }
.tg-nav .nav-link { font-weight: 500; letter-spacing: 0.14em; }
/* styles.css sets every <footer> to grey with !important. */
footer.tg-footer { background: var(--tg-deep) !important; }
.tg-footer__bottom { border-top-color: rgba(255, 255, 255, 0.1); }

/* ---------- Homepage dark sections: green-charcoal instead of slate blue ---------- */

.tg-hello { background: #2E342D; }

/* ---------- Older pages (styles.css): same palette ---------- */

.bg-dark.light-content { background-color: #2E342D !important; }   /* contact page panel */
.bg-turgon-new, .wb-rounded { background: #2E342D !important; }
.o-col:hover h3, .blog-item:hover h2.blog-title { color: var(--tg-link) !important; }

/* ---------- Light sections use the book's paper grey ---------- */

.tg-info, .tg-crumbs, .tg-callout, .tg-related, .tg-sample-box { background: var(--tg-stone); }
.tg-card__media, .tg-jg__item, .tg-gallery__btn { background: #E5E8E4; }

/* Focus rings follow the new accent. */
.tg-main a:focus-visible, .tg-header a:focus-visible, .tg-footer a:focus-visible,
.tg-main button:focus-visible, .tg-header button:focus-visible, .tg-modal a:focus-visible,
.tg-modal button:focus-visible, .tg-sample-bar button:focus-visible, .tg-toast button:focus-visible {
  outline-color: var(--tg-orange);
}

/* ---------- Products menu: Colour library as the first, featured item ---------- */

.tg-nav .dropdown-item.tg-nav__colours {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: 600;
  color: #9A5426;   /* darker copper: readable on white (5.6:1) */
  box-shadow: inset 3px 0 0 var(--tg-orange);
}
.tg-nav .dropdown-item.tg-nav__colours:hover,
.tg-nav .dropdown-item.tg-nav__colours:focus { color: var(--tg-ink); }
.tg-nav__colours-text { display: flex; flex-direction: column; line-height: 1.2; }
.tg-nav .tg-nav__colours-sub {
  margin-top: 3px;
  font-family: var(--tg-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #6B716B;
}
/* Four swatch book tones: light, honey, chestnut, dark. */
.tg-nav__chips { display: inline-flex; flex: none; }
.tg-nav__chips i {
  width: 14px;
  height: 22px;
  margin-left: -3px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px #FFFFFF;
}
.tg-nav__chips i:first-child { margin-left: 0; background: #E3D6C1; }
.tg-nav__chips i:nth-child(2) { background: #C4935C; }
.tg-nav__chips i:nth-child(3) { background: #8A5A36; }
.tg-nav__chips i:nth-child(4) { background: #3B2F28; }
.tg-nav__divider { height: 1px; margin: 6px 20px; background: var(--tg-line); }

@media (max-width: 991.98px) {
  .tg-nav .dropdown-item.tg-nav__colours { padding-left: 36px; color: var(--tg-orange-light); }
  .tg-nav .dropdown-item.tg-nav__colours:hover,
  .tg-nav .dropdown-item.tg-nav__colours:focus { color: #FFFFFF; }
  .tg-nav .tg-nav__colours-sub { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
  .tg-nav__chips i { box-shadow: 0 0 0 1.5px #363A3A; }
  .tg-nav__divider { margin: 4px 20px 4px 36px; background: rgba(255, 255, 255, 0.12); }
}

/* ---------- Colour page: chosen floor (?floor=planks|herringbone|chevron) ---------- */

.tg-pd__title .tg-pd__floor {
  display: block;
  margin-top: 6px;
  font-size: 0.42em;
  letter-spacing: 0.14em;
  color: #9A5426;
}
.tg-pd__choose-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.tg-pd__choose-head .tg-eyebrow { margin-bottom: 0; }
.tg-pd__choose-head + .tg-pd__formats3 { margin-top: 12px; }
.tg-pd__formats3 a.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 3px solid var(--tg-orange);
  pointer-events: none;
}
.tg-pd__formats3 a.is-active img { opacity: .95; }

/* ---------- Nav dropdowns: no gap between the menu name and its list ---------- */
/* An invisible strip above each list keeps the mouse "inside" while moving down to it. */
@media (min-width: 992px) {
  .tg-nav .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 24px;
  }
}