/* ============================================
   RSATHAI Pregnancy Calculator v1
   Uses theme design tokens from :root
   ============================================ */

.pcalc {
    --pcalc-emerald: #059669;
    --pcalc-emerald-bg: #d1fae5;
    --pcalc-emerald-border: #a7f3d0;
    --pcalc-emerald-text: #065f46;
    --pcalc-amber: #d97706;
    --pcalc-amber-bg: #fef3c7;
    --pcalc-amber-border: #fde68a;
    --pcalc-amber-text: #92400e;
    --pcalc-red: #dc2626;
    --pcalc-red-bg: #fee2e2;
    --pcalc-red-border: #fecaca;
    --pcalc-red-text: #991b1b;
    --pcalc-blue: #2563eb;
    --pcalc-blue-bg: #dbeafe;
    --pcalc-blue-text: #1e40af;
    --pcalc-purple: #7c3aed;
    --pcalc-purple-bg: #ede9fe;
    --pcalc-purple-text: #5b21b6;
    --pcalc-teal: var(--color-primary, #007775);
    --pcalc-teal-dark: var(--color-primary-dark, #005a58);
    font-family: var(--font-thai, 'IBM Plex Sans Thai', sans-serif);
    line-height: 1.6;
}

/* Reset entry-content styles inside pcalc */
.pcalc h1, .pcalc h2, .pcalc h3, .pcalc h4, .pcalc p { margin: 0; }
.pcalc ul { list-style: none; margin: 0; padding: 0; }
.pcalc a { text-decoration: none; }

/* Container */
.pcalc-container {
    max-width: 80rem; margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .pcalc-container { padding: 0 1.5rem; } }
.pcalc-container--narrow { max-width: 42rem; }
.pcalc-container--sm { max-width: 48rem; }
.pcalc-container--md { max-width: 56rem; }

/* Sections */
.pcalc-section { padding: 2.5rem 0; }
@media (min-width: 640px) { .pcalc-section { padding: 4rem 0; } }
.pcalc-section--gray { background: var(--color-bg-alt, #f9fafb); }
.pcalc-section__title {
    font-size: 1.5rem; font-weight: 700;
    color: var(--color-text, #111827); text-align: center;
    margin-bottom: 0.5rem;
}
@media (min-width: 768px) { .pcalc-section__title { font-size: 1.875rem; } }
.pcalc-section__subtitle {
    text-align: center; color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem; margin-bottom: 2rem;
}
@media (min-width: 640px) { .pcalc-section__subtitle { font-size: 1rem; } }

/* ---- Hero ---- */
.pcalc-hero {
    background: linear-gradient(30deg, rgba(0, 19, 38, 0.85), #1d7876);
    color: #fff;
    padding: 6rem 0 2rem;
    text-align: center;
}
@media (min-width: 640px) { .pcalc-hero { padding: 7rem 0 3rem; } }
@media (min-width: 1024px) { .pcalc-hero { padding: 8rem 0 3rem; } }
.pcalc-hero__breadcrumb {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; font-size: 0.875rem; margin-bottom: 1.5rem;
    color: rgba(255,255,255,0.7);
}
.pcalc-hero__breadcrumb a { color: rgba(255,255,255,0.7); display: flex; align-items: center; }
.pcalc-hero__breadcrumb a:hover { color: #fff; }
.pcalc-hero__breadcrumb svg { flex-shrink: 0; }
.pcalc-hero__breadcrumb span { color: #fff; font-weight: 500; }
.pcalc-hero__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4rem; height: 4rem; border-radius: 1rem;
    background: rgba(255,255,255,0.2); margin-bottom: 1.5rem;
}
.pcalc-hero__title {
    font-size: 1.875rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .pcalc-hero__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .pcalc-hero__title { font-size: 3rem; } }
.pcalc-hero__subtitle {
    font-size: 1rem; color: rgba(255,255,255,0.8);
    max-width: 36rem; margin: 0 auto; line-height: 1.6;
}
@media (min-width: 640px) { .pcalc-hero__subtitle { font-size: 1.125rem; } }

/* ---- Buttons ---- */
.pcalc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; border-radius: 0.5rem;
    font-weight: 600; font-size: 0.875rem;
    cursor: pointer; border: 2px solid transparent;
    transition: all 150ms ease; font-family: inherit;
    text-decoration: none;
}
.pcalc-btn--primary {
    background: var(--pcalc-teal); color: #fff; border-color: var(--pcalc-teal);
}
.pcalc-btn--primary:hover { background: var(--pcalc-teal-dark); border-color: var(--pcalc-teal-dark); color: #fff; }
.pcalc-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.pcalc-btn--outline {
    background: transparent; color: var(--pcalc-teal); border-color: var(--color-border, #e5e7eb);
}
.pcalc-btn--outline:hover { border-color: var(--pcalc-teal); color: var(--pcalc-teal); }
.pcalc-btn--white {
    background: #fff; color: var(--pcalc-teal); border-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.pcalc-btn--white:hover { background: #f0fdfa; color: var(--pcalc-teal-dark); }

/* ---- Calculator Card ---- */
.pcalc-calculator {
    background: #fff; border-radius: 1rem;
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    overflow: hidden;
}
.pcalc-calculator__header {
    background: linear-gradient(135deg, var(--pcalc-teal), var(--pcalc-teal-dark));
    color: #fff; padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
}
.pcalc-calculator__title { font-size: 1.125rem; font-weight: 700; color: #fff !important; margin: 0 !important; }
.pcalc-calculator__desc { font-size: 0.8125rem; color: rgba(255,255,255,0.8); margin-top: 0.125rem; }
.pcalc-calculator__body { padding: 1.5rem; }
.pcalc-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; font-weight: 600;
    color: var(--color-text, #111827); margin-bottom: 0.5rem;
}
.pcalc-label svg { color: var(--color-text-muted, #6b7280); flex-shrink: 0; }
.pcalc-input {
    display: block; width: 100%;
    padding: 0.75rem 1rem; border-radius: 0.5rem;
    border: 1px solid var(--color-border, #e5e7eb);
    font-size: 1rem; font-family: inherit;
    color: var(--color-text, #111827); background: #fff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pcalc-input:focus {
    outline: none; border-color: var(--pcalc-teal);
    box-shadow: 0 0 0 3px rgba(0, 119, 117, 0.15);
}
.pcalc-hint { font-size: 0.75rem; color: var(--color-text-muted, #737373); margin-top: 0.375rem; }
.pcalc-calculator__actions {
    display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem;
}
.pcalc-calculator__actions .pcalc-btn { flex: 1; white-space: nowrap; min-width: 0; }
.pcalc-calculator__actions .pcalc-btn--outline { flex: 0 0 auto; }

/* ---- Results ---- */
.pcalc-results { margin-top: 1.5rem; }
.pcalc-results__age {
    text-align: center; padding: 1.5rem 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
.pcalc-results__age-label {
    font-size: 0.875rem; color: var(--color-text-muted, #6b7280);
    margin-bottom: 0.75rem; font-weight: 500;
}
.pcalc-results__age-display {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
.pcalc-results__age-item { text-align: center; }
.pcalc-results__number {
    display: block; font-size: 3rem; font-weight: 700;
    color: var(--pcalc-teal); line-height: 1.1;
}
@media (min-width: 640px) { .pcalc-results__number { font-size: 3.75rem; } }
.pcalc-results__unit {
    display: block; font-size: 0.8125rem; color: var(--color-text-muted, #6b7280);
    margin-top: 0.25rem;
}
.pcalc-results__plus {
    font-size: 1.875rem; color: var(--color-border, #d1d5db);
    font-weight: 300; padding-bottom: 1rem;
}

/* Info grid */
.pcalc-results__grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1rem; margin: 1.5rem 0;
}
.pcalc-results__card {
    background: var(--color-bg-alt, #f9fafb); border-radius: 0.5rem;
    padding: 1rem; text-align: center;
}
.pcalc-results__card-icon { margin: 0 auto 0.5rem; }
.pcalc-results__card-icon--purple { color: var(--pcalc-purple); }
.pcalc-results__card-icon--blue { color: var(--pcalc-blue); }
.pcalc-results__card-label {
    font-size: 0.75rem; color: var(--color-text-muted, #6b7280);
    margin-bottom: 0.25rem;
}
.pcalc-results__card-value {
    font-size: 1rem; font-weight: 600; color: var(--color-text, #111827);
}

/* Status box */
.pcalc-status {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1rem; border-radius: 0.5rem; margin: 1rem 0;
    border: 1px solid;
}
.pcalc-status--emerald { background: var(--pcalc-emerald-bg); border-color: var(--pcalc-emerald-border); }
.pcalc-status--amber { background: var(--pcalc-amber-bg); border-color: var(--pcalc-amber-border); }
.pcalc-status--red { background: var(--pcalc-red-bg); border-color: var(--pcalc-red-border); }
.pcalc-status__icon { flex-shrink: 0; margin-top: 0.125rem; }
.pcalc-status--emerald .pcalc-status__icon { color: var(--pcalc-emerald); }
.pcalc-status--amber .pcalc-status__icon { color: var(--pcalc-amber); }
.pcalc-status--red .pcalc-status__icon { color: var(--pcalc-red); }
.pcalc-status__title {
    display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem;
}
.pcalc-status--emerald .pcalc-status__title { color: var(--pcalc-emerald-text); }
.pcalc-status--amber .pcalc-status__title { color: var(--pcalc-amber-text); }
.pcalc-status--red .pcalc-status__title { color: var(--pcalc-red-text); }
.pcalc-status__text {
    font-size: 0.8125rem; line-height: 1.5;
}
.pcalc-status--emerald .pcalc-status__text { color: var(--pcalc-emerald-text); }
.pcalc-status--amber .pcalc-status__text { color: var(--pcalc-amber-text); }
.pcalc-status--red .pcalc-status__text { color: var(--pcalc-red-text); }

/* Results CTA */
.pcalc-results__cta {
    display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem;
}
@media (min-width: 640px) { .pcalc-results__cta { flex-direction: row; } }
.pcalc-results__cta .pcalc-btn { flex: 1; text-align: center; }

/* ---- Disclaimer ---- */
.pcalc-disclaimer {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: var(--pcalc-amber-bg); border: 1px solid var(--pcalc-amber-border);
    border-radius: 0.5rem; padding: 1rem;
    margin-top: 1.5rem;
}
.pcalc-disclaimer__icon { flex-shrink: 0; color: var(--pcalc-amber); margin-top: 0.125rem; }
.pcalc-disclaimer__title {
    display: block; font-size: 0.875rem; font-weight: 600;
    color: var(--pcalc-amber-text); margin-bottom: 0.25rem;
}
.pcalc-disclaimer__text {
    font-size: 0.8125rem; color: var(--pcalc-amber-text); line-height: 1.6;
}

/* ---- Legal Cards ---- */
.pcalc-legal__grid {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 768px) { .pcalc-legal__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pcalc-card {
    border-radius: 0.75rem; padding: 1.5rem;
    border: 1px solid; text-align: center;
}
.pcalc-card__icon { margin: 0 auto 0.75rem; opacity: 0.7; }
.pcalc-card__title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
.pcalc-card__status { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; }
.pcalc-card__text { font-size: 0.8125rem; line-height: 1.6; }
.pcalc-card--emerald { background: var(--pcalc-emerald-bg); border-color: var(--pcalc-emerald-border); color: var(--pcalc-emerald-text); }
.pcalc-card--emerald .pcalc-card__icon { color: var(--pcalc-emerald); }
.pcalc-card--amber { background: var(--pcalc-amber-bg); border-color: var(--pcalc-amber-border); color: var(--pcalc-amber-text); }
.pcalc-card--amber .pcalc-card__icon { color: var(--pcalc-amber); }
.pcalc-card--red { background: var(--pcalc-red-bg); border-color: var(--pcalc-red-border); color: var(--pcalc-red-text); }
.pcalc-card--red .pcalc-card__icon { color: var(--pcalc-red); }

/* ---- Trimester Cards ---- */
.pcalc-tri__grid {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 768px) { .pcalc-tri__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pcalc-tri {
    border-radius: 0.75rem; padding: 1.5rem;
    border: 1px solid; text-align: center;
}
.pcalc-tri__num { display: block; font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.pcalc-tri__range { display: block; font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; }
.pcalc-tri__desc { font-size: 0.8125rem; opacity: 0.8; line-height: 1.5; }
.pcalc-tri--emerald { background: var(--pcalc-emerald-bg); border-color: var(--pcalc-emerald-border); color: var(--pcalc-emerald-text); }
.pcalc-tri--blue { background: var(--pcalc-blue-bg); border-color: #93c5fd; color: var(--pcalc-blue-text); }
.pcalc-tri--purple { background: var(--pcalc-purple-bg); border-color: #c4b5fd; color: var(--pcalc-purple-text); }

/* ---- FAQ ---- */
.pcalc-faq { display: flex; flex-direction: column; gap: 1rem; }
.pcalc-faq__item {
    background: #fff; border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem; overflow: hidden;
}
.pcalc-faq__q {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1.25rem 1.5rem; cursor: pointer;
    list-style: none; font-weight: 600;
    font-size: 0.9375rem; color: var(--color-text, #111827);
    transition: background 150ms ease;
}
.pcalc-faq__q::-webkit-details-marker { display: none; }
.pcalc-faq__q:hover { background: var(--color-bg-alt, #f9fafb); }
.pcalc-faq__icon { flex-shrink: 0; color: var(--pcalc-teal); margin-top: 0.125rem; }
.pcalc-faq__q span { flex: 1; text-align: left; }
.pcalc-faq__chevron {
    flex-shrink: 0; color: var(--color-text-muted, #737373);
    transition: transform 200ms ease; margin-top: 0.125rem;
}
.pcalc-faq__item[open] .pcalc-faq__chevron { transform: rotate(90deg); }
.pcalc-faq__a {
    padding: 0 1.5rem 1.25rem; padding-left: 3.25rem;
    font-size: 0.875rem; color: var(--color-text-muted, #6b7280); line-height: 1.7;
}
.pcalc-faq__a a { color: var(--pcalc-teal); font-weight: 500; }
.pcalc-faq__a a:hover { text-decoration: underline; }