:root{
    --white: #fff;
    --glacier: #9dd8d6;
    --blush: #E8A6A1;
    --wheat: #E9C46A;
    --mint: #A8D5BA;    /* Mint */
    --mint-drk:#7EB998; /* Darker mint */
    --text: #3A3A3A;      /* Charcoal */
    --clay: #D6C9B5;
    --taupe:#7A6A58;      /* Warm Taupe */
    --sand: #F5F2EC;
    --private: #dddddd;
    --radius: 12px;
    --shadow: 0 8px 20px rgba(0,0,0,.08);
  }

   *,*::before,*::after{ box-sizing:border-box; }
  body{ margin:0; font-family: "Poppins", Arial, sans-serif; color:var(--text); background:var(--white); }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
  :focus-visible{ outline:3px solid var(--mint); outline-offset:3px; }

  /* Header (sticky) */
  .site-header{
    position:sticky; top:0; z-index:1000;
    background: var(--white);
    backdrop-filter: blur(6px) saturate(1.1);
    border-bottom:1px solid var(--clay);
  }
  .nav{
    margin:0 auto; padding:.6rem 1rem;
    display:flex; align-items:center; gap:1rem; justify-content:space-between;
  }

  /* Left: logo */
  .brand{ display:flex; align-items:center; gap:.6rem; min-width:0; }
  .brand img{ width:180px; height:auto; display:block; }
  .brand-name{ font-weight:700; letter-spacing:.3px; white-space:nowrap; }

  /* Center: desktop nav */
  .nav-links{ display:none; align-items:center; gap:.5rem; }
  .nav-links > li{ position:relative; list-style:none; }
  .nav-link{
    color: var(--taupe);
    padding:.55rem .75rem; border-radius:10px;
  }
  .nav-link:hover{ text-decoration: underline; color:var(--mint-drk);}

  /* Dropdown (desktop) */
  .dropdown-toggle{ display:flex; align-items:center; gap:.35rem; }
  .chev{ width:12px; height:12px; translate:0 1px; }
 .dropdown { position: relative; }
    .menu{
    position: absolute;
    top: 100%;                 /* sits flush under the toggle */
    left: 0;
    transform: translateY(8px);/* visual offset without creating a gap */
    min-width: 220px;
    padding: .4rem;
    border: 1px solid var(--clay);
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .15rem;
    z-index: 1000;
    }

    /* Invisible “bridge” so the pointer never leaves the dropdown stack */
    .menu::before{
    content:"";
    position:absolute;
    top:-10px; left:0; right:0; height:10px;  /* fills the hover gap */
    }

    .open > .menu{ display:flex; }
    .menu a{ padding:.55rem .6rem; border-radius:8px; }
    .menu a:hover{ text-decoration:underline; color:var(--mint-drk); }
  /* Right: actions */
  .actions{ display:flex; align-items:center; gap:.5rem; }
  .btn-primary{
    background:var(--mint); color:var(--white); font-weight:600; letter-spacing:.4px;
    padding:.5rem .8rem; border-radius:10px;
  }
  .btn-primary:hover{ background:var(--mint-drk); }

  /* User dropdown */
  .user{ position:relative; }
  .avatar{
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--clay); display:grid; place-items:center;
    background:var(--card);
  }
  .user .menu{ right:0; left:auto; }

  /* Mobile hamburger + drawer */
  .hamburger{
    width:42px; height:42px; border-radius:10px; border:1px solid var(--clay);
    display:grid; place-items:center;
  }
  .bar{ width:22px; height:2px; background:var(--taupe); position:relative; }
  .bar::before,.bar::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:var(--taupe); }
  .bar::before{ top:-7px; } .bar::after{ top:7px; }

  .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:900;
  }
  .drawer{
    position:fixed; inset:0 auto 0 0; width:min(86vw,320px);
    translate:-100% 0; transition:translate .25s ease;
    background:var(--sand); border-right:1px solid var(--clay); display:flex; flex-direction:column;
    z-index: 2000;
  }
  .drawer header{ display:flex; align-items:center; justify-content:space-between; padding:1rem; }
  .drawer nav{ display:flex; flex-direction:column; gap:.25rem; padding:.25rem .75rem 1rem; }
  .drawer a{ padding:.7rem .6rem; border-radius:8px; }
  .drawer a:hover{ background:var(--clay); }
  .drawer .section{ margin-top:auto; padding:.75rem; border-top:1px solid var(--clay); }
  .details{ border:1px solid var(--clay); border-radius:10px; padding:.25rem; overflow:hidden; }
  .details summary{ list-style:none; padding:.6rem .6rem; cursor:pointer; }
  .details summary::-webkit-details-marker{ display:none; }
  .details a{ padding:.55rem .6rem; }

  /* States when nav is open */
  .nav-open .overlay{ opacity:1; pointer-events:auto; z-index: 1999; }
  .nav-open .drawer{ translate:0 0; }

  /* Breakpoint: desktop */
  @media (min-width: 920px){
    .hamburger{ display:none; }
    .nav-links{ display:flex; margin-top: 1em;}
    .drawer, .overlay{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .drawer, .overlay{ transition:none !important; }
  }

   .hero{
    /* Replace with your image */
    --img: url('/assets/images/hero-image.png');

    min-height: 64vh;
    display: grid;
    place-items: center;
    padding: 5rem 1rem;
    color: var(--text);
    text-align: center;

    /* Layered backgrounds:
       1) semi-transparent clay overlay
       2) image (cover)
       3) solid clay fallback color */
    background:
      linear-gradient(rgba(122,106,88,0.55),
                      rgba(122,106,88,0.55)),
      var(--img) center / cover no-repeat,
      var(--taupe);
  }

  .hero__content h1{
    color: var(--white);
    font-weight:800;
    font-family: "Raleway", Georgia, serif;
    font-size: 4rem;
    line-height: 1.15;
    margin: 0;
    /* Optional subtle text shadow for readability on lighter photos */
    text-shadow: 0 1px 10px rgba(0,0,0,.08);
  }
  .hero__content p{
    line-height: 1.8em;
    padding-top: 1.5em;
    padding-bottom: 1.8em;
    color: var(--white);
    text-align: left;
    width: 60%;
    min-width: 350px;
    margin: auto;
    font-family: "Poppins", Arial;
    font-size: 1.4rem;
    padding-right: 1em;
    padding-left: 1em;
  }
  .hero-btn {
  margin:1.5em;
  border-radius:4em;
  padding: 1em;
  color:var(--white);
  background-color:var(--mint-drk);
  border: solid 2px var(--mint);
}
.hero-btn:hover {
  color:#eee;
  background: transparent;
}
.hero-cta {margin-top:1.5em;}

.section-diagonal {
  position: relative;
  background: var(--sand);  /* your section background color */
  color: var(--text);   /* full screen height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;

  /* angled bottom */
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.section-diagonal h2 {
    font-family: "Libre Baskerville", serif;
    font-size: 2rem;
    font-weight:600;
    margin-bottom: 1.5rem;
}
.section-diagonal p, .feature-container p{
    font-family: "Poppins", arial;
    font-size: 1.3rem;
    line-height: 1.6em;
}
.feature-container h3 {
    color:var(--blush);
    font-family: "Raleway", serif;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}
.logo { width: 180px;
    height: auto;
    display: block;}

.footer {
  margin-top: 2rem;
  min-width:350px;
  background: linear-gradient(135deg, #f9f5f1, #f1f7f5);
  padding: 2rem 1rem;
  font-family: 'Georgia', serif;
  color: #2f3d2c;
  border-top: 2px solid rgba(160, 190, 160, 0.2);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-brand h2 {
  font-size: 1.5rem;
  color: var(--ink); /* Indigo accent */
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: #4d5d4b;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  text-decoration: none;
  color: #2f3d2c;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #2070A1;
}

.footer-social {
  display: flex;
  gap: 1rem;
  font-size: 1.3rem;
}

.footer-social a {
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
  color: #2f3d2c;
}

.footer-social a:hover {
  color: #2070A1;
  transform: scale(1.1);
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #6b7a68;
  border-top: 1px dashed rgba(120, 150, 120, 0.3);
  padding-top: 1rem;
}
.social-icon {width: 40px !important;}
.login-header{ font-family: 'Libre Baskerville', serif; font-size: 2em; padding-bottom: 0.2em;}
.login-tagline {padding-bottom: 1em;}

.linkBox {
    min-height: 200px;
    background-image: url(/assets/images/corner-border.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: var(--sand);
    transform:translate(0,0);        /* no layout shift */
    transition:transform 160ms ease, box-shadow 160ms ease;
    will-change: transform;
}
.linkBox h2{
  font-family: 'Raleway', serif;
  font-weight: 600;
  text-align:center;
  color:var(--taupe);
  padding-top: 2.5rem;
}
.linkBox p {
  padding: 0.5rem 2rem 2rem 2rem;
}
.linkBox:hover {
  cursor:pointer;
  transform:translateY(calc(var(--raise) * -1));
  box-shadow:var(--shadow);
}
form label {font-family: 'Raleway', serif;
font-size: 1.2em; text-transform: uppercase;
color:var(--taupe);
padding-bottom: 1rem;
}
form input, form textarea {
  border: solid var(--clay) 2px !important;
}
form {
  background-color:var(--sand);
  padding: 2rem;
}
form hr {
  border-bottom: solid var(--clay) 2px;
  opacity: 1;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.btn-post{
  border-radius: 40px;
  background-color:var(--mint);
  color:#fff;
  padding-right: 2rem; 
  padding-left: 2rem;
  border: solid var(--mint) 2px;
}
.btn-post:hover {
  background:transparent;
  border: solid var(--mint-drk) 2px;
  color: var(--mint-drk);
}
.btn-draft{
  background-color:var(--clay);
  color:#fff;
  padding-right: 2rem;
  padding-left: 2rem;
  border-radius:40px;
  margin-right: 1rem;
  border: solid var(--clay) 2px;
}
.btn-draft:hover{
  background:transparent;
  color:var(--taupe);
  border: solid var(--taupe) 2px;
}
.button-container {
  text-align:right;
  margin-top: 2rem;
}
.journal_entry {
  background-color: var(--sand);
  padding: 2.5rem;
}
.journal_entry h2 {
  color:var(--taupe);
  font-family: 'Raleway', serif;
  font-size: 1.3em;
  text-transform: uppercase;
}
.entry_date {
  color: var(--text);
  font-size: 0.8em;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: solid var(--clay) 2px;
}
.journal_content{
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color:var(--text);
  margin-bottom: 1.5rem;
}
.btn-bookmark{
  color:#fff;
  background-color:var(--mint);
  border: solid var(--mint) 2px;
  border-radius: 10px;
}
.btn-bookmark:hover{
  background:transparent;
  color:var(--mint-drk);
  border: solid var(--mint-drk) 2px;
}
.journal_options {
  font-size: 0.8em;
  text-align:right;
}
.tag_reply {
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 0.8em;
}
.link-blush{
  color:var(--blush);
}
.link-blush:hover{
  color:var(--blush);
  text-decoration:underline;
}
.month:hover {
  cursor:default;
}
.month h2{
  font-family: 'Libre Baskerville', serif;
  font-size: 1.2em;
}
.month table{
  margin:auto;
  width:90%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 5px 5px;
  padding-bottom: 2em;
}
.month table th{
  text-align:center;
  background-color:#fff;
  border: solid var(--clay) 1px;
}
.month table td {
  background-color: var(--mint);
  color:#fff;
  text-align:center;
  cursor:pointer;
}
.profile-image{
  width:100px;
  margin:auto;
  border: solid var(--taupe) 3px;
  border-radius:50%;
}
.bio-text,.username-text{
  font-size: 0.8em;
  padding: 0.5rem 2rem;
}
.bio-link{
  padding-top:0.5rem;
  font-size: 0.8em;
  padding-bottom: 2rem;
}
.bio-link .fa {
  font-size: 1.2em;
  background-color:var(--mint);
  color:#fff;
  padding:8px;
  border-radius:50%;
  margin-right: 0.2em;
}
section {
  min-width:330px !important;
}
.private{
  background-color:var(--private) !important;
}
.btn-delete{
  background-color:#E8A6A1;
  color:#fff;
  padding-right: 2rem;
  padding-left: 2rem;
  border-radius:40px;
  margin-right: 1rem;
  border: solid var(--clay) 2px;
}
.btn-delete:hover{
  background:transparent;
  color:#E8A6A1;
  border: solid #E8A6A1 2px;
}
.delete-button-container {
  margin-top: 2rem;
}

.btn-cancel{
  background-color:#ccc;
  color:#fff;
  padding-right: 2rem;
  padding-left: 2rem;
  border-radius:40px;
  margin-right: 1rem;
  margin-top: 1.5rem;
  border: solid #ccc 2px;
}
.btn-cancel:hover{
  background:transparent;
  color:#555;
  border: solid #555 2px;
}
.lock {font-size: 0.8em; padding-bottom: 1em;}
.lock .fa {padding-right: 1em;}

.counter{ margin-left:.5rem; font-size:.9rem; color:#7A6A58; }
.counter.over{ color:#C62828; } /* red when over the limit */

  .notice{
  position: fixed; right: 1rem; bottom: 1rem;
  padding: .75rem 1rem; border-radius: 10px;
  background: #A8D5BA; color: #3A3A3A; /* mint + ink */
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  pointer-events: none; /* click-through */
}
.journal_content li {
  padding-bottom: 0.8em;
  line-height: 1.6em;
}
.bg-tag {border-radius: 0px; padding:0.25em 1em; font-size:0.95em;}