/*
Theme Name: Discovering Turkey — The Manifest
Theme URI: https://discoveringturkey.com
Author: Discovering Turkey
Description: Custom theme for Discovering Turkey — a ferry-ticket/customs-ledger inspired travel guide design. Built with Tailwind CSS (CDN) for utility classes plus this stylesheet for custom components (stamps, ticket stubs, ledger rules) and typography defaults for post/page content.
Version: 1.0
Text Domain: discovering-turkey
*/

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }
body { background: #F7F5F0; }

/* ============================================================
   SIGNATURE COMPONENTS (shared across all templates)
   ============================================================ */

/* Rubber-stamp circle */
.stamp {
  border: 1.5px dashed rgba(185,138,61,0.6);
  color: #B98A3D;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-9deg);
}

/* Ledger dotted rule (used between sections and FAQ/list items) */
.ledger-rule { border-bottom: 1.5px dotted rgba(22,33,58,0.2); }

/* Ticket-stub tear line with punched notch circles (used on card components) */
.stub-tear {
  position: relative;
  border-top: 1.5px dashed rgba(22,33,58,0.28);
}
.stub-tear::before, .stub-tear::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #F7F5F0;
}
.stub-tear::before { left: -18px; }
.stub-tear::after  { right: -18px; }

/* Text-on-image gradient overlay for editorial bleed cards */
.img-overlay {
  background: linear-gradient(180deg, rgba(22,33,58,0) 35%, rgba(22,33,58,0.9) 100%);
}

/* ============================================================
   HEADER / MOBILE NAV
   ============================================================ */
.htg-scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }
.htg-scroll-hide::-webkit-scrollbar { display: none; }

.htg-mobile-nav { display: none; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.htg-mobile-nav.is-open { display: block; max-height: 480px; }

.htg-menu-btn { background: transparent !important; border: none !important; padding: 8px !important; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.htg-menu-btn span { display: block; width: 22px; height: 2px; background: #16213A; transition: transform .3s ease, opacity .3s ease; transform-origin: center; }
.htg-menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.htg-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.htg-menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#htgHeader.is-scrolled { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08); }

/* Configurable logo width (set via Customize → Theme Options) */
.htg-logo-mark { flex-shrink: 0; }
.htg-logo-mark img { width: 100%; height: auto; display: block; }

/* ============================================================
   ENTRY CONTENT — styles normal WordPress editor output
   (paragraphs, headings, links, images, blockquotes, lists,
   tables) written in the block/classic editor by hand, so
   content doesn't need Tailwind classes typed manually.
   ============================================================ */
.entry-content { color: rgba(22,33,58,0.8); font-size: 1.0625rem; line-height: 1.85; }
.entry-content > * + * { margin-top: 1.5rem; }
.entry-content h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  color: #16213A;
  border-left: 4px solid #E30A17;
  padding-left: 1.25rem;
  margin-top: 3rem;
}
.entry-content h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #16213A;
  margin-top: 2rem;
}
.entry-content a { color: #1F6F6B; text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: #164F4C; }
.entry-content blockquote {
  border-left: 4px solid #E30A17;
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(22,33,58,0.7);
  margin: 2.5rem 0;
}
.entry-content img { width: 100%; border-radius: 2px; margin: 2.5rem 0; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; }
.entry-content li { margin-top: 0.5rem; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; border: 1px solid rgba(22,33,58,0.15); }
.entry-content table th { background: #16213A; color: #F7F5F0; text-align: left; padding: 0.75rem 1.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.entry-content table td { padding: 1rem 1.25rem; border-bottom: 1.5px dotted rgba(22,33,58,0.2); }
.entry-content table tr:last-child td { border-bottom: none; }

/* ============================================================
   CALLOUT COMPONENTS — for use inside Custom HTML blocks
   within post content. See /snippets for copy-paste markup.
   ============================================================ */
.htg-fact-box { background: #F9FAFB; border: 1px solid rgba(22,33,58,0.1); padding: 1.25rem; display: flex; gap: 1rem; }
.htg-tip-box { position: relative; background: rgba(227,10,23,0.05); border-left: 4px solid #E30A17; padding: 1.25rem; }
.htg-affiliate-card { background: #16213A; padding: 1.25rem; }
.htg-divider { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0; }
.htg-divider .line { flex: 1; height: 1px; background: rgba(22,33,58,0.1); }