/*
============================================================
Manual Rehab NYC
components.css

Purpose:
Reusable visual components used throughout the website.

============================================================
*/


/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* Hero */

/* About Preview */

/* Clinical Soft Tissue Work */

/* Conditions */

/* Learning Center */

/* Homepage CTA */


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.75rem 1.75rem;

    border-radius: var(--radius-round);

    font-size: var(--font-size-base);

    font-weight: 600;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

    cursor: pointer;

}


.btn:hover {

    transform: translateY(-2px);

}


/* Primary Button */

.btn-primary {

    background-color: var(--color-primary);

    color: var(--color-surface);

}

.btn-primary,
.btn-primary:visited {

    color: var(--color-surface);

}


.btn-primary:hover {

    background-color: var(--color-primary-light);

    color: var(--color-surface);

}


/* Secondary Button */

.btn-secondary {

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

    color: var(--color-surface);

}

.btn-secondary,
.btn-secondary:visited {

    color: var(--color-surface);

}

.btn-secondary:hover {

    background-color: var(--color-accent-light);

    color: var(--color-text);

}


/* Outline Button */

.btn-outline {

    border: 1px solid var(--color-primary);

    color: var(--color-primary);

}


.btn-outline:hover {

    background-color: var(--color-primary);

    color: var(--color-surface);

}


/* ==========================================================================
   Cards
   ========================================================================== */

.card {

    background-color: var(--color-surface);

    padding: var(--space-lg);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}


.card:hover {

    box-shadow: var(--shadow-md);

}


/* ==========================================================================
   Section Header
   ========================================================================== */

.section-header {

    max-width: 700px;

    margin-bottom: var(--space-xl);

}


.section-header.center {

    margin-inline: auto;

    text-align: center;

}


/* ==========================================================================
   Callout
   ========================================================================== */

.callout {

    background-color: var(--color-surface);

    border-left: 4px solid var(--color-accent);

    padding: var(--space-lg);

    border-radius: var(--radius-sm);

}


.callout p {

    margin: 0;

}


/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {

    min-height: 75vh;

    display: flex;

    align-items: center;

}


.hero-content h1 {

    margin-bottom: var(--space-md);

}


.hero-content .lead {

    max-width: 55ch;

    margin-bottom: var(--space-lg);

}


.hero-image img {

    width: 100%;

    max-width: 520px;

    aspect-ratio: 5 / 4;

    border-radius: var(--radius-lg);

}


/* ==========================================================================
   About Preview (on Homepage) and CSTW Preview
   ========================================================================== */

.about-preview {

    background-color: var(--color-surface);

}

.cstw-preview {
    background-color: var(--color-background);
}

.about-preview-image,
.cstw-image {

    position: relative;

    width: 100%;

    max-width: 520px;

}


