/*
Theme Name: Rukhposh
Theme URI: https://example.com/rukhposh
Author: Rukhposh
Author URI: https://example.com
Description: A travelogue blog theme for Kashmir travel writing — destinations, hidden places, itineraries, adventure, food and heritage stories. No booking or hotel features.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rukhposh
*/

:root{
  --white:#FFFFFF;
  --pine:#1E3A2E;
  --pine-dark:#14281E;
  --accent:#FF385C;       /* Airbnb-style pink — replaces the old brown/rust accent */
  --accent-dark:#E31C5F;  /* hover / pressed state for the pink accent */
  --gold:#D8A13B;
  --walnut:#4B3527;
  --ink:#2A241C;
  --line:#EBEBEB;
  --muted:#6A6A6A;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Work Sans', -apple-system, sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  margin:0;
  color:var(--pine-dark);
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}

/* ---------- Header ---------- */
.site-header{
  background:var(--white);
}

/* Only the top bar (logo + nav + menu) stays fixed while scrolling.
   The search bar below it scrolls away with the page. */
.topbar{
  position:sticky;top:0;z-index:60;
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:16px 40px;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-size:22px;letter-spacing:0.5px;color:var(--accent);
  font-family:'Fraunces', serif;font-weight:600;
  flex-shrink:0;
}
.logo svg{width:24px;height:24px;}
nav.tabs{display:flex;gap:36px;flex-wrap:wrap;}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-bottom:4px;border-bottom:2px solid transparent;
  color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;
}
.tab .ico{font-size:20px;line-height:1;}
.tab.active,.tab:hover{color:var(--pine-dark);border-color:var(--pine-dark);}
.right-links{position:relative;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500;flex-shrink:0;}
.right-links a{white-space:nowrap;}
.icon-pill{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.menu-toggle{background:none;border:1px solid var(--line);cursor:pointer;padding:0;}
.menu-toggle:hover{border-color:var(--ink);}

/* ---------- Top-right menu panel ---------- */
.menu-panel{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  max-width:calc(100vw - 40px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,0.14);
  padding:8px;
  z-index:70;
}
.menu-panel.open{display:block;}
.menu-panel-list li a{
  display:block;
  padding:11px 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
}
.menu-panel-list li a:hover{background:var(--line);}

/* ---------- Search bar ---------- */
.searchwrap{display:flex;justify-content:center;padding:20px 40px 24px;background:var(--white);}
.searchbar{
  display:flex;align-items:stretch;
  border:1px solid var(--line);border-radius:40px;
  box-shadow:0 1px 8px rgba(0,0,0,0.08);
  background:var(--white);overflow:hidden;
  max-width:100%;
}
.field{padding:10px 28px;min-width:170px;cursor:pointer;}
.field + .field{border-left:1px solid var(--line);}
.field .label{font-size:12px;font-weight:600;color:var(--pine-dark);}
.field select,.field input{
  border:none;outline:none;font-size:13px;color:var(--muted);
  font-family:inherit;background:transparent;padding:2px 0 0;width:100%;
}
.search-btn{
  margin:8px 8px 8px 0;background:var(--accent);color:#fff;border:none;
  border-radius:50%;width:44px;height:44px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s ease;
}
.search-btn:hover{background:var(--accent-dark);}

/* ---------- Sections ---------- */
section.row{max-width:1400px;margin:0 auto;padding:30px 40px 6px;}
.row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.row-title{display:flex;align-items:center;gap:10px;}
.row-title h2{font-size:22px;}
.row-title a.see-all{width:16px;height:16px;color:var(--ink);}
.scroller-nav{display:flex;gap:8px;}
.scroller-nav button{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.scroller-nav button:hover{border-color:var(--ink);}
.scroller{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;scroll-behavior:smooth;
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.scroller::-webkit-scrollbar{display:none;}

/* ---------- Cards (Airbnb-style: smaller, edge-to-edge photo, only the image is rounded) ---------- */
.card{flex:0 0 auto;width:176px;cursor:pointer;scroll-snap-align:start;display:block;}
.thumb{
  position:relative;width:176px;height:176px;border-radius:12px;overflow:hidden;background:var(--line);
}
.thumb img{transition:transform .35s ease;border-radius:0;}
.card:hover .thumb img{transform:scale(1.04);}
.badge{
  position:absolute;top:10px;left:10px;background:var(--white);
  padding:5px 10px;border-radius:20px;font-size:11px;font-weight:600;color:var(--pine-dark);z-index:2;
}
.save{position:absolute;top:10px;right:10px;width:20px;height:20px;z-index:2;}
.save svg{width:20px;height:20px;stroke:#fff;fill:rgba(20,40,30,0.35);}
.card .name{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink);}
.card .meta{font-size:12.5px;color:var(--muted);margin-top:2px;}
.card .meta.accent{color:var(--accent);}
.empty-note{color:var(--muted);font-size:14px;padding:10px 0;}

.see-all-thumb{background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.see-all-thumb .stack{position:relative;width:96px;height:70px;}
.see-all-thumb img{position:absolute;width:66px;height:66px;border-radius:10px;object-fit:cover;box-shadow:0 2px 10px rgba(0,0,0,0.12);}
.see-all-thumb .s1{left:0;top:4px;transform:rotate(-8deg);}
.see-all-thumb .s2{left:28px;top:0;transform:rotate(6deg);}
.see-all-card .name{color:var(--pine-dark);text-align:center;}

/* ---------- Single / Archive ---------- */
.page-hero{max-width:1000px;margin:0 auto;padding:44px 40px 20px;}
.page-hero h1{font-size:34px;}
.page-hero .sub{color:var(--muted);margin-top:8px;font-size:14px;}
.single-content{max-width:800px;margin:0 auto;padding:30px 40px 60px;line-height:1.8;font-size:17px;}
.single-content img{border-radius:16px;margin:20px 0;height:auto;}
.archive-grid{max-width:1400px;margin:0 auto;padding:20px 40px 60px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:20px;}

footer.site-footer{margin-top:50px;border-top:1px solid var(--line);background:var(--white);}
.footwrap{max-width:1400px;margin:0 auto;padding:30px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.footwrap .logo{font-size:20px;}
.footlinks{display:flex;gap:24px;font-size:13px;color:var(--muted);flex-wrap:wrap;}
.footlinks a:hover{color:var(--accent);}

/* =====================================================================
   Responsive breakpoints — theme is designed mobile-first from here down
   ===================================================================== */

/* Tablets */
@media(max-width:1024px){
  .topbar,section.row,.footwrap,.page-hero,.single-content,.archive-grid,.searchwrap{
    padding-left:24px;padding-right:24px;
  }
  nav.tabs{gap:22px;}
}

/* Small tablets / large phones: nav tabs collapse into the menu button */
@media(max-width:900px){
  nav.tabs{display:none;}
  .searchbar{flex-wrap:wrap;border-radius:20px;width:100%;}
  .field{flex:1 1 45%;min-width:140px;}
}

/* Phones */
@media(max-width:600px){
  .topbar{padding:12px 16px;gap:10px;}
  .logo{font-size:19px;}
  .logo svg{width:20px;height:20px;}
  .right-links{gap:8px;}
  .right-links a{font-size:13px;}
  .icon-pill{width:34px;height:34px;}

  .searchwrap{padding:14px 16px 18px;}
  .searchbar{flex-direction:column;border-radius:16px;}
  .field{width:100%;padding:10px 16px;}
  .field + .field{border-left:none;border-top:1px solid var(--line);}
  .search-btn{width:100%;height:44px;border-radius:12px;margin:8px 8px 8px 8px;width:calc(100% - 16px);}

  section.row,.footwrap,.page-hero,.single-content,.archive-grid{padding-left:16px;padding-right:16px;}
  section.row{padding-top:22px;}
  .row-title h2{font-size:19px;}

  .card{width:148px;}
  .thumb{width:148px;height:148px;border-radius:10px;}
  .card .name{font-size:13px;}
  .card .meta{font-size:12px;}

  .archive-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;}

  .page-hero{padding-top:32px;}
  .page-hero h1{font-size:26px;}
  .single-content{font-size:16px;padding-top:20px;}

  .menu-panel{right:16px;left:16px;min-width:0;max-width:none;}

  .footwrap{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 16px;}
  .footlinks{gap:16px;}
}

/* Very small phones */
@media(max-width:380px){
  .card{width:128px;}
  .thumb{width:128px;height:128px;}
  .archive-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));}
  .right-links a{display:none;} /* keep only the icons so the header never overflows on tiny screens */
}