/* ===============================
   Terracotta Luxury — COMPLETE CSS
   Palette: Serene / Himalaya / Clay
   Typography + Fixed Dropdown
   =============================== */

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Times New Roman", "Times", serif;
  font-stretch: condensed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ffffff; /* keep a crisp white page background */
  color: #333;
  line-height: 1.6;
}

/* -------------------------------
   Color System (from your images)
----------------------------------*/
:root{
  --clay: #b66a5f;         /* primary accent (Clay) */
  --clay-600: #000000;     /* darker clay for hovers/headers */
  --himalaya: #eee5dd;     /* soft beige (borders, sections) */
  --serene: #f0f2ec;       /* gentle green-grey (subtle fills) */

  --surface: #ffffff;      /* cards/nav */
  --text: #000000;

  --radius-lg: 20px;       /* soft edges site-wide */
  --radius-md: 15px;
  --radius-pill: 30px;

  --shadow-sm: 0 2px 5px rgba(0,0,0,.08);
  --shadow-md: 0 4px 15px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 25px rgba(0,0,0,.12);

  --dropdown-max: 520px;   /* enough height for menus */
}

/* --------------------------------
   Luxury Type Scale (editorial)
-----------------------------------*/
:root{
  --fs-xxl: clamp(2.4rem, 4vw + 1rem, 3.4rem);  /* H1 */
  --fs-xl:  clamp(1.9rem, 1.25rem + .8rem, 2.6rem);/* H2 */
  --fs-lg:  clamp(1.4rem, 1.2vw + .8rem, 1.8rem);/* H3 */
  --fs-md:  1.125rem;                            /* body lg / lead */
  --fs-sm:  .95rem;                              /* body */
  --fs-xs:  .85rem;                              /* fine print */

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --tracking-wide: 0.02em;
}

h1, h2, h3, h4 {
  color: black;
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-tight);
  font-weight: 100;
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl);  }
h3 { font-size: var(--fs-lg);  }
h4 { font-size: 1.25rem; }

p, li { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text); }

.lead { font-size: var(--fs-md); color: #555; }
.small { font-size: var(--fs-xs); color: #666; }

/* --------------------------------
   Focus Styles (accessibility)
-----------------------------------*/
:where(a, button, [role="button"], .btn):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------
   Navbar & Navigation
-----------------------------------*/
.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; background:var(--surface);
  box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:1000;
  border-bottom:2px solid var(--himalaya);
}

.logo{
  font-size:1.5rem; font-weight:200; color:black;
  letter-spacing:.03em;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: color .3s ease;
}

.nav-links a:hover {
  color: var(--clay-600);
}

/* --------------------------------
   Dropdown (DESKTOP) — fixed flicker
-----------------------------------*/
/* Increase hover hitbox to prevent losing hover between button and panel */
.dropdown{ position:relative; --hover-pad: 0px; padding-bottom: var(--hover-pad); }
.dropdown-menu{
  position:absolute; left:0; top:calc(100% - var(--hover-pad));
  background:var(--surface);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  max-height:0;
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.7,.2,1),
    max-height .45s ease;
  z-index:500;
}

/* On hover/focus, KEEP the menu open (no vanishing) and play a subtle bounce */
@media (min-width: 769px){
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0);
    max-height:var(--dropdown-max);
    animation:dropdown-bounce .5s ease-out;
  }
}

/* Bounce keyframes (subtle, premium) */
@keyframes dropdown-bounce{
  0%   { transform:translateY(-10px); }
  60%  { transform:translateY(6px); }
  80%  { transform:translateY(-2px); }
  100% { transform:translateY(0); }
}

/* Dropdown items */
.dropdown-menu li{ border-bottom:1px solid var(--himalaya); }
.dropdown-menu li:last-child{ border-bottom:none; }

.dropdown-menu a{
  display:block; padding:.85rem 1.2rem; color:var(--text);
  transition:background .25s ease, color .25s ease;
}

.dropdown-menu a:hover{
  background:var(--clay);
  color:#fff;
}

