/*
  RootedRefuah Stylesheet

  This stylesheet defines the colour palette, layout and responsiveness for
  RootedRefuah.  The design uses earthy greens and deep blues to evoke a
  calming, nature‑inspired feel while maintaining strong contrast for
  readability.  Sections are clearly delineated with generous spacing and
  intuitive typography.  Utility classes such as .section and .container
  provide consistent margins and widths across the site.
*/

/* CSS Variables for easy theming */
:root {
    /*
      Colour palette

      In response to user feedback that the site felt too dark, the palette has been
      completely lightened and softened.  The new palette takes inspiration from
      cherry blossoms and springtime – warm creams for backgrounds, pale pinks
      for secondary panels, and deeper rose tones for accents and highlights.  Text
      colours have been inverted to a deep grey to maintain contrast on light
      backgrounds.
    */
    --color-bg: #fdf8f5;            /* Very light cream background */
    --color-secondary: #f8ebe8;     /* Pale pink for secondary panels */
    --color-accent: #c25b8a;        /* Rose accent colour for buttons and links */
    --color-highlight: #e8a5b0;     /* Lighter pink highlight colour */
    --color-text: #333333;          /* Dark grey text for readability */
    --color-muted: #666666;         /* Muted dark grey for secondary text */
    --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --transition: all 0.3s ease;
    --max-width: 1100px;
}

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

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--color-highlight);
}

/* Containers */
.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    /* Use a semi‑opaque panel in the secondary hue for the fixed navbar to
       distinguish it from the hero while maintaining the light palette */
    background: rgba(248,235,232, 0.9);
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0;
}
.logo {
    /* unused when using image logo; keep for fallback */
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text);
}
.logo .accent {
    color: var(--color-accent);
}

/* Logo combination with icon and text */
.logo-combo {
    display: flex;
    align-items: center;
}
.icon-img {
    /*
      Match the height of the first letter of the brand name.
      Using a relative unit (rem) ensures the icon scales with the
      surrounding text, keeping the sprout emblem proportional to the
      capital “R” in RootedRefuah.  The width is auto to preserve the
      aspect ratio of the PNG, and a small margin separates the icon
      from the text.
    */
    height: 1.5rem;
    width: auto;
    margin-right: 0.5rem;
}
.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text);
}

/* Colour for the accent portion of the brand name within the logo text */
.logo-text .accent {
    color: var(--color-accent);
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}
.nav-links li a {
    color: var(--color-text);
    font-weight: 500;
}
.nav-links li a:hover {
    color: var(--color-accent);
}

/* Hamburger Menu for mobile */
.hamburger {
    display: none;
    font-size: 1.5rem;
    color: var(--color-accent);
    cursor: pointer;
}

/* Mobile navigation styles */

/* Hero Section */
.hero {
    position: relative;
    min-height: 90vh;
    /*
      The hero now uses a custom cherry blossom illustration to set a warm,
      inviting tone for the site.  This file is generated separately and
      imported via the images folder.  See hero.png for details.
    */
    background: url('images/hero.png') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 6rem; /* offset for nav */
}

/* Blog Hero

   Blog pages share the hero component but require a more modest vertical
   footprint.  On larger screens the hero remains half the viewport height,
   while on mobile devices the image background is removed entirely to
   improve loading and readability.  A lighter overlay is used to keep text
   legible on the pastel background. */
