/* ==========================================================================
   POSTGUARD TOOLKIT STYLES
   ========================================================================== */

/* --- Button Utility Classes --- */
/* Note: Base styles are inherited from the theme's .elementor-button classes */

.pg-btn-radius-square { border-radius: 0 !important; }
.pg-btn-radius-md { border-radius: 6px !important; }
.pg-btn-radius-pill { border-radius: 50px !important; }

.pg-btn-pad-sm { padding: 8px 16px !important; font-size: 0.85em !important; }
.pg-btn-pad-md { padding: 12px 24px !important; }
.pg-btn-pad-lg { padding: 16px 32px !important; font-size: 1.1em !important; }

/* Modifier examples (Customize hex codes to your brand if needed) */
.pg-btn-style-primary { background-color: #0056b3 !important; color: #ffffff !important; }
.pg-btn-style-outline { background-color: transparent !important; color: #333 !important; border: 2px solid #333 !important; }

/* Custom colors set via the TinyMCE dialog (bg_color/text_color/hover_*), applied through
   CSS custom properties set inline per-button so :hover can still be styled here. */
.pg-btn-custom-color {
    background-color: var(--pg-btn-bg, inherit) !important;
    color: var(--pg-btn-text, inherit) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pg-btn-custom-color:hover {
    background-color: var(--pg-btn-hover-bg, var(--pg-btn-bg, inherit)) !important;
    color: var(--pg-btn-hover-text, var(--pg-btn-text, inherit)) !important;
}

/* Custom border set via the TinyMCE dialog (border_color/border_width). Placed after
   .pg-btn-style-outline so it wins (same specificity, later source order) when both apply. */
.pg-btn-custom-border {
    border-style: solid !important;
    border-width: var(--pg-btn-border-width, 2px) !important;
    border-color: var(--pg-btn-border-color, currentColor) !important;
}

/* Custom padding set via the TinyMCE dialog (padding_custom), overriding the
   Small/Medium/Large presets above via source order (this rule comes after them). */
.pg-btn-custom-padding {
    padding: var(--pg-btn-padding, 12px 24px) !important;
}

/* Alignment wrapper (align="left|center|right|full") */
.pg-btn-align-left { text-align: left; }
.pg-btn-align-center { text-align: center; }
.pg-btn-align-right { text-align: right; }

.pg-btn-full-width {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}


/* --- HTML5 Accordion --- */
/* Base rules read custom properties (set inline by [postguard_accordion_group]) with the
   original hardcoded values as fallbacks, so items without a group/custom colors are unchanged. */
.pg-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: var(--pg-acc-bg, #ffffff);
    overflow: hidden;
}

.pg-accordion-title {
    padding: var(--pg-acc-padding, 1rem 1.25rem);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    position: relative;
    margin: 0;
    background-color: var(--pg-acc-bg, #f8fafc);
    color: var(--pg-acc-title-color, inherit);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pg-accordion-title:hover {
    background-color: var(--pg-acc-hover-bg, #f1f5f9);
    color: var(--pg-acc-hover-title-color, var(--pg-acc-title-color, inherit));
}

/* Heading element (h2/h3/h4/span, set via question_tag) wrapped inside <summary> for
   semantic markup — reset so it doesn't introduce its own default heading margins/sizing. */
.pg-accordion-title-text {
    margin: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Hide default marker in Safari/Chrome */
.pg-accordion-title::-webkit-details-marker {
    display: none;
}

/* Custom '+' and '−' Indicators */
.pg-accordion-title::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--pg-acc-title-color, #64748b);
}

.pg-accordion[open] .pg-accordion-title::after {
    content: '−';
}

.pg-accordion[open] .pg-accordion-title {
    border-bottom: 1px solid #e2e8f0;
}

.pg-accordion-content {
    padding: var(--pg-acc-padding, 1.25rem);
    color: var(--pg-acc-content-color, #475569);
}

.pg-accordion-content p:first-child {
    margin-top: 0;
}

.pg-accordion-content p:last-child {
    margin-bottom: 0;
}

/* Group wrapper for multiple accordion items inserted together */
.pg-accordion-group .pg-accordion {
    margin-bottom: var(--pg-acc-gap, 0.75rem);
}

.pg-accordion-group .pg-accordion:last-child {
    margin-bottom: 0;
}


/* --- Code Block (Prism.js handles syntax colors/theme; these just fit it into content width) --- */
.pg-code-block {
    max-width: 100%;
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow-x: auto;
    box-sizing: border-box;
}

/* Wrap long lines instead of relying on horizontal scroll. Overrides Prism's own
   theme CSS (white-space: pre), which loads after this file, so !important is needed —
   same convention already used everywhere else in this stylesheet for must-win rules.
   Trade-off: the line-numbers plugin assumes one logical line = one visual line, so a
   wrapped line's number will only align with its first visual segment. Accepted as-is. */
.pg-code-block,
.pg-code-block code {
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: break-word;
}