/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Karla:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --mj-ivory: #F4ECDC;
  --mj-cream: #FBF6EC;
  --mj-ink: #1A1612;
  --mj-ink-soft: #3D352B;
  --mj-clay: #C75B3B;
  --mj-clay-deep: #9C3F25;
  --mj-moss: #475940;
  --mj-gold: #C99A4A;
  --mj-line: rgba(26,22,18,0.12);
}

body { background: var(--mj-cream); }

/* Italic clay accent inside any heading */
.elementor-heading-title em { font-style: italic; color: var(--mj-clay); font-weight: 300; }

/* Pullquote helper class */
.mj-pullquote { padding: 24px 28px; background: var(--mj-cream); border-left: 3px solid var(--mj-clay); font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; line-height: 1.5; margin-top: 28px; }

/* Marquee */
.mj-marquee { overflow: hidden; padding: 24px 0; background: var(--mj-ivory); border-top: 1px solid var(--mj-line); border-bottom: 1px solid var(--mj-line); }
.mj-marquee-track { display: flex; gap: 64px; white-space: nowrap; animation: mj-scroll 40s linear infinite; }
.mj-marquee-item { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mj-ink-soft); font-family: 'Karla', sans-serif; }
.mj-marquee-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--mj-clay); }
@keyframes mj-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Distance list rows */
.mj-distance-row { padding: 22px 28px !important; border-bottom: 1px solid var(--mj-line); transition: background 0.2s; }
.mj-distance-row:last-child { border-bottom: none; }
.mj-distance-row:hover { background: rgba(199,91,59,0.04); }
.mj-distance-num .elementor-heading-title { font-family: 'JetBrains Mono', monospace !important; font-size: 14px !important; color: var(--mj-clay) !important; padding: 6px 12px; background: rgba(199,91,59,0.1); border-radius: 999px; display: inline-block; }

/* Asymmetric loft gallery */
.mj-gallery-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.mj-gallery-grid > .e-con { overflow: hidden; border-radius: 4px; padding: 0 !important; }
.mj-gallery-grid > .e-con .elementor-widget-image,
.mj-gallery-grid > .e-con .elementor-widget-image > div,
.mj-gallery-grid > .e-con img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mj-gallery-grid > .e-con:hover img { transform: scale(1.05); }
.mj-g-1 { grid-column: span 2; grid-row: span 2; }
.mj-g-2 { grid-column: span 2; }
.mj-g-3, .mj-g-4 { grid-column: span 1; }
.mj-g-5 { grid-column: span 2; }
@media (max-width: 960px) {
  .mj-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .mj-g-1, .mj-g-5 { grid-column: span 2; grid-row: span 1; }
}

/* Host frame */
.mj-host-frame { position: relative; padding: 28px; }
.mj-host-frame::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--mj-line); border-radius: 4px; background: var(--mj-ivory); z-index: 0; }
.mj-host-frame > * { position: relative; z-index: 1; }
.mj-host-tag { position: absolute !important; bottom: 40px; right: 40px; background: var(--mj-clay); color: var(--mj-cream); padding: 8px 14px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; z-index: 10; }

/* Hero image stack */
.mj-hero-stack { position: relative; height: 620px; }
.mj-hero-stack img { position: absolute; border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(26,22,18,0.25); object-fit: cover; }
.mj-hero-1 { top: 0; right: 0; width: 78%; height: 70%; z-index: 2; }
.mj-hero-2 { bottom: 0; left: 0; width: 60%; height: 45%; z-index: 3; border: 8px solid var(--mj-cream); }
.mj-hero-badge { position: absolute; top: 40%; right: -10px; background: var(--mj-clay); color: var(--mj-cream); width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; text-align: center; z-index: 4; transform: rotate(-8deg); font-family: 'Fraunces', serif; font-style: italic; font-size: 13px; line-height: 1.2; box-shadow: 0 10px 30px -8px rgba(199,91,59,0.5); }
.mj-hero-badge strong { font-size: 22px; font-style: normal; display: block; font-weight: 600; }
@media (max-width: 960px) { .mj-hero-stack { height: 460px; } }

/* Room and bike cards */
.mj-card { background: var(--mj-cream); border: 1px solid var(--mj-line); border-radius: 4px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; }
.mj-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(26,22,18,0.18); }
.mj-card-tag { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--mj-clay) !important; }
.mj-price-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--mj-line); font-family: 'Karla', sans-serif; }
.mj-price-row:last-of-type { border-bottom: none; }
.mj-price-row strong { font-family: 'Fraunces', serif; color: var(--mj-clay); }

/* Blog cards */
.mj-blog-card { background: var(--mj-cream); border: 1px solid var(--mj-line); border-radius: 4px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; height: 100%; display: flex; flex-direction: column; }
.mj-blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(26,22,18,0.18); }
.mj-blog-img { display: block; overflow: hidden; aspect-ratio: 16/9; }
.mj-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.mj-blog-img:hover img { transform: scale(1.04); }
.mj-blog-tag { position: absolute; top: 14px; left: 14px; background: var(--mj-clay); color: var(--mj-cream); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.mj-blog-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.mj-blog-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(26,22,18,0.45); letter-spacing: 0.5px; }
.mj-blog-body h3 { font-family: 'Fraunces', serif; font-size: 18px; line-height: 1.3; margin: 10px 0 10px; color: var(--mj-ink); }
.mj-blog-body p { font-family: 'Karla', sans-serif; font-size: 14px; line-height: 1.6; color: var(--mj-ink-soft); flex: 1; margin-bottom: 18px; }
.mj-blog-link { font-family: 'Karla', sans-serif; font-size: 14px; color: var(--mj-clay); text-decoration: none; font-weight: 600; }
.mj-blog-link:hover { text-decoration: underline; }

/* Tours — dark theme cards */
.mj-tour-card { background: #221C16; padding: 32px 28px; border: 1px solid rgba(244,236,220,0.08); border-radius: 4px; height: 100%; transition: background 0.3s; }
.mj-tour-card:hover { background: #2A2218; }
.mj-tour-duration { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--mj-gold) !important; }
.mj-tour-price { font-family: 'Fraunces', serif !important; color: var(--mj-gold) !important; font-size: 22px !important; }
#tours .elementor-heading-title em { color: var(--mj-gold); }

/* Nav and footer styles (already in HTML widgets, kept for consistency) */
.mj-nav { position: sticky; top: 0; z-index: 100; background: rgba(251,246,236,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(26,22,18,0.12); padding: 18px 32px; }
.mj-nav-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mj-logo { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: #1A1612; text-decoration: none; letter-spacing: -0.02em; }
.mj-logo-mark { width: 28px; height: 28px; border-radius: 50%; background: #C75B3B; color: #FBF6EC; display: grid; place-items: center; font-style: italic; font-weight: 700; font-size: 14px; }
.mj-nav-links { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.mj-nav-links a { font-family: 'Karla', sans-serif; font-size: 14px; font-weight: 500; color: #1A1612; text-decoration: none; transition: color 0.2s; }
.mj-nav-links a:hover { color: #C75B3B; }
.mj-nav-cta { padding: 13px 22px; background: #1A1612; color: #FBF6EC; border-radius: 999px; font-family: 'Karla', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s; }
.mj-nav-cta:hover { background: #C75B3B; }
@media (max-width: 960px) { .mj-nav-links { display: none; } }