/* UTM Builder — page-specific styles */

/* Color-coded UTM parameter spans */
.utm-color-source   { color: #0d6efd; font-weight: 600; }
.utm-color-medium   { color: #198754; font-weight: 600; }
.utm-color-campaign { color: #dc3545; font-weight: 600; }
.utm-color-term     { color: #6f42c1; font-weight: 600; }
.utm-color-content  { color: #fd7e14; font-weight: 600; }

/* Color dots in params table */
#utm-params-table td code.utm-color-source::before,
#utm-params-table td code.utm-color-medium::before,
#utm-params-table td code.utm-color-campaign::before,
#utm-params-table td code.utm-color-term::before,
#utm-params-table td code.utm-color-content::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
#utm-params-table td code.utm-color-source::before   { background: #0d6efd; }
#utm-params-table td code.utm-color-medium::before   { background: #198754; }
#utm-params-table td code.utm-color-campaign::before  { background: #dc3545; }
#utm-params-table td code.utm-color-term::before     { background: #6f42c1; }
#utm-params-table td code.utm-color-content::before  { background: #fd7e14; }

/* Copy flash animation */
@keyframes flashGreen {
    0%   { background-color: #d1e7dd; }
    100% { background-color: transparent; }
}
.utm-flash {
    animation: flashGreen 0.6s ease-out;
}

/* Output area valid/invalid borders */
#utm-output.utm-output-valid   { border-color: #198754 !important; }
#utm-output.utm-output-invalid { border-color: #dc3545 !important; }

/* Form max-width on desktop */
@media (min-width: 992px) {
    #utm-form { max-width: 540px; }
}

/* Ensure touch targets >= 44px */
#utm-form .form-control {
    min-height: 44px;
}
#utm-form .btn {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile sticky copy bar */
@media (max-width: 767.98px) {
    #utm-output .input-group {
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: #f0f6ff;
        padding: 8px 0;
    }
    #utm-output .input-group .btn {
        width: 100%;
    }
    #utm-output .input-group {
        flex-wrap: wrap;
    }
    #utm-output .input-group .form-control {
        border-radius: 0.375rem !important;
        margin-bottom: 8px;
    }
    #utm-output .input-group .btn {
        border-radius: 0.375rem !important;
    }
}

/* Focus styles — visible keyboard indicators */
#utm-form .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
}
#btn-copy:focus-visible,
#btn-reset:focus-visible,
#btn-clear-history:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
}

/* Inline code — GitHub/MDN style */
#utm-seo-content code:not([class*="language-"]),
#utm-form code {
    background-color: rgba(175, 184, 193, 0.2);
    color: #d63384;
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-size: 0.875em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    border: none;
    word-break: break-word;
    white-space: nowrap;
}
/* Reset for code inside Prism blocks */
#utm-seo-content pre code,
#utm-seo-content pre code[class*="language-"] {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    border: none;
    white-space: pre;
    word-break: normal;
    font-size: inherit;
}

/*
 * Dark mode is intentionally NOT supported here.
 * The site uses Bootstrap 5.3 in light-only mode (no data-bs-theme="dark" toggle).
 * Adding prefers-color-scheme overrides conflicts with Bootstrap's light styles
 * and causes text to become invisible. If dark mode is added site-wide in the
 * future, revisit this section.
 */

/* Print: show only the generated URL */
@media print {
    #utm-form,
    #utm-history,
    #utm-output .input-group .btn,
    #utm-output .alert,
    #copied-msg,
    header, footer,
    .utm-info-sidebar {
        display: none !important;
    }
    #utm-output {
        border: none !important;
        background: none !important;
        padding: 0 !important;
    }
    #utm-result-url {
        border: 1px solid #000 !important;
        font-size: 12pt !important;
    }
}

/* FAQ details/summary styling */
.utm-faq details {
    border-bottom: 1px solid #dee2e6;
    padding: 12px 0;
}
.utm-faq details:last-child {
    border-bottom: none;
}
.utm-faq summary {
    cursor: pointer;
    font-weight: 600;
    padding: 4px 0;
    list-style: none;
}
.utm-faq summary::-webkit-details-marker {
    display: none;
}
.utm-faq summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 8px;
    font-size: .75rem;
    transition: transform 0.2s;
}
.utm-faq details[open] summary::before {
    transform: rotate(90deg);
}
.utm-faq details p {
    margin-top: 8px;
    color: #6c757d;
}

/* Prism code blocks — tweaks */
#utm-seo-content pre[class*="language-"] {
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: .85rem;
    line-height: 1.6;
}
/* Prism toolbar copy button style */
div.code-toolbar > .toolbar > .toolbar-item > button {
    font-size: .75rem !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
}