/* ============================================================
   BRAND COLOR SYSTEM (High-contrast palette)
   ============================================================ */

:root {
    --color-primary-600: #1E40AF;
    --color-primary-500: #2563EB;
    --color-primary-400: #3B82F6;

    --color-secondary-600: #6D28D9;
    --color-secondary-400: #A78BFA;

    --color-text-strong: #1F2937;
    --color-text-medium: #4B5563;
    --color-text-muted: #6B7280;

    --color-bg-light: #f5f5f5;
    --color-border: #E5E7EB;

    --color-success: #059669;
    --color-warning: #D97706;
    --color-danger: #B91C1C;
}

/* ============================================================
   BULMA VARIABLE OVERRIDES
   ============================================================ */

html {
    --bulma-link: var(--color-primary-500);
    --bulma-link-hover: var(--color-primary-600);

    --bulma-text: var(--color-text-strong);
    --bulma-text-strong: var(--color-text-strong);

    --bulma-body-background-color: #ffffff;
}


/* ============================================================
   GLOBAL TYPOGRAPHY + LAYOUT
   ============================================================ */

body {
    /* background-color: #F5F7FA; */
    color: var(--text);
    font-family: "Inter", system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

.title {
    color: var(--color-text-strong);
    font-weight: 600;
}

.subtitle {
    color: var(--color-text-medium);
}


.uk-link {
    text-decoration: underline;
}

li .uk-link {
    text-decoration: none;
}

/* Softer HR lines */
hr {
    background-color: var(--color-border);
    height: 1px;
    border: none;
}

/* Hover transitions across the UI */
* {
    transition: background-color .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb li {
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--color-primary-500);
}

.breadcrumb a:hover {
    color: var(--color-primary-600);
}

.breadcrumb li+li::before {
    color: var(--color-text-muted);
}

.breadcrumb.is-small{
    line-height: 25px;
}

/* ============================================================
   CARDS (Category Cards + Tool Cards)
   ============================================================ */

.card {
    border: 1px solid var(--color-border);
    border-radius: 0px;
    box-shadow: none;
    transition: all .15s ease;
}

.card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.card.is-disabled {
    opacity: .60;
    filter: grayscale(25%);
    cursor: default;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.button.is-primary {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #ffffff;
}

.button.is-primary:hover {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

/* ============================================================
   FORM CONTROLS (Inputs, Selects, Textareas)
   ============================================================ */

.input,
.textarea,
.select select {
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}

.input:focus,
.textarea:focus,
.select select:focus {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 0.1rem rgba(37, 99, 235, 0.25) !important;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.text-muted {
    color: var(--color-text-muted);
}

.bg-light {
    background-color: var(--color-bg-light);
}

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


/* ============================================================
   FAQ SECTION
   ============================================================ */
/* Wrapper */
.faq-item {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* QUESTION */
.faq-question {
    width: 100%;
    padding: 1.1rem 1.4rem;
    font-size: 1.05rem;
    background: white;
    border: none;
    color: var(--color-text-strong);
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;

    transition: background 0.2s ease;
}

.faq-question:hover {
    background: var(--color-bg-light);
}

/* ICON */
.faq-icon {
    font-size: 1.1rem;
    color: var(--color-primary-500);
    transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

/* ANSWER AREA */
.faq-answer {
    max-height: 0;
    overflow: hidden;

    padding: 0 1.4rem;
    background: white;

    border-top: 1px solid var(--color-border);

    color: var(--color-text-medium);
    font-size: 0.95rem;
    line-height: 1.55;

    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* When expanded we add vertical padding */
.faq-answer.expanded {
    padding-top: 0.9rem;
    padding-bottom: 1rem;
}

/* Accessibility: keep animations working with [hidden] */
.faq-answer[hidden] {
    display: block;
    /* prevent display:none from killing transition */
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ============================================================
   HOMEPAGE CATEGORY CARDS
   ============================================================ */

.homepage-cat-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);

}

/* ============================================================
   KATEX ERROR STYLING
   ============================================================ */

.katex-error {
    color: var(--color-danger);
    background: rgba(255, 0, 0, 0.08);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    cursor: help;
    border-bottom: 1px dotted var(--color-danger);
}

.katex-error:hover::after {
    content: attr(data-error);
    position: absolute;
    background: var(--color-text-strong);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: normal;
    max-width: 260px;
    font-size: 0.8rem;
    z-index: 9999;
    transform: translateY(4px);
}

/* Only on RTL pages: keep page RTL, force KaTeX math LTR */
html[dir="rtl"] .katex,
html[dir="rtl"] .katex-display,
html[dir="rtl"] .katex-display * {
    direction: ltr;
    unicode-bidi: isolate;
}

/*   Katex HTML Formating */
.katex-html {
    background-color: #F3F7FF;
    padding: 5px;
    line-height: 30px;
}

/* KaTeX blocks: prevent off-screen overflow on mobile */
.uk-math-block,
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Keep inner KaTeX from forcing page width */
.uk-math-block .katex,
.katex-display .katex {
    max-width: 100%;
}

/* Optional: slightly smaller display math on phones */
@media (max-width: 480px) {
    .katex-display {
        font-size: 0.85em;
    }
}

/* KaTeX “chip” styling for FAQ accordion headers (high contrast on light gray) */
.faq-question .katex,
.faq-question .katex-display,
.faq-question .katex-html {
    border: 1px solid rgba(0, 0, 0, .1);
    /* crisp edge */
}

/* ============================================================
   BORDER UTILITIES
   ============================================================ */
.bt-1 {
    border-top: 1px solid var(--color-border);
}

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

.bl-1 {
    border-left: 1px solid var(--color-border);
}

.br-1 {
    border-right: 1px solid var(--color-border);
}

.bx-1 {
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

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

/* ============================================================
   Global 404 layout
   ============================================================ */

.not-found-page {
    min-height: 100vh;
    background-color: var(--color-bg-light);
    display: flex;
}

.not-found-section {
    width: 100%;
}

/* ============================================================
   404 content box
   ============================================================ */

.not-found-wrapper {
    padding: 3rem 2.5rem;
    border: 1px solid var(--color-border);
    background-color: #ffffff;
}

.not-found-wrapper h1 {
    color: var(--color-text-strong);
}

.not-found-wrapper p {
    color: var(--color-text-medium);
    font-size: 1rem;
    line-height: 1.6;
}

.not-found-wrapper .button {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.not-found-wrapper .button:hover {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}



/* ============================================================
   TOOL SECTION OVERRIDES
   ============================================================ */
.tool-section button{
    margin-bottom: 0px !important;
    border-radius: 0px;
}

.tool-section select{
    border-radius: 0px;
}

.tool-section .input,
.tool-section .textarea{
    border-radius: 0px;
}

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}