/* Reconstructed theme stylesheet for sonshinenaturalstore.com (b-SonshineNatural)
   Original theme CSS/JS/images were not present in the Wayback archive (only the
   page HTML was captured). This faithfully reproduces the original design language
   implied by the markup: a small family-run natural health food store, brown/earth
   palette, Josefin Sans headings, Bootstrap-style responsive grid. */

:root{
  --brown:#5a4632;
  --brown-dark:#3f3122;
  --brown-soft:#7a6650;
  --cream:#faf6ee;
  --cream-2:#f1e9da;
  --green:#67a671;
  --green-dark:#4f8459;
  --ink:#2c241c;
  --muted:#6b5e4f;
  --line:#e3d9c6;
  --gold:#c9a14a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Josefin Sans',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Josefin Sans',sans-serif;font-weight:700;color:var(--brown-dark);line-height:1.2;margin:.2em 0 .5em}
h1{font-size:2.6rem}h2{font-size:2rem}h3{font-size:1.4rem}
p{margin:0 0 1rem}

/* ---- wrappers ---- */
.large-wrapper{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}
.medium-wrapper{max-width:960px;margin:0 auto;padding:0 20px;width:100%}
.small-wrapper{max-width:720px;margin:0 auto;padding:0 20px;width:100%}
.large-wrapper-nav{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}
.container-fluid{width:100%;padding:0}

/* ---- grid (bootstrap-like) ---- */
.row{display:flex;flex-wrap:wrap;margin:0 -15px}
.row.w-100{width:calc(100% + 30px)}
.row.mx-0{margin-left:0;margin-right:0}
[class*="col-"]{padding:0 15px;width:100%}
.col-md-12{flex:0 0 100%;max-width:100%}
@media(min-width:768px){
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:992px){
  .col-lg-6{flex:0 0 50%;max-width:50%}
}
.align-items-center{align-items:center}
.justify-content-center{justify-content:center}
.justify-content-md-center{justify-content:center}
.justify-content-md-end{justify-content:flex-end}
.h-100{min-height:100%}
.d-flex{display:flex}.d-block{display:block}.d-inline-block{display:inline-block}.d-none{display:none}
@media(min-width:768px){.d-md-block{display:block}.d-md-none{display:none}}
@media(max-width:767px){.d-md-block{display:none}.d-md-none{display:block}}
.text-center{text-align:center}.text-md-right{text-align:right}.text-md-left{text-align:left}
.w-100{width:100%}
.mx-0{margin-left:0;margin-right:0}.m-0{margin:0}.p-0{padding:0}.p-3{padding:1rem}
.my-0{margin-top:0;margin-bottom:0}.my-3{margin-top:1rem;margin-bottom:1rem}.my-5{margin-top:3rem;margin-bottom:3rem}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mb-5{margin-bottom:3rem}.py-0{padding-top:0;padding-bottom:0}
.py-5{padding-top:3rem;padding-bottom:3rem}.pt-0{padding-top:0}

/* ---- header / nav ---- */
.site-header{background:var(--cream);border-bottom:2px solid var(--line);padding:14px 0}
.site-header .row{min-height:64px}
#logo .textwidget p,.logo-mobile .textwidget p{
  font-size:1.7rem;font-weight:700;color:var(--brown-dark);margin:0;letter-spacing:.5px;
  font-family:'Josefin Sans',sans-serif;
}
.main-navigation .menu{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;align-items:center}
.main-navigation .menu a{color:var(--brown-dark);font-weight:700;font-size:1.02rem;padding:6px 2px;text-transform:uppercase;letter-spacing:.4px}
.main-navigation .menu a:hover{color:var(--green-dark);text-decoration:none}
.main-navigation .current-menu-item>a,.main-navigation .current_page_item>a{color:var(--green-dark);border-bottom:2px solid var(--green)}
.logo-mobile{margin-bottom:10px}
.nav-glass{background:var(--brown);color:#fff}
.nav-glass a{color:#fff}
.phone-number-area{color:var(--brown-dark);font-weight:700}
.mobile-phone{text-align:center;margin:6px 0}
.menu-toggle{background:var(--brown);color:#fff;border:0;padding:8px 14px;border-radius:6px;font-weight:700}

/* ---- hero / slider ---- */
.slider-wrapper{
  background:linear-gradient(rgba(58,44,30,.55),rgba(58,44,30,.55)),
    radial-gradient(circle at 30% 30%,#8a7050,#4f3d28);
  color:#fff;display:flex;align-items:stretch;text-align:center;padding:0;
}
.slider-content{width:100%;display:flex;justify-content:center;align-items:center}
.brown-frame{background:rgba(63,49,34,.65);border:2px solid rgba(255,255,255,.35);padding:42px 38px;border-radius:14px;max-width:760px;backdrop-filter:blur(2px)}
.slide-header{font-size:3rem;font-weight:700;color:#fff;margin:0 0 14px;line-height:1.1;font-family:'Josefin Sans',sans-serif}
.slide-subheader,.slide-subsubheader{font-size:1.25rem;color:#f3ead9;margin:0 0 10px}
.all-the-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:22px}

/* slider container + slide background sizing (faithful hero fix) */
.slider-wrapper{position:relative;overflow:hidden}
.slides-container{list-style:none;margin:0;padding:0;position:relative;min-height:inherit;align-items:stretch}
.slide{position:relative;flex:1 1 100%;width:100%;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-repeat:no-repeat;aspect-ratio:1200/420;min-height:340px}
.slide::before{content:"";position:absolute;inset:0;background:rgba(46,35,23,.45)}
.slide .slider-content{position:relative;z-index:1}

/* ---- breakout sections ---- */
.breakout{padding:54px 0}
.breakout.bg-brown{background:var(--brown);color:#fff}
.breakout.bg-brown h1,.breakout.bg-brown h2,.breakout.bg-brown h3{color:#fff}
.breakout.invert,.invert{color:#fff}
.breakout.invert a{color:#ffe9c2}
.bg-brown{background:var(--brown);color:#fff}
.parallax{background:linear-gradient(rgba(90,70,50,.85),rgba(90,70,50,.85)),
  radial-gradient(circle at 70% 20%,#7a6650,#4f3d28);background-attachment:fixed;color:#fff}
.parallax h1,.parallax h2,.parallax h3{color:#fff}
.first-b{margin-top:0}

/* image bands (originals missing -> earthy placeholder) */
.bg-img{
  min-height:340px;background:
    linear-gradient(135deg,#7d6347 0%,#9c8055 50%,#5e4a32 100%);
  position:relative;
}
.bf{padding:30px}

/* ---- cards / products / reviews ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:0 6px 18px rgba(90,70,50,.07);height:100%}
/* card text must stay dark even inside dark/parallax/inverted bands */
.parallax .card,.bg-brown .card,.invert .card{color:var(--brown-dark)}
.parallax .card h1,.parallax .card h2,.parallax .card h3,.bg-brown .card h1,.bg-brown .card h2,.bg-brown .card h3,.invert .card h1,.invert .card h2,.invert .card h3{color:var(--brown-dark)}
.parallax .card a,.bg-brown .card a,.invert .card a{color:var(--green-dark)}
.back{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 6px 18px rgba(90,70,50,.07);height:100%}
.entry-content section{position:relative}

/* product / featured image fallbacks */
.entry-content img{border-radius:10px;background:var(--cream-2);min-height:60px}
img[src*="health-products"],img[src$=".webp"]{
  border-radius:10px;
}
img:not([src]),img[src=""]{display:none}

/* review block */
blockquote{border-left:4px solid var(--green);margin:0 0 1.5rem;padding:.4rem 0 .4rem 1.2rem;color:var(--muted);font-style:italic;background:transparent}

/* ---- buttons ---- */
.btn,.wp-block-button__link,a.btn{
  display:inline-block;background:var(--green);color:#fff !important;font-weight:700;
  padding:13px 26px;border-radius:30px;text-transform:uppercase;letter-spacing:.5px;
  font-size:.95rem;border:0;transition:.2s;text-decoration:none;
}
.btn:hover,a.btn:hover{background:var(--green-dark);text-decoration:none}
.btn-brown,.bg-brown .btn{background:var(--gold);color:var(--brown-dark) !important}
.bg-brown .btn:hover{background:#d8b463}

/* ---- contact form / cf7 ---- */
.wpcf7 input,.wpcf7 textarea,input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:1rem;margin-bottom:14px;font-family:inherit;background:#fff;
}
.wpcf7 input[type=submit],input[type=submit],button[type=submit]{
  width:auto;background:var(--green);color:#fff;border:0;padding:13px 30px;border-radius:30px;font-weight:700;cursor:pointer;text-transform:uppercase;
}

/* ---- footer ---- */
.site-footer,footer{background:var(--brown-dark);color:#e9ddc8;padding:46px 0 28px;margin-top:0}
.site-footer a,footer a{color:#f2e3c6}
.site-footer h2,.site-footer h3,footer h2,footer h3{color:#fff}

/* ---- gallery ---- */
.gallery,.wp-block-gallery{display:flex;flex-wrap:wrap;gap:16px;margin:1rem 0}
.gallery img,.wp-block-gallery img{flex:1 1 240px;max-width:320px;border-radius:10px;object-fit:cover}

/* misc utility from markup */
.invert p{color:#f3ead9}
.bg-brown.invert p{color:#f3ead9}

/* ---- responsive navigation (one nav per viewport) ----
   The markup ships two navs: #site-navigation (desktop primary) and
   #site-navigation-mobile (hamburger). The original theme showed exactly
   one per breakpoint; these rules restore that behaviour. */

/* mobile hamburger nav: hidden by default (desktop) */
#site-navigation-mobile{display:none}

/* hamburger button + bars */
.nav-menu-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;padding:8px;background:var(--brown);border:0;border-radius:8px;
  cursor:pointer;z-index:1002;position:relative;
}
.nav-menu-toggle .bar{display:block;width:100%;height:3px;background:#fff;border-radius:2px}

/* glass overlay behind the slide-in panel */
#site-navigation-mobile .nav-glass{
  position:fixed;inset:0;background:rgba(44,36,28,.55);opacity:0;visibility:hidden;
  transition:opacity .25s ease;z-index:1000;
}
#site-navigation-mobile .nav-glass.toggled{opacity:1;visibility:visible}

/* slide-in mobile menu panel */
#site-navigation-mobile .large-wrapper-nav{
  position:fixed;top:0;right:0;height:100%;width:min(78vw,320px);
  background:var(--brown-dark);box-shadow:-6px 0 22px rgba(0,0,0,.3);
  transform:translateX(100%);transition:transform .28s ease;z-index:1001;
  padding:70px 24px 24px;overflow-y:auto;
}
#site-navigation-mobile .large-wrapper-nav.toggled{transform:translateX(0)}
#site-navigation-mobile .menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#site-navigation-mobile .menu a{
  display:block;color:#f2e3c6;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.12);
}
#site-navigation-mobile .menu a:hover{color:#fff;text-decoration:none}

/* DESKTOP (>=768px): show primary nav, hide hamburger nav entirely */
@media(min-width:768px){
  #site-navigation-mobile{display:none !important}
}

/* MOBILE (<768px): hide the desktop primary menu, show the hamburger nav */
@media(max-width:767px){
  #site-navigation .menu-menu-1-container{display:none}
  #site-navigation-mobile{display:block}
}

/* responsive headings */
@media(max-width:767px){
  h1{font-size:2rem}.slide-header{font-size:2.1rem}
  .brown-frame{padding:28px 22px}
  .breakout{padding:38px 0}
  .main-navigation .menu{justify-content:center}
  .text-md-right,.text-md-left{text-align:center}
}