/* --- CSS RESET & NORMALIZE --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;} 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;} 
body { line-height:1.5; background: #ECDFCF; color: #26311A; } 
ul,ol {list-style:none;} 
a {text-decoration:none;color:inherit;} 
img {max-width:100%;display:block;} 
table {border-collapse:collapse;border-spacing:0;} 
button {background:none;border:none;font:inherit;cursor:pointer;}

/* --- FONT IMPORTS (FALLBACKS) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;700;400&family=Open+Sans:wght@400;700&display=swap');

:root {
  --primary: #195C32;
  --secondary: #EEF4EE;
  --accent: #EBBC49;
  --retro-red: #B03125;
  --retro-pink: #FFD2C2;
  --retro-green: #A4BE7B;
  --retro-brown: #A07855;
  --retro-bg: #F8F4E3;
  --white: #fff;
  --black: #222;
  --gray: #808080;
  --body-font: 'Open Sans', Arial, Helvetica, sans-serif;
  --heading-font: 'Montserrat', 'Arial Black', Arial, Helvetica, sans-serif;
}

/* --- BODY BASICS --- */
body {
  background: var(--retro-bg);
  font-family: var(--body-font);
  color: var(--black);
  font-size: 16px;
  min-height:100vh;
}

.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}

section {
  background: var(--secondary);
  border-radius: 24px;
  box-shadow: 0 6px 32px rgba(60,40,5,0.14);
  margin-bottom: 60px;
  padding: 40px 20px;
  /* Pattern effect: subtle retro dots */
  position:relative;
  overflow: hidden;
}
section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top:0;right:0;bottom:0;left:0;
  background-image: radial-gradient(rgba(230,188,107,0.12) 1.5px, transparent 1.5px), radial-gradient(rgba(160,120,85,0.05) 2px, transparent 2px);
  background-size: 26px 26px, 60px 60px;
  opacity:0.4;
  z-index:0;
}
.content-wrapper>* { position:relative; z-index:1; }

main {
  flex:1 1 auto;
  display: flex;
  flex-direction: column;
  gap:0;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--primary);
  text-shadow: 1px 2px 0 rgba(235,188,73,0.11);
  font-weight: 800;
  letter-spacing: 1px;
}
h1 { font-size: 2.8rem; margin-bottom: 20px; }
h2 { font-size: 2rem; margin-bottom: 16px; }
h3 { font-size: 1.5rem; margin-bottom: 12px; color: var(--retro-brown); }
h4,h5,h6 { font-size:1.125rem; }
p,li { font-size: 1rem; line-height:1.7; margin-bottom:8px; }
.lead { font-size: 1.25rem; font-family: var(--body-font); color: var(--retro-brown); }

ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
ul li {
  list-style: disc inside;
  font-size:1rem;
  margin-bottom: 8px;
}
ol {
  padding-left: 24px;
  margin-bottom:16px;
}
ol li {
  list-style:decimal inside;
  font-size:1rem;
  margin-bottom:8px;
}
strong { color: var(--retro-red); font-weight:700; }

.text-section {
  margin-bottom: 25px;
  color: var(--black);
}

.text-section h2, .text-section h3 {
  margin-bottom: 8px;
}

.text-section a {
  color: var(--primary);
  text-decoration: underline;
  transition: color 0.1s;
}
.text-section a:hover { color: var(--accent); }

/* --- NAVIGATION --- */
header {
  background: var(--retro-green);
  border-bottom: 3px solid var(--retro-brown);
  box-shadow: 0 4px 18px rgba(160,120,85,0.11);
  position: sticky;
  top:0;
  z-index: 22;
}
header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  padding: 18px 0 10px 0;
}
header nav a {
  font-family: var(--heading-font);
  font-size:1.06rem;
  color: var(--primary);
  padding: 7px 20px;
  border-radius: 20px;
  background: transparent;
  transition: background .16s, color .22s, box-shadow .23s;
  font-weight: 700;
  letter-spacing:0.5px;
  position: relative;
}
header nav a:not(.cta):hover {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(235,188,73,0.15);
}
header nav img { width: 54px; height:54px; border-radius: 50%; background:var(--accent); margin-right:4px; }

.cta.primary {
  font-family: var(--heading-font);
  background: var(--accent);
  color: var(--primary);
  border-radius: 32px;
  padding:12px 32px;
  font-size: 1.15rem;
  font-weight:800;
  margin-bottom:4px;
  box-shadow: 0 4px 16px rgba(235,188,73,0.16);
  border: 2px solid var(--primary);
  transition: background .18s, color .18s, box-shadow .18s, border .13s;
  outline: none;
  cursor:pointer;
  letter-spacing:0.5px;
  line-height:1.2;
}
.cta.primary:hover,.cta.primary:focus {
  background: var(--primary);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 28px rgba(25,92,50,0.18);
}

