/* ============================================================
   Meditando Junto — Identidade do diretório de terapeutas
   Tokens e padrões capturados do meditandojunto.com:
   - Header/hero coral #F6967B, logo escuro, links navy minúsculos
   - Títulos Quincy CF (self-hosted do próprio MJ), corpo IBM Plex Sans
   - Botões amarelos #E8D620 com texto navy (padrão "saber mais")
   - Seções navy #082433 com texto creme
   ============================================================ */

/* --- Quincy CF (arquivos .woff copiados do meditandojunto.com) --- */
@font-face {
    font-family: 'Quincy CF';
    src: url('../fonts/QuincyCF-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quincy CF';
    src: url('../fonts/QuincyCF-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quincy CF';
    src: url('../fonts/QuincyCF-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Quincy CF';
    src: url('../fonts/QuincyCF-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quincy CF';
    src: url('../fonts/QuincyCF-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Marca */
    --mj-coral: #F6967B;
    --mj-coral-dark: #EF8368;
    --mj-dusty-blue: #7AA7BF;
    --mj-pink: #D98BAA;
    --mj-navy: #082433;
    --mj-ink: #331108;          /* quase-preto quente usado nos títulos do MJ */
    --mj-link: #0069A1;
    --mj-wine: #72324C;
    --mj-yellow: #E8D620;       /* botões do MJ ("saber mais") */
    --mj-yellow-dark: #D4C410;
    /* Superfícies */
    --mj-cream: #F2F1E6;
    --mj-cream-pink: #F2E8E6;
    --mj-mint: #EAF2EB;
    --mj-blue-light: #E6EEF2;
    --mj-card: #FFFFFF;
    --mj-text: #262626;
    --mj-text-muted: #6F6F6F;

    --mj-serif: 'Quincy CF', 'Fraunces', Georgia, serif;
    --mj-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --mj-radius: 16px;
    --mj-shadow: 0 1px 2px rgba(8, 36, 51, .06), 0 8px 24px rgba(8, 36, 51, .08);
}

/* =================== Base =================== */
body.mj-layout {
    font-family: var(--mj-sans) !important;
    background: var(--mj-cream) !important;
    color: var(--mj-text) !important;
}

.mj-layout h1, .mj-layout h2, .mj-layout h3, .mj-layout h4,
.mj-layout .mc-profile-name,
.mj-layout .mj-serif {
    font-family: var(--mj-serif) !important;
    color: var(--mj-navy);
}

.mj-layout a:not(.btn):not(.mj-btn) {
    color: var(--mj-link);
}
.mj-layout a:not(.btn):not(.mj-btn):hover {
    color: var(--mj-navy);
}

/* =================== Header (coral, como o do MJ) =================== */
.mj-header {
    background: var(--mj-coral);
    box-shadow: 0 1px 0 rgba(8, 36, 51, .08);
    position: sticky;
    top: 0;
    z-index: 50;
}
.mj-header__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mj-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.mj-header__logo img {
    height: 34px;
    width: auto;
    display: block;
}
.mj-header__tag {
    font-family: var(--mj-serif);
    font-style: italic;
    color: var(--mj-navy);
    opacity: .75;
    font-size: .95rem;
    margin-left: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    .mj-header__tag { display: none; }
}
.mj-header__spacer { flex: 1; }
.mj-header__nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.mj-layout .mj-header__nav a.mj-nav-link {
    color: var(--mj-navy);
    font-weight: 500;
    font-size: .95rem;
    text-transform: lowercase;
    text-decoration: none;
    white-space: nowrap;
}
.mj-layout .mj-header__nav a.mj-nav-link:hover {
    color: var(--mj-navy);
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (max-width: 640px) {
    .mj-header__nav a.mj-nav-link.mj-nav-optional { display: none; }
}

/* Botão amarelo do MJ ("saber mais") */
.mj-btn,
.mj-layout .btn-primary.mj-btn,
.login .button-primary {
    display: inline-block;
    background: var(--mj-yellow) !important;
    border: none !important;
    color: var(--mj-navy) !important;
    font-family: var(--mj-sans);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    text-transform: lowercase;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: none;
    transition: background-color .15s ease;
}
.mj-btn:hover,
.mj-layout .btn-primary.mj-btn:hover,
.login .button-primary:hover {
    background: var(--mj-yellow-dark) !important;
    color: var(--mj-navy) !important;
}

/* Avatar do usuário logado no header */
.mj-header__user {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--mj-navy);
    text-decoration: none !important;
    font-weight: 600;
    font-size: .95rem;
}
.mj-header__user img {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(8, 36, 51, .25);
}
.mj-header__user span { white-space: nowrap; }
@media (max-width: 640px) {
    .mj-header__user span { display: none; }
}

/* =================== Hero do diretório =================== */
.mj-layout .mc-directory-intro {
    background: var(--mj-coral) !important;
    border-radius: var(--mj-radius);
    padding: 2rem 2.25rem !important;
    margin-top: 1.25rem;
    color: var(--mj-navy);
}
.mj-layout .mc-directory-intro p {
    color: var(--mj-navy);
}
.mj-layout .mc-directory-intro > p.font-bold,
.mj-layout .mc-directory-intro > p:first-child {
    font-family: var(--mj-serif) !important;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    margin: 0;
}
.mj-layout .mc-directory-intro > p.font-bold + br,
.mj-layout .mc-directory-intro br {
    display: none;
}
.mj-layout .mc-directory-intro > p.text-sm {
    font-size: 1rem !important;
    line-height: 1.55;
    opacity: .92;
    max-width: 56rem;
    margin: .85rem 0 0;
}
.mj-layout .mc-directory-intro .mc-directory-note {
    margin-top: 1.1rem;
    background: rgba(255, 255, 255, .55);
    border-radius: 10px;
    padding: .7rem 1rem;
}
.mj-layout .mc-directory-intro .mc-directory-note summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--mj-navy);
}
.mj-layout .mc-directory-intro .mc-directory-note p {
    margin: .5rem 0 0;
    font-size: .9rem !important;
    line-height: 1.5;
}

/* =================== Layout diretório =================== */
.mj-layout .mc-directory {
    max-width: 72rem;
}
.mj-layout .mc-directory-layout {
    gap: 1.25rem;
    align-items: flex-start;
}

/* =================== Painel de filtros =================== */
.mj-layout .mc-directory-filters-panel {
    background: var(--mj-card);
    border-radius: var(--mj-radius);
    box-shadow: var(--mj-shadow);
    padding: 1.25rem 1.25rem 1.4rem;
    width: 100%;
}
@media (min-width: 768px) {
    .mj-layout .mc-directory-filters-panel {
        width: 19rem;
        flex-shrink: 0;
        position: sticky;
        top: 4.5rem;
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
    }
}
.mj-layout .mc-directory-filters-panel > summary {
    font-family: var(--mj-serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mj-navy);
    cursor: pointer;
    list-style-position: inside;
    margin-bottom: .75rem;
}
.mj-layout .mc-directory-filters {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.mj-layout .mc-directory-filters .label {
    padding: 0 0 .3rem;
}
.mj-layout .mc-directory-filters .label-text {
    font-family: var(--mj-sans);
    font-weight: 600;
    font-size: .85rem;
    color: var(--mj-navy);
}
.mj-layout .mc-directory-filters .form-control {
    width: 100%;
}
.mj-layout .mc-directory-filters .space-y-1 > * + * {
    margin-top: .35rem;
}
.mj-layout .mc-directory-filters .space-y-1 label {
    font-size: .9rem;
    color: var(--mj-text);
    gap: .5rem;
}
.mj-layout .mc-directory-filters .space-y-1 label span {
    line-height: 1.3;
}

/* Inputs */
.mj-layout .input,
.mj-layout .select,
.mj-layout textarea {
    background: #fff !important;
    border: 1px solid #D9D5CB !important;
    border-radius: 8px !important;
    color: var(--mj-text) !important;
    font-family: var(--mj-sans);
    font-size: .95rem;
}
.mj-layout .input:focus,
.mj-layout .select:focus,
.mj-layout textarea:focus {
    outline: 2px solid var(--mj-coral) !important;
    outline-offset: 1px;
    border-color: var(--mj-coral) !important;
}
.mj-layout .checkbox {
    border: 1.5px solid #B9B3A6 !important;
    border-radius: 5px !important;
    background: #fff;
}
.mj-layout .checkbox:checked,
.mj-layout .checkbox:checked:focus {
    background-color: var(--mj-coral) !important;
    border-color: var(--mj-coral) !important;
    background-image: linear-gradient(-45deg, transparent 65%, var(--mj-coral) 65.99%),
        linear-gradient(45deg, transparent 75%, var(--mj-coral) 75.99%),
        linear-gradient(-45deg, var(--mj-coral) 40%, transparent 40.99%),
        linear-gradient(45deg, var(--mj-coral) 30%, var(--mj-navy) 30.99%, var(--mj-navy) 40%, transparent 40.99%),
        linear-gradient(-45deg, var(--mj-navy) 50%, var(--mj-coral) 50.99%);
}

/* Botão BUSCAR → amarelo MJ */
.mj-layout .mc-directory-filters .btn-primary,
.mj-layout .btn-primary {
    background: var(--mj-yellow) !important;
    border: none !important;
    color: var(--mj-navy) !important;
    font-weight: 600;
    text-transform: lowercase;
    border-radius: 8px;
    min-height: 2.5rem;
    padding: 0 1.4rem;
}
.mj-layout .mc-directory-filters .btn-primary:hover,
.mj-layout .btn-primary:hover {
    background: var(--mj-yellow-dark) !important;
}

/* =================== Resultados / cartões =================== */
.mj-layout .mc-directory-results {
    flex: 1;
    min-width: 0;
}
.mj-layout .mc-directory-results .border-b-blue-500,
.mj-layout .mc-directory-results .border-t-blue-500 {
    border-color: #D9D5CB !important;
}
.mj-layout .mc-directory-results .text-blue-500 a {
    color: var(--mj-link) !important;
    font-weight: 600;
}
.mj-layout .mc-directory-results > div:first-child {
    font-size: .95rem;
    color: var(--mj-text-muted);
}

.mj-layout .mc-directory-results .space-y-2 {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: .85rem;
}
.mj-layout .mc-directory-results .space-y-2 > * + * {
    margin-top: 0;
}

.mj-layout .mc-directory-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--mj-card);
    border-radius: var(--mj-radius);
    box-shadow: var(--mj-shadow);
    padding: 1rem 1.25rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mj-layout .mc-directory-card:hover {
    background: var(--mj-card) !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(8, 36, 51, .08), 0 14px 32px rgba(8, 36, 51, .12);
}
.mj-layout .mc-directory-card__image {
    width: 5.5rem !important;
    height: 5.5rem !important;
    flex-shrink: 0;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--mj-cream-pink);
}
.mj-layout .mc-directory-card__content {
    min-width: 0;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.mj-layout .mc-directory-card__content p {
    margin: 0;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}
.mj-layout .mc-directory-card__content p.text-lg {
    font-family: var(--mj-serif) !important;
    font-weight: 700;
    font-size: 1.3rem !important;
    line-height: 1.2;
    color: var(--mj-navy) !important;
}
.mj-layout .mc-directory-card__content p.text-gray-500,
.mj-layout .mc-directory-card__content p.truncate.text-gray-500 {
    color: var(--mj-text-muted) !important;
    font-size: .92rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}
.mj-layout .mc-directory-card__role,
.mj-layout .mc-directory-card__content p:not(.text-lg):not(.text-gray-500):not(:last-child) {
    color: var(--mj-wine);
    font-weight: 600;
    font-size: .88rem;
}
.mj-layout .mc-directory-card__content p:last-child {
    color: var(--mj-text-muted);
    font-size: .85rem;
}

/* =================== Página de perfil público =================== */
.mj-layout .mj-profile-card {
    background: var(--mj-card);
    border-radius: var(--mj-radius) !important;
    box-shadow: var(--mj-shadow) !important;
    padding-top: 2.5rem !important;
}
.mj-layout .mj-profile-card img.mask {
    box-shadow: 0 0 0 4px var(--mj-cream-pink), var(--mj-shadow);
}
.mj-layout .mc-profile-name {
    font-family: var(--mj-serif) !important;
    font-weight: 700;
    color: var(--mj-navy);
}
.mj-layout .mj-profile-card .font-bold {
    color: var(--mj-navy);
}
.mj-layout .mj-profile-card .italic {
    color: var(--mj-text-muted);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.mj-layout .mj-profile-card a {
    color: var(--mj-link);
    word-break: break-all;
}
@media (min-width: 640px) {
    .mj-layout .mj-profile-card a {
        word-break: normal;
    }
}
.mj-layout .mj-profile-card svg {
    color: var(--mj-coral-dark);
    flex-shrink: 0;
}

/* =================== Capa (perfil do terapeuta / edição) =================== */
.mj-cover {
    height: 12rem;
    width: 100%;
    background: linear-gradient(135deg, var(--mj-coral) 0%, var(--mj-pink) 55%, var(--mj-dusty-blue) 100%);
}

/* Cartões de aviso do tema (boas-vindas do perfil etc.).
   Exclui o hero do diretório (.mc-directory-intro), que fica coral. */
.mj-layout .bg-blue-50:not(.mc-directory-intro) {
    background-color: var(--mj-cream-pink) !important;
}
.mj-layout .ring-blue-500 {
    --tw-ring-color: var(--mj-coral) !important;
}

/* =================== Rodapé (navy do MJ) =================== */
.mj-layout .mc-site-footer,
.mc-site-footer {
    background: var(--mj-navy);
    color: var(--mj-cream);
    margin-top: 3rem;
    padding: 2.25rem 1rem;
}
.mc-site-footer__inner {
    max-width: 72rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.mc-site-footer__brand strong {
    font-family: var(--mj-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--mj-cream);
    display: block;
}
.mc-site-footer__brand span {
    color: var(--mj-coral);
    font-style: italic;
    font-size: .95rem;
}
.mc-site-footer p {
    margin: .5rem 0 0;
    color: rgba(242, 241, 230, .75);
    font-size: .9rem;
}
.mc-site-footer a {
    color: var(--mj-cream) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: .9rem;
}
.mc-site-footer a:hover {
    color: var(--mj-yellow) !important;
}

/* =================== Login / registro dos terapeutas =================== */
body.login {
    font-family: var(--mj-sans) !important;
    background: var(--mj-cream) !important;
}
.login h1 a {
    background-image: none !important;
    text-indent: 0;
    width: auto;
    height: auto;
    font-family: var(--mj-serif);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--mj-navy);
    pointer-events: none;
}
.login form {
    border-radius: var(--mj-radius) !important;
    border: none !important;
    box-shadow: var(--mj-shadow) !important;
}
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    border: 1px solid #D9D5CB !important;
    border-radius: 8px !important;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--mj-coral) !important;
    box-shadow: 0 0 0 2px rgba(246, 150, 123, .35) !important;
}
.login .button-primary {
    min-height: 2.5rem;
}
.login #nav a, .login #backtoblog a {
    color: var(--mj-navy) !important;
    font-weight: 600;
    text-shadow: none !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
    text-decoration: underline;
}

/* Capa lateral do login (substitui os vídeos do MC) */
.mj-login-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(160deg, var(--mj-coral) 0%, var(--mj-pink) 55%, var(--mj-dusty-blue) 100%);
}
.mj-login-brand {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem;
    text-align: center;
}
.mj-login-brand img {
    width: min(240px, 70%);
    height: auto;
}
.mj-login-brand .mj-login-brand__line {
    font-family: var(--mj-serif);
    font-style: italic;
    color: var(--mj-navy);
    font-size: 1.05rem;
    opacity: .85;
}
.mj-login-brand .mj-login-brand__title {
    font-family: var(--mj-serif);
    font-weight: 700;
    color: var(--mj-navy);
    font-size: 1.9rem;
    letter-spacing: .04em;
    line-height: 1.1;
}

/* =================== Utilidades =================== */
.mj-layout .text-shadow,
.mj-layout .text-shadow-lg {
    text-shadow: none !important;
}