.cstw-content h2 {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.cstw-content .lead {
    margin-bottom: var(--space-md);
}

.cstw-content p:not(.eyebrow) {
    margin-bottom: var(--space-md);
}


.cstw-content .btn {
    margin-top: var(--space-sm);
}



/*
Full-size beige accent behind the photograph.
*/

.about-preview-image::before {
    content: "";
    position: absolute;

    inset: 1rem -1rem -1rem 1rem;

    background-color: var(--color-accent-light);
    border-radius: var(--radius-lg);
    opacity: 0.35;
}

.about-preview-image img,
.cstw-image img {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;

    /* Use the same ratio as the hero image */
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: center;

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


.about-preview-content {

    max-width: 620px;

}


.about-preview-content h2 {

    margin-top: var(--space-sm);

    margin-bottom: var(--space-lg);

}


.about-preview-content .lead {

    margin-bottom: var(--space-md);

}


.about-preview-content p:not(.eyebrow) {

    margin-bottom: var(--space-md);

}


.about-preview-content .btn {

    margin-top: var(--space-sm);

}



/* ==========================================================================
   Conditions Preview
   ========================================================================== */

.conditions-preview {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
}

.section-heading {
    max-width: 720px;
    margin-bottom: var(--space-md);
}

.conditions-section-heading {
    max-width: 720px;
    margin-bottom: var(--space-md);
}

.section-heading h2 {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
}

.section-intro {
    max-width: 640px;
    font-size: var(--font-size-lg);
}

.conditions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.condition-card {
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.condition-card h3 {
    margin-bottom: var(--space-sm);
}

.condition-card p {
    margin-bottom: 0;
}

.conditions-action {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
}



/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
    background-color: var(--color-surface);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--space-lg);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
}

.testimonial-card > p {
    margin-bottom: var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    line-height: 1.5;
}

.testimonial-card footer {
    margin-top: auto;
}

.testimonial-card cite {
    display: block;
    font-style: normal;
    font-weight: 600;
}

.testimonial-card span {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}



/* ==========================================================================
   Learning Center
   ========================================================================== */

.learning-center {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.learning-center .section-heading {
    margin-bottom: var(--space-lg);
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.article-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);

    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.article-type {
    display: inline-block;
    align-self: flex-start;

    margin-bottom: var(--space-md);

    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.article-card h3 {
    margin-bottom: var(--space-sm);
}

.article-card p {
    margin-bottom: var(--space-md);
}

.article-card a {
    margin-top: auto;

    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.article-card a:hover,
.article-card a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.learning-action {
    margin-top: var(--space-lg);
    text-align: center;
}


/* ==========================================================================
   Homepage CTA
   ========================================================================== */

.homepage-cta {
    background-color: var(--color-primary);
    color: white;
    text-align: center;
    padding-block: var(--space-xl);
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
}

.homepage-cta .eyebrow {
    color: rgba(255,255,255,.75);
}

.homepage-cta h2 {
    color: white;
}

.homepage-cta p {
    margin-top: 10px;
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
}

.homepage-cta .btn {
    background: transparent;
    color: white;

    border: 2px solid white;

    padding: 1rem 2.5rem
}

.homepage-cta .btn:hover {
    background: white;
    color: var(--color-primary);
}





/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

/* Page Hero
   ========================================================================== */

.page-hero {
    background-color: var(--color-background);
    text-align: center;
}

.page-hero-content {
    max-width: 850px;
    margin: 0 auto;
}

.page-hero h1 {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}

.page-hero-intro {
    max-width: 700px;
    margin: var(--space-md) auto 0;
    font-size: var(--font-size-lg);
}


/* About Story
   ========================================================================== */

.about-story {
    background-color: var(--color-surface);
}

.about-story-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--space-xl);
}

.about-story-content h2,
.about-philosophy h2 {
    margin-bottom: var(--space-md);
}

.about-story-image {
    position: relative;
}

.about-story-image::before {
    content: "";
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    bottom: calc(var(--space-md) * -1);
    left: calc(var(--space-md) * -1);
    background-color: var(--color-background);
    z-index: 0;
}

.about-story-image img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 4;
    object-fit: cover;
    z-index: 1;
    border-radius: var(--radius-md);
}

.about-story-content p:last-child {
    margin-bottom: 0;
}


/* Philosophy
   ========================================================================== */

.about-philosophy {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
}

.narrow-content {
    max-width: 700px;
    margin: 0 auto;
}

.narrow-content h3 {
    margin-bottom: var(--space-sm);
}

.about-quote {
    margin: var(--space-xl) 0 0;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--color-accent);
}

.about-quote p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    line-height: 1.4;
    color: var(--color-primary);
}


/* Experience
   ========================================================================== */

.about-experience {
    background-color: var(--color-surface);
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.experience-item {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.experience-item h3 {
    margin-bottom: var(--space-sm);
}


/* What to Expect
   ========================================================================== */

.about-expectations {
    background-color: var(--color-background);
}

.about-expectations-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-xl);
}

.about-expectations-content {
    max-width: 700px;
}

.about-expectations-content p:last-of-type {
    margin-bottom: var(--space-md);
}



/* ==========================================================================
   TREATMENTS PAGE
   ========================================================================== */

/* Treatment Overview
   ========================================================================== */

.treatment-overview {
    background-color: var(--color-surface);
}

.treatment-overview-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-xl);
}

.treatment-overview h2 {
    margin-bottom: var(--space-md);
}

.treatment-overview-content {
    max-width: 700px;
}

.treatment-overview-content p:last-of-type {
    margin-bottom: var(--space-md);
}

.treatment-overview a {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #d9d9d9;
    text-underline-offset: 0.2rem;

    transition:
        color var(--transition-fast);
}


/* Conditions
   ========================================================================== */

.treatment-conditions {
    background-color: var(--color-background);
}