/* --- MOBILE BURGER MENU --- */
.mobile-menu-toggle {
  display: none;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  font-size: 2.2rem;
  width: 44px;
  height: 44px;
  align-items:center;
  justify-content:center;
  border: 2px solid var(--accent);
  margin-left: auto;
  z-index: 33;
  transition: background .15s;
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
  background: var(--accent);
  color: var(--primary);
}
@media (max-width: 1020px) {
  header nav { gap:13px; }
  header nav a { padding:6px 11px; font-size:0.97rem; }
}
@media (max-width: 920px) {
  header nav a { font-size: 0.93rem; }
}
@media (max-width: 860px) {
  header nav { gap: 9px; }
  header nav img { width:38px; height:38px; }
}
@media (max-width: 780px) {
  header nav {display:none;}
  .mobile-menu-toggle { display:flex; position:absolute; right:16px; top:18px; }
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  top:0; bottom:0; left:0; right:0;
  background: var(--retro-green);
  box-shadow: 0 12px 38px rgba(25,92,50,0.15);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(.5,.23,0,1.01);
  z-index: 44;
  padding-top: 34px;
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-close {
  font-size:2.1rem;
  color: var(--primary);
  background: var(--accent);
  border-radius:50%;
  width:39px;height:39px;
  align-self:flex-end;
  margin: 12px 16px 10px 0;
  border:2px solid var(--primary);
  transition:background 0.14s, color 0.16s;
  z-index: 45;
}
.mobile-menu-close:focus,.mobile-menu-close:hover {
  background: var(--primary);
  color: var(--accent);
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 30px;
  width: 100%;
}
.mobile-nav a {
  font-family: var(--heading-font);
  font-size: 1.23rem;
  padding: 14px 16px;
  border-radius: 18px;
  background:none;
  color: var(--primary);
  font-weight: 700;
  letter-spacing:0.4px;
  transition: background .16s, color .13s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background: var(--accent);
  color: var(--white);
}
@media (max-width: 780px) {
  .mobile-menu { display:flex; }
}
@media (max-width: 500px) {
  .mobile-nav a { font-size:1.01rem; padding:12px 12px; }
}

/* --- FOOTER --- */
footer {
  background: var(--retro-green);
  color: var(--primary);
  padding: 30px 0 12px 0;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 0 20px rgba(160,120,85,0.07);
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  font-size: 1rem;
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content:center;
}
footer nav a {
  color: var(--primary);
  background: var(--accent);
  padding: 6px 18px;
  border-radius: 14px;
  font-family: var(--heading-font);
  font-size:0.99rem;
  font-weight: 600;
  transition: background .16s, color .16s;
}
footer nav a:hover,footer nav a:focus {
  color: var(--white);
  background: var(--retro-brown);
}
footer div {
  font-size: 0.97rem;
  color: var(--primary);
  letter-spacing:0.1px;
  opacity:0.92;
}

/* --- FLEXBOX LAYOUTS (MANDATORY) --- */
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 25px;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
}
.card {
  margin-bottom: 20px;
  position: relative;
  background: var(--retro-pink);
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(176,49,37,0.18);
  display:flex;
  flex-direction:column;
  padding: 25px 22px;
}
.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items:flex-start; }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #fff9eb;
  color: var(--primary);
  border: 2px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 3px 22px rgba(176,49,37,.08);
  padding: 20px;
  margin-bottom: 22px;
  max-width: 520px;
  min-width:220px;
  margin-left:auto; margin-right:auto;
  transition: box-shadow 0.22s, transform .17s;
}
.testimonial-card:hover {
  box-shadow: 0 6px 32px rgba(235,188,73,0.14),0 0px 0px 0 #000;
  transform: translateY(-4px) scale(1.03);
}
.testimonial-card p {
  font-family: var(--heading-font);
  font-size:1.13rem;
  font-weight:700;
  text-align:center;
  line-height:1.6;
  color: var(--primary);
}
.testimonial-card span {
  font-family: var(--body-font);
  font-size: 0.99rem;
  color: var(--retro-brown);
  font-style:italic;
}
.testimonial-card div {
  font-size:1.25rem;
  color: var(--retro-red);
  letter-spacing:3px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* --- BUTTONS & LINKS --- */
button, .cta, a.button {
  font-family: var(--heading-font);
  cursor: pointer;
  transition: all .16s;
}
.button, a.button, .cta {
  display:inline-block;
  background: var(--accent);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius:24px;
  padding:10px 26px;
  font-size:1.08rem;
  font-weight:700;
  box-shadow: 0 2px 10px rgba(235,188,73,0.07);
  margin: 4px 0 8px 0;
  transition: background .15s, color .15s, border .18s, box-shadow .23s;
}
.button:hover,.button:focus, .cta:hover, .cta:focus  {
  background: var(--primary);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 32px rgba(25,92,50,0.13);
}

/* --- CARD / OFFER BLOCKS (INDEX ETC.) --- */
.content-wrapper > div > div {
  background: var(--retro-pink);
  margin-bottom:22px;
  border-radius: 14px;
  box-shadow:0 2px 12px rgba(160,120,85,0.07);
  padding: 19px 18px;
  border:2px solid var(--retro-brown);
  display:flex;
  flex-direction:column;
  gap:7px;
}
.content-wrapper > div > div h3 {
  margin-bottom: 5px; color: var(--retro-red); font-size: 1.17rem;
}

/* --- COOKIE CONSENT BANNER & MODAL --- */
.cookie-banner {
  position: fixed;
  bottom:0; left:0; right:0;
  background: var(--retro-green);
  color: var(--primary);
  box-shadow: 0 -2px 21px rgba(176,49,37,0.15);
  border-top: 3px solid var(--accent);
  padding: 22px 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:16px;
  z-index:800;
  transition: transform .34s, opacity .32s;
}
.cookie-banner.hide { opacity:0; pointer-events:none; transform:translateY(100%); }
.cookie-banner-text {
  font-size: 1.07rem;
  text-align: center;
  margin-bottom: 4px;
  font-family: var(--body-font);
}
.cookie-btn-group {
  display: flex;
  flex-wrap:wrap;
  gap: 12px;
  margin:8px 0 0 0;
}
.cookie-btn {
  font-family: var(--heading-font);
  background: var(--accent);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 18px;
  padding: 10px 23px;
  font-size:1.01rem;
  font-weight: 700;
  transition: background .13s, color .13s, border .13s;
}
.cookie-btn:focus, .cookie-btn:hover {
  background: var(--primary);
  color: var(--accent);
  border-color: var(--accent);
}
.cookie-btn.settings {
  background: var(--retro-brown);
  color: var(--white);
  border-color: var(--black);
}
.cookie-btn.settings:hover, .cookie-btn.settings:focus {
  background: var(--accent);
  color: var(--primary);
  border-color: var(--accent);
}

.cookie-modal {
  position:fixed;
  left:0;right:0;bottom:0;top:0;
  background:rgba(60,44,22,0.47);
  z-index:02010;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity:1;
  transition:opacity .23s;
}
.cookie-modal.hide {opacity:0; pointer-events:none;}
.cookie-modal-window {
  background: var(--retro-pink);
  color: var(--primary);
  padding: 32px 28px;
  max-width: 420px;
  width:90%;
  border-radius: 21px;
  box-shadow: 0 6px 34px rgba(235,188,73,0.13);
  position:relative;
  display:flex;
  flex-direction: column;
  gap: 24px;
}
.cookie-modal-close {
  position: absolute;
  right: 16px; top: 10px;
  font-size: 1.45rem;
  color: var(--retro-brown);
  background: var(--accent);
  border-radius: 50%;
  width:30px; height:30px;
  border:2px solid var(--retro-brown);
  transition:background .16s, color .13s;
  display:flex; align-items:center; justify-content:center;
  z-index:55;
}
.cookie-modal-close:focus,.cookie-modal-close:hover{background:var(--retro-brown);color:var(--accent);border-color:var(--accent);}
.cookie-pref-category {
  margin-bottom:14px;
}
.cookie-pref-category label {
  font-family:var(--body-font);
  font-weight:bold;
  color: var(--retro-brown);
  font-size:1.09rem;
}
.cookie-toggle {
  margin-left:14px;
  accent-color: var(--accent);
  width:22px; height:22px;
}
.cookie-pref-category small {
  display:block;
  color: var(--gray);
  margin-left:4px;
  margin-bottom:3px;
  font-size:0.95rem;
}

/* --- ANIMATIONS --- */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
section, .testimonial-card, .cta.primary, .card, .card-container > * {
  animation: fadeUpIn 1.1s cubic-bezier(0.6,0.21,0.3,0.93) both;
}
.cookie-banner,.cookie-modal-window {animation: fadeUpIn .77s cubic-bezier(.5,.23,0,1.01) both;}

/* --- MISC RETRO DECORATIVE DETAILS --- */
section {
  border: 5px double var(--retro-brown);
}
@media (min-width:900px) {
  section {
    padding: 60px 38px;
  }
  .card-container {
    gap:32px;
  }
}

/* --- RESPONSIVE LAYOUTS --- */
@media (max-width: 680px) {
  h1 {font-size:2rem;}
  h2 {font-size:1.44rem;}
  section {padding:26px 4px;}
  .card {padding:13px 7px;}
  .testimonial-card {padding: 13px 7px;}
  .content-wrapper {gap:16px;}
}
@media (max-width: 600px) {
  .container { padding:0 4px; }
  footer { border-radius: 0; }
}
@media (max-width: 500px) {
  html {font-size:15px;}
  header, section, footer { border-radius:0; }
}

/* --- UTILITY & ACCESSIBILITY --- */
:focus-visible { outline:2.5px dashed var(--accent); outline-offset:2px; }

/* Hide elements visually but keep for screen readers */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* --- SPACING & CARD GAPS --- */
section, .section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
.card-container { gap:24px; }
.card { margin-bottom:20px; }
.content-grid { gap:20px; }
.text-image-section { gap:30px; }
.testimonial-card { gap:20px; padding:20px; }
.feature-item { gap:15px; }

/* --- PREVENT OVERLAPPING AND ENSURE FLEX LAYOUTS --- */
.section, .container, .content-wrapper, .card-container, .card, .testimonial-card, .content-grid, .feature-item, .text-image-section { box-sizing: border-box; }

/* --- END --- */