.blog-hero {
    min-height: 50vh;
    background: url('images/hero.png') center/cover no-repeat;
}
.blog-hero .hero-overlay {
    background: rgba(255,255,255,0.5);
}
@media (max-width: 768px) {
    .blog-hero {
        min-height: 30vh;
        /* Remove the image on small screens to prevent redundant text over
           background art and to reduce load time.  Instead use a solid
           secondary colour as the hero background. */
        background: var(--color-secondary);
    }
    .blog-hero .hero-overlay {
        background: var(--color-secondary);
    }
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Lighten the hero overlay to allow more of the soft background image
       to shine through. A semi‑transparent white overlay brings a brighter
       feel compared to the previous dark green. */
    background: rgba(255,255,255,0.6);
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--color-muted);
}
.hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Lightened background for hero features – gently tinted with the
       highlight colour */
    background: rgba(232,165,176,0.15);
    padding: 0.6rem 1rem;
    border-radius: 30px;
    backdrop-filter: blur(3px);
    transition: var(--transition);
}
.feature-item i {
    color: var(--color-highlight);
    font-size: 1.2rem;
}
.feature-item span {
    font-size: 0.95rem;
    color: var(--color-text);
}
.feature-item:hover {
    background: rgba(232,165,176,0.25);
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
    /* Adjust navbar for mobile */
    .nav-content {
        flex-direction: row;
        align-items: center;
    }
    /* Display the hamburger icon on mobile.  The navigation links are
       hidden by default and are revealed when the .open class is toggled
       via JavaScript.  Links stack vertically when visible. */
    .hamburger {
        display: block;
    }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 0.5rem;
        gap: 0.5rem;
    }
    .nav-links.open {
        display: flex;
    }
    .nav-links li {
        margin: 0;
    }
    .hero {
        min-height: 70vh;
        padding-top: 5rem;
    }
    .hero h1 {
        font-size: 1.8rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .feature-item {
        flex: 1 1 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    .service-cards {
        flex-direction: column;
    }
    .card {
        margin-bottom: 1.5rem;
    }
    .blog-previews {
        flex-direction: column;
    }
    .appointment .btn-center,
    .blog-highlights .btn-center {
        text-align: center;
    }
    .contact-container {
        flex-direction: column;
    }
    .contact-info {
        margin-top: 2rem;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.primary-btn {
    background: var(--color-accent);
    color: var(--color-bg);
}
.primary-btn:hover {
    background: var(--color-highlight);
}
.secondary-btn {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}
.secondary-btn:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}
.tertiary-btn {
    background: var(--color-secondary);
    color: var(--color-text);
}
.tertiary-btn:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* Sections */
.section {
    padding: 4rem 0;
}
.services h2,
.philosophy h2,
.blog-highlights h2,
.appointment h2,
.contact h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: var(--color-highlight);
}

/* Service Cards */
.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}
.card {
    background: var(--color-secondary);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    transition: var(--transition);
}
.card i {
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    color: var(--color-highlight);
}
.card p {
    font-size: 0.95rem;
    color: var(--color-muted);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Philosophy */
.philosophy {
    background: var(--color-secondary);
    text-align: center;
}
.philosophy p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1rem;
    color: var(--color-muted);
    line-height: 1.8;
}

/* Blog Highlights */
.blog-highlights {
    background: var(--color-bg);
}
.blog-previews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.blog-card {
    background: var(--color-secondary);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}
.blog-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.blog-card h3 {
    padding: 1rem;
    font-size: 1.3rem;
    color: var(--color-highlight);
}
.blog-card p {
    padding: 0 1rem 1.5rem 1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.btn-center {
    text-align: center;
    margin-top: 2rem;
}

/* Appointment */
.appointment {
    background: var(--color-secondary);
    text-align: center;
}
.appointment p {
    max-width: 700px;
    margin: 0 auto 1.5rem;
    color: var(--color-muted);
}

/* Contact */
.contact {
    background: var(--color-bg);
}
.contact-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-form label {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--color-highlight);
}
.contact-form input,
.contact-form textarea {
    padding: 0.6rem;
    background: var(--color-secondary);
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-highlight);
}
.contact-info h2 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: var(--color-highlight);
}
.contact-info p {
    margin-bottom: 0.7rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}
.contact-info a {
    color: var(--color-accent);
}

/* Footer */
.footer {
    background: var(--color-secondary);
    padding: 1.5rem 0;
    text-align: center;
}
.footer-logo {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}
.footer-logo .accent {
    color: var(--color-accent);
}
.footer p {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    .nav-links {
        gap: 1rem;
    }
    .service-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .blog-previews {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}