/* =========================================================
   Liz Flick, MFT — shared stylesheet
   Extracted 28 Aug 2026 from the <style> blocks that were
   previously pasted into index, services, meetliz, team and faq.

   Those five copies had drifted apart. meetliz.html and faq.html
   were missing the @media (max-width:1100px) block the other three
   had, which is why the hamburger button rendered off-screen on
   those two pages. Keeping one file is what stops that recurring.

   privacy-policy.html and terms.html keep their own small inline
   styles — they are a different, simpler layout with no navigation,
   and were not part of the duplication.

   CHANGE ONE RULE HERE AND IT APPLIES EVERYWHERE.
   Do not paste these rules back into a page.
   ========================================================= */

/* --- CSS Variables & Reset --- */
:root {
    --primary-color: #2c5d50;
    --secondary-color: #8fb3a5;
    --cta-green: #a8c2b8; /* Light Green for Book a Consult */
    --accent-color: #d4a373;
    --text-color: #333333;
    --light-bg: #f7f7f5;
    --white: #ffffff;
    --font-heading: 'Georgia', serif;
    --font-body: 'Helvetica Neue', Arial, sans-serif;
    --header-h: 90px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--text-color); line-height: 1.8; background-color: var(--white); font-size: 1.15rem; }
h1, h2, h3 { font-family: var(--font-heading); color: var(--primary-color); margin-bottom: 1rem; line-height: 1.3; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; }

/* services.html set `ul { list-style: disc; margin-left: 40px }`
   globally in its own copy. Scoped to the service copy blocks here so
   those bullets look exactly as they did, without turning the nav or
   meetliz's custom credentials bullets into discs too. */
.service-text ul { list-style: disc; margin-left: 40px; margin-bottom: 20px; }

/* --- Buttons --- */
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s;
    border: 2px solid var(--primary-color);
    cursor: pointer;
}
/* The previous rule was:
       .btn:hover { background-color: transparent; color: var(--white); }
   which removed the dark background but kept the text white, so every
   button turned white-on-near-white and the label disappeared while
   the pointer was over it. Inverting to dark-on-light keeps the label
   readable and preserves the outlined hover look that was intended. */
.btn:hover { background-color: transparent; color: var(--primary-color); }

.btn-light-green { background-color: var(--cta-green); border-color: var(--cta-green); }
.btn-light-green:hover { background-color: transparent; color: var(--primary-color); }

/* --- Header & Navigation --- */
header { background-color: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: fixed; width: 100%; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); padding: 0 10px; }

/* Two-line lockup. The old single line ran to 42 characters with
   white-space:nowrap, which is what crowded the hamburger off-screen
   on narrow viewports. Name and descriptor now stack, so the whole
   mark is narrower than the name line alone used to be. */
