/* --- Base Styles --- */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #455227;
    background-color: #FBF7F2;
    text-align: left;
    font-size: 17px;
}

/* Allow a background layer behind the whole site */
body{
  position: relative;
  margin: 0;
}

/* Background image layer behind everything */
body.home::before{
  content:"";
  position: fixed;
  inset: 0;

  /* put scrabble in /pictures/ and use this path */
  background: url("pictures/beach.jfif") center / cover no-repeat;

  opacity: 0.99;             /* tweak 0.06–0.14 */
  filter: saturate(0.7) contrast(0.9);

  pointer-events: none;
  z-index: -1;
}

:root {
  /* Adjust later when you shrink the logo */
    --topbar-height: 44px;
    --header-offset: 165px;
    --accent: #4B5A32;          /* tweak if your green differs */
    --panel-bg: rgba(251, 247, 242, 0.96);  /* your new cream, slightly see-through */
    --header-bg: #F4EAE1; /* header colour */
    --nav-pad-desktop: 20px;
    --nav-pad-mobile: 15px;
}

/* Prevent fixed header overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Stops content hiding behind a fixed header */
body {
  padding-top: var(--header-offset);
}

/* If you ever use anchor links (#something), this prevents them hiding behind the header */
html {
  scroll-padding-top: var(--header-offset);
}

em, i {
    margin-right: 0.1em;
}

header {
  background-color: #F4EAE1;
  padding: 0px;
  font-size: 20px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

header nav { padding: 5px 20px; }  /* 5 top/bottom, 20 left/right */

header nav a {
    color: #455227;
    text-decoration: underline;
    font-weight: bold;
}

header nav a:hover {
    color: #000;
}

/* Thin CTA strip */
.topbar{
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E6D6CB;       /* slightly darker than header for contrast */
  border-bottom: 1px solid rgba(0,0,0,0.06);
  width: 100%;
  margin: 0;
  padding: 0;
}

.topbar-link{
  color: #1f1f1f;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
}

/* Optional hover */
.topbar-link:hover{
  text-decoration: underline;
}

.section{
  padding: 0;
  margin: 0;
  background: #FBF7F2; /* or whatever you want for the section background */
}

.section > .page{
  background: #FBF7F2;   /* solid */
  border-radius: 0px;
  padding: 64px 20px;
}

.section--transparent{
  background: transparent;
  padding: 70px 0;   /* beach visible top + bottom */
}

.section--transparent .page{
  background: #FBF7F2;   /* solid (your lighter cream) */
  border-radius: 0px;   /* keep if you like the soft corners */
  padding: 30px 20px;    /* keep your spacing */
}

.section--alt{
  background: var(--header-bg); /* matches Section 2 colour */
}

/* make the inner card disappear so it’s one solid section */
.section--alt .page{
  background: transparent;
  box-shadow: none;
}

.section--header-bg{
  background: transparent;
}

#support > .page{
  background: var(--header-bg);
}

h1 {
    color: #455227;
    font-size: 42px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    margin-top: 0;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

h2 {
    color: #455227;
    font-size: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

footer {
    background-color: #444;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 0px;
}

footer a {
    color: #fff; /* Makes the link white */
    font-size: 14px; /* Makes the font a bit smaller. Adjust as you like! */
}

/* This makes sure the link STAYS white after you've visited it */
footer a:visited {
    color: #fff;
}

/* This adds a subtle underline when you hover over it, which is good for usability */
footer a:hover {
    text-decoration: underline;
}

p {
    font-family: 'Poppins', Verdana, sans-serif;
    font-weight: 400;
    font-size: 17px;
}

strong {
    font-weight: 600;
}

/* Button-style links */
.btn, .btn:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 26px;
  border-radius: 999px;      /* pill shape */
  font-weight: 700;
  text-decoration: none;

  background: var(--accent);
  color: #fff;

  border: 2px solid transparent;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* Hover/active */
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); opacity: 0.9; }

a.btn,
a.btn:visited,
a.btn:hover,
a.btn:active {
  color: #fff;
  text-decoration: none;
}

.cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Layout Containers --- */
.content-container {
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
}

.image-text-section {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 95%;
    margin: 20px auto;
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 0;
}

.image-text-section.image-right{
  flex-direction: row-reverse;
}

.text-content {
    flex: 1;
    min-width: 280px;
    text-align: left;
}