.treatment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.treatment-card {
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.treatment-card h3 {
    margin-bottom: var(--space-sm);
}

.treatment-card p {
    margin-bottom: 0;
}


/* Individualized Treatment
   ========================================================================== */

.individualized-treatment {
    background-color: var(--color-surface);
}

.individualized-treatment h2 {
    margin-bottom: var(--space-md);
}


/* Treatment Methods
   ========================================================================== */

.treatment-methods {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
}

.treatment-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.treatment-method {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.treatment-method h3 {
    margin-bottom: var(--space-sm);
}

.treatment-method p {
    margin-bottom: 0;
}



/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

/* Contact Hero
   ========================================================================== */

.contact-hero {
    text-align: center;
}

.contact-hero strong {
    letter-spacing: 0.02em;
    font-weight: 600;
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
    align-items: center;
    gap: var(--space-xl);
}

.contact-hero-content {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
}

.contact-hero .page-hero-intro {
    margin-left: auto;
    margin-right: auto;
}

.contact-hero-image img {
    display: block;
    width: 90%;
    aspect-ratio: 5 / 4;
    object-fit: contain;
}

/* Contact Main
   ========================================================================== */

.contact-main {
    background-color: var(--color-surface);
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(400px, 1.15fr);
    gap: var(--space-xl);
    align-items: start;
}

.contact-information {
    min-width: 0;
}

.contact-information h2 {
    margin-bottom: var(--space-md);
}

.contact-introduction {
    max-width: 600px;
}

.contact-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.contact-detail {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.contact-detail h3 {
    margin-bottom: var(--space-xs);
}

.contact-detail p {
    margin-bottom: 0;
}

.contact-detail a {

    color: inherit;

    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #d9d9d9;
    text-underline-offset: 0.2rem;

    transition:
        color var(--transition-fast);
}

.contact-detail a:hover,
.contact-detail a:focus-visible {

    color: var(--color-accent);

}

.contact-note {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
}


/* Contact Map
   ========================================================================== */

.contact-map {

    margin-top: var(--space-xl);

    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

}


.contact-map iframe {

    display: block;

    width: 100%;

    height: 320px;

    border: 0;

}



/* Contact Form
   ========================================================================== */

.contact-form-wrapper {
    padding: var(--space-xl);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.contact-form {
    display: grid;
    gap: var(--space-md);
}

.form-field {
    display: grid;
    gap: var(--space-xs);
}

.form-field label {
    font-weight: 600;
}

.optional {
    margin-left: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    color: var(--color-text);
    font: inherit;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-field textarea {
    min-height: 170px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.form-consent {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-sm);
}

.form-consent input {
    width: auto;
    margin-top: 0.3rem;
}

.form-consent label {
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.contact-form .btn {
    justify-self: start;
    margin-top: var(--space-sm);
}


/* Contact Next Steps
   ========================================================================== */

.contact-next-steps {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
}

.contact-next-steps h2 {
    margin-bottom: var(--space-md);
}




/* ==========================================================================
   FAQ PAGE
   ========================================================================== */

/* FAQ Introduction
   ========================================================================== */

.faq-introduction {
    background-color: var(--color-surface);
}

.faq-introduction h2 {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
}


/* FAQ Sections
   ========================================================================== */

.faq-section {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
}

.faq-section-alt {
    background-color: var(--color-surface);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-xl);
    align-items: start;
}

.faq-section-heading {
    max-width: 420px;
}

.faq-section-heading h2 {
    margin-bottom: 0;
}


/* FAQ List
   ========================================================================== */

.faq-list {
    border-top: 1px solid var(--color-border);
}

.faq-item {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.faq-item h3,h4 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.faq-item p {
    max-width: 720px;
    margin-bottom: 0;
}

.faq-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
    background-color: #333333;
    color: rgba(255, 255, 255, 0.8);
    padding-top: var(--space-lg);
    font-size: var(--font-size-sm);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-lg);
}

.footer-brand p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-sm);
}

.footer-logo {
    display: inline-block;
    margin-bottom: var(--space-sm);
}

.footer-logo-image {
    display: block;
    height: 72px;
    width: auto;
}

.footer-brand p {
    margin-bottom: 0;
}

.footer-navigation h3,
.footer-contact h3 {
    margin-bottom: var(--space-sm);

    color: #ffffff;

    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
}

.site-footer .footer-navigation a,
.site-footer .footer-contact a,
.site-footer .footer-contact p {
    font-family: "Inter", sans-serif;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.6;
}

.footer-navigation ul {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--color-accent);
}

.footer-contact p {
    margin-bottom: var(--space-sm);
}

.footer-bottom {
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.65);
}

.footer-bottom p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: inherit;
    text-align: center;
}