/*
Theme Name: Voyage Journal
Theme URI: https://cruisesmaster.com
Description: Custom affiliate theme for cruise travel blog — Cormorant Garamond + Manrope, deep teal palette, pill buttons, sticky journal sidebar.
Version: 1.0
Author: Cruisesmaster
Text Domain: voyage-journal
*/

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*{box-sizing:border-box;}
body{
  margin:0;
  background:#ffffff;
  font-family:'Manrope',system-ui,sans-serif;
  color:#1a1c1f;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}
::selection{background:#cfe1e7;}
img{max-width:100%; display:block;}
a{color:inherit;}

@keyframes floatIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

:root{
  --accent: #14485c;
  --accent-dark: #0d3344;
  --ink: #1a1c1f;
  --ink-soft: #4c4f54;
  --ink-muted: #6a6d72;
  --line: #e8e6e0;
  --bg-soft: #fbfaf8;
  --navy: #0f3543;
  --gold: #f0c987;
}

/* ══════════════════════════════════════════
   HOVER UTILITIES (replaces inline style-hover from prototype)
══════════════════════════════════════════ */
.vj-btn-primary{display:inline-flex; align-items:center; gap:9px; padding:16px 32px; background:var(--accent); color:#fff; text-decoration:none; border-radius:999px; font-size:15px; font-weight:600; transition:transform .2s, background .2s;}
.vj-btn-primary:hover{background:var(--accent-dark); transform:translateY(-1px);}

.vj-btn-outline{display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border:1px solid var(--accent); color:var(--accent); text-decoration:none; border-radius:999px; font-size:15px; font-weight:600; transition:background .2s, color .2s;}
.vj-btn-outline:hover{background:var(--accent); color:#fff;}

.vj-btn-ghost{display:inline-flex; align-items:center; gap:8px; padding:16px 24px; color:var(--ink); text-decoration:none; border-radius:999px; font-size:15px; font-weight:600;}
.vj-btn-ghost:hover{color:var(--accent);}

.vj-btn-light{display:inline-flex; align-items:center; padding:14px 26px; background:#fff; color:var(--navy); text-decoration:none; border-radius:999px; font-size:15px; font-weight:700; white-space:nowrap; transition:transform .2s;}
.vj-btn-light:hover{transform:translateY(-1px);}

.vj-btn-line{display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border:1px solid #d8d6cf; color:var(--ink); text-decoration:none; border-radius:999px; font-size:15px; font-weight:600; transition:all .2s;}
.vj-btn-line:hover{border-color:var(--accent); color:var(--accent);}

.vj-btn-card{display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border:1px solid var(--accent); color:var(--accent); text-decoration:none; border-radius:999px; font-size:13px; font-weight:600; transition:background .2s, color .2s;}
.vj-btn-card:hover{background:var(--accent); color:#fff;}

.vj-link-accent{color:var(--accent); text-decoration:none; font-size:14px; font-weight:600; cursor:pointer;}
.vj-link-accent:hover{opacity:.7;}

.vj-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s, transform .25s;}
.vj-card:hover{box-shadow:0 18px 40px -24px rgba(20,72,92,.4); transform:translateY(-3px);}

.vj-card-lg{border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .25s, transform .25s;}
.vj-card-lg:hover{box-shadow:0 22px 48px -26px rgba(20,72,92,.45); transform:translateY(-3px);}

.vj-nav-link{text-decoration:none; font-size:14px; font-weight:500; color:#52555a;}
.vj-nav-link:hover, .vj-nav-link.is-active{color:var(--accent);}

.vj-tag{padding:9px 18px; border:1px solid #e3e1dc; border-radius:999px; font-size:13.5px; font-weight:600; color:#52555a; text-decoration:none; transition:all .18s;}
.vj-tag:hover{border-color:var(--accent); color:var(--accent);}

.vj-tag-solid{padding:7px 14px; background:#f6f5f1; border-radius:999px; font-size:13px; font-weight:500; color:#52555a; text-decoration:none; transition:all .18s;}
.vj-tag-solid:hover{background:var(--accent); color:#fff;}

.vj-row-link{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-top:1px solid #f0eee9; text-decoration:none;}
.vj-row-link:hover{opacity:.65;}

.vj-pop-link{display:flex; gap:14px; align-items:baseline; padding:13px 0; border-top:1px solid #f0eee9; text-decoration:none;}
.vj-pop-link:hover{opacity:.7;}

.vj-title-link{color:inherit; text-decoration:none;}
.vj-title-link:hover{color:var(--accent);}

.vj-input{flex:1; min-width:0; padding:14px 18px; border:1px solid #d8d6cf; border-radius:999px; font-family:'Manrope',sans-serif; font-size:15px; outline:none;}
.vj-input:focus{border-color:var(--accent);}

.vj-input-dark{flex:1; min-width:0; padding:14px 18px; background:rgba(255,255,255,.06); border:1px solid #2c5360; border-radius:999px; color:#fff; font-family:'Manrope',sans-serif; font-size:15px; outline:none;}

.vj-sticky-cta{position:fixed; right:24px; bottom:24px; z-index:80; display:inline-flex; align-items:center; gap:11px; padding:14px 22px 14px 16px; background:var(--accent); color:#fff; text-decoration:none; border-radius:999px; box-shadow:0 14px 30px -10px rgba(15,53,67,.6); animation:floatIn .4s ease both; transition:transform .2s, background .2s;}
.vj-sticky-cta:hover{background:var(--accent-dark); transform:translateY(-2px);}

.vj-placeholder{background:repeating-linear-gradient(135deg,#f3f2ef,#f3f2ef 13px,#ecebe6 13px,#ecebe6 26px); color:#a7a49d; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; text-align:center;}
.vj-placeholder img{width:100%; height:100%; object-fit:cover;}

.vj-ad-tag{font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:#b6b3aa;}

/* ══════════════════════════════════════════
   LAYOUT HELPERS
══════════════════════════════════════════ */
.vj-wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
.vj-wrap-narrow{max-width:720px; margin:0 auto; padding:0 28px;}
.vj-eyebrow{font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:600;}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 980px){
  .vj-grid-3{grid-template-columns:repeat(2,1fr) !important;}
  .vj-grid-2{grid-template-columns:1fr !important;}
  .vj-journal-layout{grid-template-columns:1fr !important;}
  .vj-journal-layout aside{position:static !important;}
  .vj-article-layout{grid-template-columns:1fr !important;}
  .vj-article-layout aside{position:static !important;}
  .vj-deal-row{grid-template-columns:1fr !important;}
  .vj-deal-row > div:last-child{align-items:flex-start !important; border-left:none !important; border-top:1px solid #efeee9;}
}
@media (max-width: 680px){
  .vj-grid-3, .vj-grid-4{grid-template-columns:1fr !important;}
  h1{font-size:38px !important;}
  .vj-hero-h1{font-size:44px !important;}
  .vj-footer-grid{grid-template-columns:1fr 1fr !important;}
  .vj-feature-grid{grid-template-columns:1fr !important;}
  .vj-banner-grid{grid-template-columns:1fr !important;}
}