.blog-post-content {
    max-width: 750px; /* A comfortable reading width. Adjust if you like. */
    margin: 40px auto; /* This centers the block on the page */
    padding: 20px; /* Keeps some space from the edges */
    text-align: left; /* This is KEY! It aligns the text and fixes the lists. */
}

body.blog-page .content-container{
  max-width: 90%;
  margin: 0 auto;
  padding: 64px 20px 20px; /* more top padding, normal sides/bottom */
}

body.blog-page .page{
  max-width: 90%;
}

body.home .page{
  max-width: 90%;
}

/* Home page: BUT keep the beach card at the original width */
body.home #support.page,
body.home #support .page{
  max-width: 1100px; /* or whatever your current .page max-width is */
}

/* Home page first section: align image with top of text */
body.home #home .page.image-text-section {
  align-items: flex-start;
}

/* Home page: make ONLY the Support list larger */
body.home #support ul{
  font-size: 20px;   /* tweak: 1.1–1.25 */
  line-height: 1.6;
}

body.home #support ul li{
  margin-bottom: 14px;  /* optional: gives nicer spacing */
}

#support h1{
  text-align: center;
  margin-bottom: 28px;
  font-weight: 700;
}

/* --- Blog hero split (image + intro text) --- */
.blog-page .blog-hero-split{
  display: flex;
  align-items: center;
  gap: 28px;
}

.blog-page .blog-hero-image{
  width: 42%;
  max-width: 280px;
  height: auto;
  border-radius: 12px;
  display: block;
}

.blog-page .blog-hero-text{
  flex: 1;
  min-width: 280px;
}

/* === Blog post: article + right-side images (clean version) === */
.blog-layout{
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: minmax(0, 750px) minmax(220px, 1fr);
  gap: 40px;
  align-items: start;
}

/* keep your article styling but stop auto-centering inside the grid */
.blog-layout .blog-post-content{
  margin: 0;
  padding: 20px;
}

/* Aside: show images as a tidy vertical stack */
.blog-aside{
  display: grid;
  gap: 16px;
  align-self: start;
}

.blog-aside img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Desktop: images are static in the aside (do NOT follow scroll) */
@media (min-width: 901px){
  .blog-aside{
    position: static;
  }

  .blog-aside img{
    position: static;
    top: auto;
  }

  /* Push the second image down so it sits nearer “Reflection” */
  .blog-aside img + img{
    margin-top: 1800px; /* tweak this number */
  }
}