/* Rotate dropdown arrow when active */
.dropdown > a::after {
  content: "▾";
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.dropdown.open > a::after {
  transform: rotate(180deg); /* flips the arrow up */
}


/* --------------------------------
   Hamburger (Mobile)
-----------------------------------*/
.hamburger{ display:none; flex-direction:column; cursor:pointer; gap:5px; }
.hamburger span{
  width:25px; height:3px; background:var(--clay);
  border-radius:5px; transition:all .3s ease;
}
.hamburger.active span:nth-child(1){ transform:rotate(45deg) translateY(8px); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg) translateY(-8px); }

/* --------------------------------
   Mobile Nav + Dropdown (tap open)
-----------------------------------*/
@media (max-width: 768px){
  .hamburger{ display:flex; }

  .nav-links{
    position:absolute; top:70px; right:2rem; background:var(--surface);
    flex-direction:column; gap:1rem; padding:1.5rem;
    border-radius:var(--radius-md); box-shadow:var(--shadow-md);
    display:none;
  }
  .nav-links.active{ display:flex; animation:fadeIn .4s ease; }

  /* Disable hover-open on mobile; use JS tap to expand */
  .dropdown:hover .dropdown-menu{ max-height:0; }

  .dropdown-menu{
    position:relative; left:auto; top:auto; box-shadow:none;
    border-radius:var(--radius-md);
    max-height:0; opacity:1; visibility:visible; pointer-events:auto;
    transform:none; overflow:hidden;
    transition:max-height .4s ease-in-out;
    background:var(--surface);
    border:1px solid var(--himalaya);
  }
  .dropdown-menu.active{ max-height:var(--dropdown-max); }
}

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