.logo {
    display: block;
    font-family: var(--font-heading);
    color: var(--primary-color);
    white-space: normal;
    line-height: 1.2;
}
.logo .logo-name {
    display: block;
    font-size: 1.35rem;
    font-weight: bold;
    letter-spacing: -0.01em;
}
.logo .logo-tagline {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #55625e;              /* 6.37:1 on white */
    margin-top: 4px;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-links a {
    font-weight: 500;
    color: var(--text-color);
    transition: color 0.3s;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.nav-links a:hover { color: var(--primary-color); }
.nav-links .btn { padding: 8px 18px; font-size: 0.9rem; }

.mobile-menu { display: none; font-size: 1.5rem; cursor: pointer; padding: 5px; border: 1px solid #ddd; border-radius: 5px; transition: background 0.3s; background: var(--white); color: var(--text-color); flex-shrink: 0; }
.mobile-menu:hover { background-color: #f0f0f0; }

/* --- Hero (index.html) --- */
.hero { background-color: var(--light-bg); padding-top: 120px; min-height: 90vh; display: flex; align-items: center; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-content h1 { font-size: 3.5rem; margin-bottom: 1.5rem; }
.hero-content p { font-size: 1.2rem; margin-bottom: 2rem; color: #555; }
.hero-image-container { background-color: var(--secondary-color); height: 500px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-image-container img { width: 100%; height: 100%; object-fit: cover; }

/* --- Preview cards (index.html) --- */
.preview-section { text-align: center; background-color: var(--white); }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 40px; }
.preview-card { padding: 30px; border: 1px solid #eee; border-radius: 8px; }

/* --- Contact (index.html) --- */
.contact { background-color: var(--light-bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-info { padding-top: 10px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 14px 18px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
}
.contact-form textarea { height: 140px; margin-bottom: 25px; }

/* --- Interior page header (services, team, faq) --- */
.page-header { padding-top: 140px; background-color: var(--light-bg); text-align: center; padding-bottom: 60px; }
/* Only faq.html sized this heading in its own copy; services.html sets
   the same size inline on the element, and team.html deliberately left
   it at the browser default. Scoped so team's heading is not resized. */
.faq-header h1 { font-size: 2.5rem; }

/* --- Services --- */
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 80px; align-items: center; }
.service-text h2 { color: var(--primary-color); }
.service-img { background: #e8e8e8; height: 400px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; }
.highlight-section { background-color: var(--light-bg); padding: 50px; border-radius: 10px; }

/* --- Bio page (meetliz.html) --- */
.bio-header { padding-top: 140px; background-color: var(--light-bg); text-align: center; padding-bottom: 60px; }
.bio-header p { font-size: 1.2rem; color: #555; margin-top: 10px; }
.bio-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; margin-bottom: 60px; }
.bio-image { width: 100%; height: 500px; object-fit: cover; border-radius: 10px; display: block; }
.bio-content h2 { color: var(--accent-color); margin-bottom: 15px; margin-top: 30px; }
.bio-content p { margin-bottom: 1.2rem; color: #444; line-height: 1.8; }
.credentials-list { margin-top: 15px; padding-left: 20px; }
.credentials-list li { margin-bottom: 10px; color: #555; position: relative; padding-left: 20px; }
.credentials-list li::before { content: "•"; color: var(--accent-color); position: absolute; left: 0; font-weight: bold; }

/* --- Team --- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.team-card { background: var(--white); border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform 0.3s; }
.team-card:hover { transform: translateY(-5px); }
.team-img-container { height: 300px; background-color: #e8e8e8; display: flex; align-items: center; justify-content: center; color: #777; font-size: 0.9rem; overflow: hidden; }
.team-img-container img { max-width: 100%; max-height: 100%; object-fit: cover; }
.team-info { padding: 25px; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; }
.team-info h3 { margin-bottom: 5px; font-size: 1.3rem; }
/* team.html defined --accent-color as #a8c2b8 in its own copy, while
   every other page defined it as #d4a373. The variable is now the tan
   used elsewhere, so this title keeps its original light green by
   naming the colour directly rather than silently changing. */
.team-info .title { font-style: italic; color: #a8c2b8; margin-bottom: 12px; display: block; font-size: 0.95rem; }
.team-info p { font-size: 0.9rem; color: #555; line-height: 1.6; }

/* --- FAQ --- */
.faq-item { border-bottom: 1px solid #eee; padding: 35px 0; }
.faq-question { font-weight: bold; font-size: 1.25rem; color: var(--primary-color); margin-bottom: 15px; }
.faq-answer { color: #555; }

/* --- SimplePractice widget buttons ---
   SimplePractice ships this CSS inline with every embed snippet, so a
   page with three widgets would carry three identical <style> blocks.
   It lives here once instead, restyled from SimplePractice's default
   blue (#1371C8) to the practice green so the booking buttons match
   the rest of the site. Appearance only — every data-spwidget-*
   attribute in the markup is exactly as SimplePractice generated it,
   so the widget still binds and behaves normally. */
.spwidget-button-wrapper { text-align: center; }
.spwidget-button {
    display: inline-block;
    padding: 12px 30px;
    color: var(--white);
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}
.spwidget-button:hover { background: transparent; color: var(--primary-color); }
.spwidget-button:active { box-shadow: 0 1px 3px rgba(0, 0, 0, .15) inset; }

/* Sits at the foot of each therapist's card */
.team-info .spwidget-button-wrapper { margin-top: 20px; }

/* The nav "Book a Consult" button is now the practice-wide
   SimplePractice Appointment-Request widget. These rules give it the
   same size and light-green treatment the plain button had, so the
   header looks unchanged. */
.nav-links .spwidget-button-wrapper { display: inline-block; }
.nav-links .spwidget-button {
    padding: 8px 18px;
    font-size: 0.9rem;
    background: var(--cta-green);
    border-color: var(--cta-green);
    /* The old "Book a Consult" button was white on this light green,
       which measures 1.90:1 — well under the 4.5:1 minimum and hard to
       read. #21463d on the same green is 5.51:1 and keeps the light
       green treatment the header was designed around. */
    color: #21463d;
}
.nav-links .spwidget-button:hover {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* --- Contact page --- */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 20px;
}
.contact-page-block {
    background: var(--light-bg);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px 35px;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.contact-page-block h2 { font-size: 1.5rem; }
.contact-page-block p { color: #555; margin-bottom: 25px; flex-grow: 1; }
.contact-page-details {
    margin-top: 50px;
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 35px;
}
.contact-page-details p { margin-bottom: 6px; }

/* =========================================================
   Accessibility
   ========================================================= */

/* Lets keyboard and screen-reader users jump past the nav. */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--primary-color); color: var(--white);
    padding: 12px 20px; z-index: 2000; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* There was no visible focus state anywhere, so tabbing through the
   site gave no indication of where you were. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}
footer a:focus-visible,
.site-disclaimer a:focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Crisis line, sitewide footer --- */
.footer-crisis {
    color: #e2e2e2;
    font-size: 0.95rem;
    margin-bottom: 14px;
    line-height: 1.6;
}
.footer-crisis a { color: var(--white); text-decoration: underline; }

/* --- Supervision note, foot of the team page --- */
.team-supervision {
    max-width: 900px;
    margin: 55px auto 0;
    padding-top: 28px;
    border-top: 1px solid #e4e4e0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
    text-align: center;
}

/* --- Contrast corrections (all measured against WCAG AA 4.5:1) --- */
/* was #a8c2b8 on white = 1.90:1 */
.team-info .title { color: #4f6f65; }
/* was #d4a373 on white = 2.26:1 */
.bio-content h2 { color: #8f6425; }
.credentials-list li::before { color: #8f6425; }

/* Keeps the FAQ questions looking identical now that they are real
   headings rather than divs, so screen readers can navigate them. */
h2.faq-question {
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    line-height: 1.8;
}
/* Team card names became h2 for correct heading order (h1 -> h3 skipped a level) */
.team-info h2 { margin-bottom: 5px; font-size: 1.3rem; font-family: var(--font-heading); line-height: 1.3; }

/* --- Footer --- */
footer { background-color: #222; color: #aaa; padding: 40px 0; text-align: center; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
    /* meetliz.html and faq.html never had this block. */
    .nav-links { gap: 10px; }
    .logo .logo-name { font-size: 1.2rem; }
    .logo .logo-tagline { font-size: 0.67rem; letter-spacing: 0.11em; }
}

@media (max-width: 900px) {
    .hero-grid, .contact-grid { grid-template-columns: 1fr; }
    .preview-grid { grid-template-columns: 1fr; max-width: 400px; margin: 40px auto 0; }
    .hero-content h1 { font-size: 2.5rem; }
    .service-detail { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .bio-grid { grid-template-columns: 1fr; }
    .bio-image { height: 300px; }
    .faq-header h1 { font-size: 2rem; }

    /* -----------------------------------------------------
       MOBILE NAVIGATION
       Previously `.nav-links.show { display: flex }` was the only
       change at this width, which left the six links laid out as a
       horizontal row inside a 90px-tall header. At phone widths the
       row ran straight off the right edge — only the first link was
       ever visible. The open menu is now a stacked panel dropped
       below the header.
       ----------------------------------------------------- */
    .mobile-menu { display: block; }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background: var(--white);
        padding: 12px 24px 22px;
        border-top: 1px solid #eee;
        box-shadow: 0 10px 22px rgba(0,0,0,0.10);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }
    .nav-links.show { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a {
        display: block;
        padding: 14px 2px;
        font-size: 1.05rem;
        border-bottom: 1px solid #eee;
    }
    .nav-links .btn,
    .nav-links .spwidget-button {
        text-align: center;
        margin-top: 16px;
        border-bottom: none;
        padding: 14px 18px;
        font-size: 1rem;
    }
    .nav-links .spwidget-button-wrapper { display: block; width: 100%; }
    .nav-links .spwidget-button { display: block; }

    .contact-page-grid { grid-template-columns: 1fr; gap: 25px; }

    /* The logo's `white-space: nowrap` was the second half of the
       problem: the full practice name could not fit beside the
       hamburger, so on meetliz.html and faq.html — the two pages
       missing the 1100px rule above — the button was pushed past the
       right edge of the screen and the menu could not be opened at
       all. The wording is unchanged; it is simply allowed to wrap and
       is held clear of the button. */
    .logo {
        white-space: normal;
        line-height: 1.2;
        max-width: calc(100% - 60px);
    }
    .logo .logo-name { font-size: 1.12rem; }
    .logo .logo-tagline { font-size: 0.62rem; letter-spacing: 0.1em; margin-top: 3px; }
}

@media (max-width: 600px) {
    .hero-content h1 { font-size: 2.1rem; }
    .hero-image-container { height: 320px; }
    .service-img { height: 280px; }
    .highlight-section { padding: 30px 25px; }
    .logo .logo-name { font-size: 1.05rem; }
    .logo .logo-tagline { font-size: 0.58rem; }
}