/* Mobile: stack layout + hide the aside (so it doesn't sit above everything) */
@media (max-width: 900px){
  .blog-layout{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-aside{
    display: none;
  }
}

.blog-top-image{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 18px 0 22px;
}

/* Reflection image swap: desktop uses aside image, mobile uses inline image */
.mobile-only, .desktop-only{ display: none; }

@media (max-width: 900px){
  .mobile-only{ display: block; }
}

@media (min-width: 901px){
  .desktop-only{ display: block; }
}

.reflection-image{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Optional spacing when the reflection image appears inline on mobile */
.mobile-only.reflection-image{
  margin: 18px 0 10px;
}

/* ===== Cards layout ===== */
.page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Stop the default section padding/margin INSIDE the .page (so gaps control spacing) */
.page > section{
  margin: 0;
  padding: 0;
}

/* The actual “card” */
.panel{
  background: rgba(244, 234, 225, 0.96);  /* close to your header colour (#F4EAE1) */
  border-radius: 28px;
  padding: 56px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

/* The clear strip where the background shows */
.peek-gap{
  height: 56px;
}

/* Buttons row spacing (if you’re using it) */
.cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

@media (max-width: 900px){
  .panel{ padding: 32px; }
  .peek-gap{ height: 36px; }
}

/* --- General Content Link Styles --- */

/* --- General Content Link Styles --- */
/* Covers blog + any .page-based sections, but not header/footer */
.content-container a:not(.btn),
.page a:not(.btn),
.blog-entry a:not(.btn),
.blog-post-content a:not(.btn),
.text-content a:not(.btn) {
  color: #455227;
  text-decoration: underline;
  font-weight: bold;
}

.content-container a:not(.btn):visited,
.page a:not(.btn):visited,
.blog-entry a:not(.btn):visited,
.blog-post-content a:not(.btn):visited,
.text-content a:not(.btn):visited {
  color: #455227; /* same as normal */
}

.content-container a:not(.btn):hover,
.page a:not(.btn):hover,
.blog-entry a:not(.btn):hover,
.blog-post-content a:not(.btn):hover,
.text-content a:not(.btn):hover {
  color: #000;
  text-decoration: none;
}

/* Blog: show/hide helpers for responsive images */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* Mobile: hide the right column and show the inline image instead */
@media (max-width: 900px){
  .blog-aside { display: none; }
  .mobile-only { display: block; }
  .desktop-only { display: none; }
}


/* --- Images --- */
.logo {
    /* This is the DESKTOP logo size */
    height: 240px;
    width: auto;
}

.image-text-section .profile-image{
    max-width: 280px;      /* slightly larger */
    width: 100%;
    height: auto;
    border-radius: 18px;   /* was 0 in your file */
}

.image-text-section img {
    max-width: 45%;
    min-width: 280px;
    height: auto;
    border-radius: 10px;
    display: block;
    margin-bottom: 15px;
}

#approach .profile-image{
  max-width: 360px;
}

/* When an image-text-section is ALSO a panel, let the panel control spacing */
.panel.image-text-section{
  margin: 0;
  padding: 56px;          /* matches .panel */
  gap: 40px;
  align-items: flex-start; /* nicer than vertical-centre for long text */
}

@media (max-width: 900px){
  .panel.image-text-section{
    padding: 32px;
  }
}

.panel{
  text-align: left;
}

/* --- Navigation & Hamburger --- */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Default for Desktop */
    width: 100%;
}

.nav-links {
    display: flex; /* This will be overridden on mobile */
    gap: 30px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    list-style: none;
}

.hamburger-menu {
    display: none; /* Hide on desktop by default */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.hamburger-menu .bar {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #455227;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* --- Contact Form --- */
.contact-form {
    max-width: 90%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.form-group select {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #455227;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

/* --- Services Page Layout Tweaks --- */
#services-offer {
    /* This controls the space between the image and the text block */
    gap: 60px; 
}

#services-offer img {
    /* This controls the size of the image on the services page */
    max-width: 35%; 
}

/* --- Privacy Policy Page Layout --- */
#privacy-policy-content {
    max-width: 950px; /* This is your new "playground" value! */
    margin: 40px auto; /* 'auto' centers the block on the page */
    text-align: left;  /* Ensures the text inside is left-aligned */
}

/* --- Resources Page --- */

.resources-content {
  max-width: 900px;
}

.resource-item {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 36px 0 42px;
}

.resource-text {
  flex: 1;
  min-width: 0;
}

.resource-text h2 {
  margin-top: 0;
}

.resource-image-link {
  flex: 0 0 260px;
  display: block;
}

.resource-cover {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.resource-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* --- FAQ Page Top Alignment Override --- */
#faq-intro,
#faq-details,
#faq-concerns {
    align-items: flex-start;
}

/* --- Resources Page --- */
.resources-content {
  max-width: 900px;
}

.resources-content h1 {
  margin-bottom: 18px;
}

.resources-content h2 {
  margin-top: 36px;
}

.resources-content ul {
  padding-left: 24px;
}

.resources-content li {
  margin-bottom: 12px;
}


/* ... (rest of form styles are fine) ... */
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: #455227; }
.form-group input, .form-group textarea { width: calc(100% - 22px); padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 16px; color: #455227; background-color: #f9f9f9; box-sizing: border-box; }
.form-group textarea { resize: vertical; }
.contact-form button { display: inline-block; padding: 10px 20px; background-color: #455227; color: #fff; border: none; border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; }
.contact-form button:hover { background-color: #333; }


/* --- Media Queries for Responsive Design --- */

/* Small tablets and large phones (<= 900px) */
@media (max-width: 900px) {
    header {
        padding: 0px;
    }

    header nav{ padding: 15px; }

    :root { --header-offset: 210px; }

    /* --- Start of Mobile Navigation Logic (The FIXED Version) --- */
    nav {
        position: relative;
        justify-content: center;
        min-height: 150px; /* Give space for the logo */
    }

    .hamburger-menu {
        display: flex;
        position: absolute;
        top: 50%;
        right: 15px; /* Positioned to the right */
        transform: translateY(-50%);
    }

    .logo {
        height: 150px; /* <--- THIS IS NOW YOUR SINGLE CONTROL FOR MOBILE LOGO SIZE */
        width: auto;
        margin: 0;
    }

    .nav-links {
        display: none; /* Hide the text links by default */
        position: absolute;
        top: 100px; 
        left: 0;
        width: 100%;
        background-color: #F4EAE1;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        gap: 0;
    }

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

    .nav-links a {
        padding: 15px 0;
        width: 100%;
        text-align: center;
    }
    /* --- End of Mobile Navigation Logic --- */


    /* --- Your Other Mobile Styles --- */

    .image-text-section {
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .image-text-section img,
    .image-text-section .text-content {
       max-width: 90%;
       min-width: unset;
       flex: none;
       width: 100%;
    }

     .image-text-section img {
        margin-bottom: 20px;
     }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    /* Blog hero on mobile: text first, image second */
    .blog-page .blog-hero-split{
      flex-direction: column-reverse;
      align-items: stretch;
    }

    .blog-page .blog-hero-image{
      width: 100%;
      max-width: 100%;
    }

    /* --- FAQ Page Reordering --- */
    #faq-details img {
        order: 1;
    }
    #faq-details .text-content {
        order: 2;
    }

    #services-offer img {
    /* On mobile, ignore the 35% desktop rule and let the image be much larger */
    max-width: 90%;
    }

    .section > .page{
        padding: 40px 20px;
    }

    .social-links{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 14px;
    }

    .social-links a img{
    width: 26px;
    height: 26px;
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .social-links a:hover img{
    opacity: 0.75;
    transform: translateY(-1px);
    }

    .image-text-section .profile-image{
        max-width: 200px;     /* try 180–220 */
        margin: 0 auto 16px;  /* centers it when stacked */
    }

    .image-text-section img{
        min-width: 0;
        max-width: 100%;
    }

    body.home #support ul{
        font-size: 17px;
        line-height: 1.6; /* or 1.7 if you prefer */
    }

    body.home #support ul li b{
        font-size: 17px;
    }

    /* MOBILE: Make all home-page section cards the same width/padding */
    body.home .section > .page,
    body.home .section--transparent .page,
    body.home .section--alt > .page{
        padding: 40px 20px;  /* match the Areas section */
    }

    /* MOBILE: Remove extra width/padding from image-text-section wrappers */
    body.home .page.image-text-section{
        max-width: 100%;
        margin: 0 auto;
    }

    body.home .image-text-section{
        max-width: 100%;
        margin: 0;
        padding: 0;          /* IMPORTANT: prevents “double padding” */
    }

    /* --- Home mobile consistency --- */

    /* 1) Remove the extra wrapper padding that causes the purple area */
    .image-text-section{
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0 auto;
    }

    /* 2) Make all section cards match Section 4 padding */
    body.home .section > .page,
    body.home .section--transparent .page,
    body.home .section--alt > .page{
        padding: 40px 20px;
    }

    /* Resources page mobile layout */
    .resource-item {
      flex-direction: column;
      gap: 22px;
    }

    .resource-image-link {
      flex: none;
      width: 100%;
      max-width: 240px;
      margin: 0 auto;
      order: 2;
    }

    .resource-text {
      order: 1;
    }

    .resource-links {
      flex-direction: column;
      gap: 8px;
    }

}

/* Larger tablets (901px - 1024px) */
@media (min-width: 901px) and (max-width: 1024px) {
    .logo {
        height: 120px; /* Adjusted Tablet Logo Size */
    }
    :root { --header-offset: 180px; }
    .nav-links {
        gap: 25px;
    }
    .image-text-section {
        margin-top: 0px; /* Drastically reduces the space above */
        margin-bottom: 0px; /* And below the sections */
    }
    header{ padding: 0; }
    header nav{ padding: 5px 20px; }
}

/* Desktops and larger screens (>= 1025px) */
@media (min-width: 1025px) {
    .logo {
        height: 120px; /* Back to full desktop size */
    }
    .nav-links {
        gap: 50px;
    }
}

/* --- FAQ Page Image Size Override --- */
#faq-intro img,
#faq-details img,
#faq-concerns img {
    max-width: 500px; /* Or 350px, or whatever looks good on desktop */
}

footer .social-links{
        margin-top: 12px;
        display: flex;
        justify-content: center;
        gap: 14px;
    }

    footer .social-links img{
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        display: block;
    }