/* ==========================================================================
   Components CSS - Cards, Buttons, Nav, Accordion, Footer
   ========================================================================== */

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

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

.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

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

.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border-color: transparent;
}

.btn--ghost:hover {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.nav__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.nav__logo {
    display: flex;
    align-items: center;
}

.nav__logo img {
    height: 50px;
    width: auto;
}

.nav__menu {
    display: none;
    gap: var(--space-1);
    /* The text links are all one height, so this changes nothing for them. It
       is here for the icon-only webmail key, whose box is shorter than a line
       of text and would otherwise hang from the top of the row. */
    align-items: center;
}

.nav__link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.nav__link:hover,
.nav__link--active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Staff webmail. A tool for the practice, not a destination for patients, so
   it is kept quieter than the links beside it and must not compete with
   Kontakt for a visitor's attention. */
.nav__link--webmail {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* The practice's own accent rather than a neutral grey, so the key belongs
       to the palette instead of sitting on top of it - and it takes each
       location's colour for free, teal in Hof and green in Plauen. */
    color: var(--color-primary);
}

.nav__link--webmail svg {
    flex-shrink: 0;
}

/* On the desktop bar it is the icon alone, and faint until pointed at: staff
   are shown it once and then know where it lives, while a patient reading
   along the nav has nothing here to read. No dividing rule - the site uses
   none anywhere else, and it was the one part that looked bolted on. Spacing
   does the separating, and hover is the ordinary nav treatment so the key
   behaves like everything beside it. */
.nav__menu .nav__link--webmail {
    margin-left: var(--space-1);
    opacity: 0.45;
}

.nav__menu .nav__link--webmail:hover,
.nav__menu .nav__link--webmail:focus-visible {
    opacity: 1;
    color: var(--color-white);
}

/* In the stacked mobile menu the key keeps its label, so it needs less
   dimming to stay discreet. */
.nav__mobile-menu .nav__link--webmail {
    opacity: 0.75;
}

.nav__mobile-menu .nav__link--webmail:hover,
.nav__mobile-menu .nav__link--webmail:focus-visible {
    opacity: 1;
    color: var(--color-white);
}

.nav__accent-line {
    height: 3px;
    background-color: var(--color-primary);
}

/* Mobile Nav Toggle */
.nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav__toggle-bar {
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transition: all var(--transition-fast);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.nav__mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    flex-direction: column;
    gap: var(--space-2);
}

.nav__mobile-menu.is-open {
    display: flex;
}

/* Desktop Nav */
@media (min-width: 768px) {
    .nav__container {
        padding: var(--space-4) var(--space-6);
    }

    .nav__logo img {
        height: 60px;
    }

    .nav__menu {
        display: flex;
    }

    .nav__toggle {
        display: none;
    }

    .nav__mobile-menu {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .nav__container {
        padding: var(--space-4) var(--space-8);
    }

    .nav__link {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-base);
    }
}

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

.card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.card__content {
    padding: var(--space-6);
}

.card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.card__text {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: 1.6;
}

/* Team Card */
.team-card {
    text-align: center;
}

.team-card__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.team-card__content {
    padding: var(--space-5);
}

.team-card__name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 300;
    margin-bottom: var(--space-1);
}

.team-card__role {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.team-card__title {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.team-card__tagline {
    font-size: var(--text-sm);
    color: var(--color-text);
    font-style: italic;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.accordion__item {
    border-bottom: 1px solid var(--color-border);
}

.accordion__item:last-child {
    border-bottom: none;
}

.accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-white);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 300;
    color: var(--color-text);
    transition: background-color var(--transition-fast);
}

.accordion__header:hover {
    background-color: var(--color-primary-subtle);
}

.accordion__header[aria-expanded="true"] {
    background-color: var(--color-primary-subtle);
}

.accordion__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.accordion__header[aria-expanded="true"] .accordion__icon {
    transform: rotate(180deg);
}

.accordion__panel {
    display: none;
    padding: 0 var(--space-5) var(--space-5);
    background-color: var(--color-white);
}

.accordion__panel.is-open {
    display: block;
}

.accordion__content {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* An enumerated answer inside the FAQ accordion. base.css strips list markers
   from every ul, so a list that wants bullets asks for them back here. */
.faq-list {
    list-style: disc;
    margin: var(--space-3) 0;
    padding-left: var(--space-5);
}

.faq-list li {
    margin-bottom: var(--space-2);
}

/* Service Item within Accordion */
.service-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-light-grey);
}

.service-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.service-item__name {
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.service-item__description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background-color: var(--color-charcoal);
    color: var(--color-cream);
    padding: var(--space-8) 0;
}

.footer__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.footer__logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer__links {
    display: flex;
    gap: var(--space-6);
}

.footer__link {
    font-size: var(--text-sm);
    color: var(--color-cream);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.footer__link:hover {
    opacity: 1;
}

.footer__copyright {
    font-size: var(--text-xs);
    color: var(--color-mid-grey);
}

@media (min-width: 768px) {
    .footer__container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

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

.hero {
    background-color: var(--color-primary-subtle);
    text-align: center;
    padding: var(--space-12) var(--space-4);
}

.hero__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hero {
        padding: var(--space-16) var(--space-6);
    }

    .hero__title {
        font-size: var(--text-4xl);
    }

    .hero__subtitle {
        font-size: var(--text-xl);
    }
}

@media (min-width: 1024px) {
    .hero {
        padding: var(--space-20) var(--space-8);
    }

    .hero__title {
        font-size: var(--text-5xl);
    }
}

/* ==========================================================================
   Contact Info
   ========================================================================== */

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-block {
    background-color: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.contact-block__title {
    font-size: var(--text-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-block__item {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.contact-block__item:last-child {
    margin-bottom: 0;
}

.contact-block__label {
    font-weight: 500;
    min-width: 80px;
}

.contact-block__value {
    color: var(--color-text);
}

/* Hours Table */
.hours-table {
    width: 100%;
    border-collapse: collapse;
}

.hours-table td {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-light-grey);
}

.hours-table tr:last-child td {
    border-bottom: none;
}

.hours-table td:first-child {
    font-weight: 500;
}

.hours-table td:last-child {
    text-align: right;
    color: var(--color-text-secondary);
}

/* Map Container */
.map-container {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-6);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (min-width: 768px) {
    .contact-info {
        flex-direction: row;
    }

    .contact-block {
        flex: 1;
    }

    .map-container {
        height: 400px;
    }
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.faq-category {
    margin-bottom: var(--space-8);
}

.faq-category:last-child {
    margin-bottom: 0;
}

.faq-category__title {
    font-size: var(--text-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
}

/* ==========================================================================
   Content Sections
   ========================================================================== */

.content-section {
    margin-bottom: var(--space-12);
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section__image {
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.content-section__text {
    line-height: 1.8;
}

@media (min-width: 768px) {
    .content-section--with-image {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        align-items: center;
    }

    .content-section--with-image .content-section__image {
        margin-bottom: 0;
    }

    .content-section--reverse {
        direction: rtl;
    }

    .content-section--reverse > * {
        direction: ltr;
    }
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */

.back-to-top {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Draft Notice
   ==========================================================================
   Shown while data/site.json has draftContent set. Deliberately outside the
   location themes: it must not look like part of the practice's design, or
   reviewers will read it as page content rather than as a warning about it. */

.draft-notice {
    background-color: #FFF8E6;
    border: 1px solid #E8C989;
    border-left: 4px solid #D9982B;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    color: #7A5310;
}