/* --------------------------------
   Hero
-----------------------------------*/
.hero{
  /* soft clay overlay blended with serene tint */
  background:
    linear-gradient(#faf0e6, #faf0e6),
    url("https://source.unsplash.com/1600x900/?luxury,minimalist,design") center/cover no-repeat;
  color:#000000; text-align:center; padding:6rem 2rem;
  border-radius:0 0 40px 40px;
}

.hero h1{ font-size:var(--fs-xxl); margin-bottom:1rem; text-shadow:0 2px 8px rgba(0,0,0,.25); }
.hero p{ font-size:var(--fs-md); margin-bottom:2rem; color:#000000; }

/* --------------------------------
   Buttons
-----------------------------------*/
.btn{
  background:var(white); color:#000000; padding:.75rem 1.5rem;
  border-radius:var(--radius-pill); text-decoration:none; font-weight:700;
  letter-spacing:.5px;
  transition:background .3s ease, transform .2s ease, box-shadow .3s ease;
}
.btn:hover{ background:var(grey); transform:scale(1.05); box-shadow:var(--shadow-lg); }

/* --------------------------------
   Content Cards
-----------------------------------*/
.content{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem; padding:3rem 2rem; background:linear-gradient(#fff, #fff) padding-box,
                                       linear-gradient(180deg, var(--serene), #fff) border-box;
}

.card{
  background:var(--surface); border-radius:var(--radius-lg); padding:2rem;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
  border:1px solid var(--himalaya);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }

.card h2{ color:var(--clay-600); margin-bottom:1rem; }
.card p{ color:#555; }

/* --------------------------------
   Footer
-----------------------------------*/
footer{
  text-align:center; padding:1.5rem; background:#faf0e6
  url("https://source.unsplash.com/1600x900/?luxury,minimalist,design") center/cover no-repeat;
  border-top:2px solid var(#faf0e6); margin-top:2rem;
  font-size:.95rem; color:#444;
}

/* --------------------------------
   Responsive Type Tweaks
-----------------------------------*/
@media (max-width: 480px){
  .hero h1{ font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero p{ font-size: 1rem; }
}

/* --------------------------------
   Utility (optional helpers)
-----------------------------------*/
.section-muted{ background: var(--serene); }
.text-accent{ color: var(--clay); }
.bg-accent{ background: var(--clay); color:#fff; }
.border-soft{ border:1px solid var(--himalaya); border-radius:var(--radius-md); }

/* BLOG SECTION */
.blog-section {
  padding: 4rem 2rem;
  background: #f9f9fb;
  text-align: center;
}

.blog-title {
  font-size: 2.2rem;
  margin-bottom: 2.5rem;
  font-weight: 200;
  color: #222;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.blog-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  text-align: left;
}

.blog-card:hover {
  transform: translateY(-8px);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-content {
  padding: 1.5rem;
}

.blog-content h3 {
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  color: #333;
}

.blog-content p {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.read-more {
  font-size: 0.95rem;
  color: var(--clay);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.read-more:hover {
  color: #005fa3;
}

/* NAVIGATION */
.navbar1 {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-size: 1.4rem;
  font-weight: 0;
  color: #0077cc;
  text-decoration: none;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-menu li a {
  text-decoration: none;
  font-size: 1rem;
  color: #333;
  transition: color 0.2s;
}

.nav-menu li a:hover,
.nav-menu li a.active {
  color: #0077cc;
}

/* LAYOUT */
.post-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}

@media (max-width: 900px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
}

/* Fix blog post hero image size */
.post-hero {
  width: 100%;
  max-width: 100%;
  height: 1200px;       /* similar height to blog grid images */
  object-fit: cover;   /* crop nicely instead of stretching */
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
}

.post-hero2 {
  width:50%; /* you can use % */
  height: auto;       /* similar height to blog grid images */
  object-fit: cover;   /* crop nicely instead of stretching */
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  resize: 25%;
}

.post-hero3 {
  width:25%; /* you can use % */
  height: auto;       /* similar height to blog grid images */
  object-fit: contain;   /* crop nicely instead of stretching */
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  resize: 15%;
}

.post-hero4 {
  width:50%; /* you can use % */
  height: auto;       /* similar height to blog grid images */
  object-fit: cover;   /* crop nicely instead of stretching */
  border-radius: var(--radius-lg);
  margin-bottom: 0rem;
  box-shadow: var(--shadow-md);
  resize: 25%;
}

/* SIDEBAR */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidebar-box {
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.8rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.sidebar-box h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #222;
}

.sidebar-box ul {
  list-style: none;
  padding: 0;
}

.sidebar-box ul li {
  margin-bottom: 0.6rem;
}

.sidebar-box ul li a {
  text-decoration: none;
  color: #000000;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.sidebar-box ul li a:hover {
  color: #005fa3;
}

/* COMMENTS */
.comments {
  margin-top: 3rem;
}

.comments h3 {
  margin-bottom: 1.2rem;
  font-size: 1.3rem;
}

.comment {
  background: #f1f5f9;
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}

.comment-form textarea {
  resize: none;
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 0.6rem;
  border: 1px solid #ccc;
}

.comment-form button {
  background: var(--clay);
  color: #fff;
  font-weight: 600;
}
.comment-form button:hover {
  background: var(--clay-600);
}

/*hamburger function/
/* Base nav styles stay the same */

/* Hamburger button */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 999; /* stay above menu */
}

.nav-toggle .bar {
  height: 3px;
  width: 100%;
  background-color: var(--clay, #333);
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

/* Mobile menu */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex; /* show hamburger */
  }

  .nav-menu {
    position: absolute;
    top: 70px;
    right: 20px;
    width: 200px;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1rem;
    display: none; /* hidden by default */
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu li {
    margin: 0.8rem 0;
  }

  .nav-menu li a {
    font-size: 1rem;
    color: var(--clay, #333);
  }

  /* Animate hamburger → X */
  .nav-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}

/* Affiliate disclosure */
.affiliate-disclosure {

  background-color: #f8f8f8;

  border-left: 4px solid #333;

  padding: 12px 16px;

  margin-bottom: 20px;

  font-size: 14px;

  line-height: 1.5;

  color: #444;

  border-radius: 4px;

}

.affiliate-disclosure a {

  color: #000;

  text-decoration: underline;

}

/* Onelink */
.price-tag { font-size:15px; color:#222; font-weight:600; margin-bottom:8px; }