/* =========================================================================
   SydenhamsFAQ v3 — public stylesheet
   -------------------------------------------------------------------------
   Deliberately neutral: inherits the host theme's font, colours and link
   styles wherever possible. Only adds structure (spacing, rhythm, simple
   list resets) and the bits a theme genuinely can't supply for itself
   (pill-style category chips, breadcrumb separators, search dropdown).

   Class naming follows BEM under the `syd-faq` prefix so nothing here
   collides with DNN core or the host skin.

   Hook reference (matches View.ascx exactly)
     .syd-faq                       Root wrapper on every mode
     .syd-faq__header               Index page <header>
     .syd-faq__intro                Standing intro paragraph
     .syd-faq__section-title        h2 above each index section
     .syd-breadcrumbs               Breadcrumb nav (shared component)
     .syd-faq-search                Search box wrapper
     .syd-faq__categories           <section> around category chips
     .syd-faq__cat-list             <ul> of category chips on the index
     .syd-faq__cat                  <li> wrapper
     .syd-faq__cat-link             The chip itself (<a>)
     .syd-faq__cat-name             Chip label
     .syd-faq__top                  "Most viewed" block on the index
     .syd-faq__top-list / __item / __link
     .syd-faq__cat-header           Header on category landing pages
     .syd-faq__q-list / __item / __link   Question list on category pages
     .syd-faq__article              Single-question article
     .syd-faq__answer               Answer body (inherits host typography)
     .syd-faq__related              Related questions block
     .syd-faq__notfound             404 block
   ========================================================================= */


/* -----------------------------------------------------------------------
   Root + shared rhythm
   ----------------------------------------------------------------------- */
.syd-faq {
    font-size: 1rem;
    line-height: 1.55;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    color: var(--syd-text-body, #424242);
}

.syd-faq * {
    box-sizing: border-box;
}

/* Belt-and-braces list reset. Several Sydenhams skin layers add
   `list-style: disc` (and a ::marker rule) to every <li>, which leaks
   through our `list-style: none` on individual lists. Killing it here
   at the root means every list inside the module — chips, cards,
   question lists, related, breadcrumbs — renders cleanly without
   per-list overrides. */
.syd-faq ul,
.syd-faq ol {
    list-style: none;
    padding-left: 0;
}

.syd-faq li {
    list-style: none;
}

.syd-faq li::marker {
    content: "";
}

.syd-faq h1,
.syd-faq h2,
.syd-faq h3 {
    line-height: 1.25;
    margin: 0 0 0.5em 0;
    color: var(--syd-text-dark, #363e4c);
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
}

.syd-faq p {
    margin: 0 0 1em 0;
}

.syd-faq a {
    text-decoration: none;
    color: var(--syd-primary, #0071b9);
}

.syd-faq a:hover,
.syd-faq a:focus {
    text-decoration: underline;
    color: var(--syd-dark-blue, #2d4c72);
}

.syd-faq__section-title {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syd-primary, #0071b9);
    margin: 2.5rem 0 1rem 0;
}

/* First section title after search — no extra top margin needed */
.syd-faq-search + .syd-faq__cards .syd-faq__section-title,
.syd-faq-search + section .syd-faq__section-title {
    margin-top: 0;
}


/* -----------------------------------------------------------------------
   Index header + intro
   ----------------------------------------------------------------------- */
.syd-faq__header {
    margin: 0 0 1.5rem 0;
	background:#fff;
}

.syd-faq__header h1 {
    margin-bottom: 0.5rem;
}

.syd-faq__intro {
    max-width: 62rem;
    font-size: 1.02rem;
    opacity: 0.9;
    margin-bottom: 1.25rem;
}

/* Brand link shown above the intro on category/item pages, in place of the
   full h1 that only appears on the index. Keeps the header visually present
   without competing with the page's real h1 below. */
.syd-faq__brand-link {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.4rem 0;
    opacity: 0.75;
}

.syd-faq__brand-link a {
    color: inherit;
}


/* Breadcrumbs moved to shared library: .syd-breadcrumbs in syd-components.css */


/* -----------------------------------------------------------------------
   Search
   ----------------------------------------------------------------------- */
.syd-faq-search {
    position: relative;
    margin: 0 0 2.25rem 0;
}

.syd-faq-search__label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-bottom: 0.35rem;
}

.syd-faq-search__input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    line-height: 1.4;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: var(--syd-text-body, #424242);
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.syd-faq-search__input:focus {
    outline: none;
    border-color: var(--syd-primary, #0071b9);
    box-shadow: 0 0 0 2px rgba(0, 113, 185, 0.15);
}

.syd-faq-search__results {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    display: none;
}

.syd-faq-search__results.is-open {
    display: block;
}

.syd-faq-search__result {
    display: block;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    color: inherit;
    text-decoration: none;
}

.syd-faq-search__result:last-child {
    border-bottom: 0;
}

.syd-faq-search__result:hover,
.syd-faq-search__result:focus,
.syd-faq-search__result.is-active {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.syd-faq-search__result-question {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.syd-faq-search__result-snippet {
    display: block;
    font-size: 0.9rem;
    opacity: 0.8;
}

.syd-faq-search__result-category {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.syd-faq-search__result mark {
    background: rgba(255, 230, 0, 0.45);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.syd-faq-search__empty,
.syd-faq-search__loading {
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
    opacity: 0.75;
}


/* -----------------------------------------------------------------------
   Index — category chips (horizontal pills, NOT a vertical list)
   Mirrors the Materials > MF MDF breadcrumb style from the main site.
   ----------------------------------------------------------------------- */
.syd-faq__categories {
    margin: 0 0 2rem 0;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #e3e8ee;
    background: #fff;
}

.syd-faq__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.65rem;
}

.syd-faq__cat {
    margin: 0;
    padding: 0;
}

/* Chips are now miniature versions of the index cards — icon tile on
   the left, category name on the right — so the browse-by-topic row
   reads as the same system at every size. */
.syd-faq__cat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.9rem 0.4rem 0.4rem;
    border: 1px solid #e3e8ee;
    border-radius: 999px;
    background: #fff;
    color: var(--syd-text-dark, #2d4c72);
    font-weight: 500;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(20, 35, 60, 0.04);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        color 0.15s ease;
}

.syd-faq__cat-link:hover,
.syd-faq__cat-link:focus {
    background: #fff;
    border-color: var(--syd-primary, #0071b9);
    color: var(--syd-primary, #0071b9);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 113, 185, 0.12);
    transform: translateY(-1px);
}

.syd-faq__cat-link:focus-visible {
    outline: 3px solid rgba(0, 113, 185, 0.35);
    outline-offset: 2px;
}

/* Mini icon tile — visually echoes the larger .syd-faq__card-icon but
   sized to sit happily inside a pill. */
.syd-faq__cat-icon {
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #eaf3fb 0%, #d8eaf7 100%);
    color: var(--syd-primary, #0071b9);
    font-size: 0.9rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.syd-faq__cat-icon i { line-height: 1; }

.syd-faq__cat-link:hover .syd-faq__cat-icon,
.syd-faq__cat-link:focus .syd-faq__cat-icon {
    background: linear-gradient(135deg, var(--syd-primary, #0071b9) 0%, var(--syd-dark-blue, #2d4c72) 100%);
    color: #fff;
}

.syd-faq__cat-name {
    display: inline;
}

/* Active chip: current category on category / single pages. Flips the
   whole pill to brand blue and inverts the icon tile so it stands out. */
.syd-faq__cat-link.is-active {
    background: var(--syd-primary, #0071b9);
    border-color: var(--syd-primary, #0071b9);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(0, 113, 185, 0.25);
}

.syd-faq__cat-link.is-active:hover,
.syd-faq__cat-link.is-active:focus {
    background: var(--syd-dark-blue, #2d4c72);
    border-color: var(--syd-dark-blue, #2d4c72);
    color: #fff;
    transform: none;
}

.syd-faq__cat-link.is-active .syd-faq__cat-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}


/* -----------------------------------------------------------------------
   Module title — small h2 used on every mode (the page hero supplies the
   real h1), so this is intentionally understated. Sits above the search
   box on the index page; on sub-pages we render the brand link instead.
   ----------------------------------------------------------------------- */
.syd-faq .syd-module-title {
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syd-primary, #0071b9);
    margin: 0 0 0.85rem 0;
    font-weight: 700;
}


/* -----------------------------------------------------------------------
   Admin toolbar — shown only to "Material Admin" role. Right-aligned so
   it doesn't compete with the search box for attention; uses the accent
   green so admins can spot it without reading.
   ----------------------------------------------------------------------- */
.syd-faq__admin-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.9rem 0;
}

.syd-faq__admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    background: var(--syd-accent, #8dc263);
    color: #fff;
    border: 1px solid var(--syd-accent, #8dc263);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 35, 60, 0.08);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        color 0.15s ease;
}

.syd-faq__admin-btn:hover,
.syd-faq__admin-btn:focus {
    background: #7ab054;
    border-color: #7ab054;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(141, 194, 99, 0.35);
    transform: translateY(-1px);
}

.syd-faq__admin-btn:focus-visible {
    outline: 3px solid rgba(141, 194, 99, 0.45);
    outline-offset: 2px;
}

.syd-faq__admin-btn i { line-height: 1; }


/* -----------------------------------------------------------------------
   Index — category card grid (replaces the chip row on the landing page).
   The chip row is still shown on category / single pages for sideways
   navigation; the cards are the primary "browse by topic" surface here.
   Brand palette: #0071b9 primary, #2d4c72 dark, #8dc263 accent.
   ----------------------------------------------------------------------- */
.syd-faq__cards {
    margin: 0 0 1rem 0;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid #e3e8ee;
}

.syd-faq__card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.syd-faq__card {
    margin: 0;
    padding: 0;
    display: flex;
}

.syd-faq__card-link {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.15rem;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    color: var(--syd-text-body, #424242);
    line-height: 1.35;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 35, 60, 0.04);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background 0.15s ease;
    position: relative;
}

.syd-faq__card-link:hover,
.syd-faq__card-link:focus {
    border-color: var(--syd-primary, #0071b9);
    box-shadow: 0 6px 18px rgba(0, 113, 185, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--syd-text-body, #424242);
}

.syd-faq__card-link:focus-visible {
    outline: 3px solid rgba(0, 113, 185, 0.35);
    outline-offset: 2px;
}

/* Icon tile — square tinted block on the left of the card. Picks up
   the brand blue by default and shifts to the accent green on hover
   so the whole card feels alive. */
.syd-faq__card-icon {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #eaf3fb 0%, #d8eaf7 100%);
    color: var(--syd-primary, #0071b9);
    font-size: 1.35rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.syd-faq__card-link:hover .syd-faq__card-icon,
.syd-faq__card-link:focus .syd-faq__card-icon {
    background: linear-gradient(135deg, var(--syd-primary, #0071b9) 0%, var(--syd-dark-blue, #2d4c72) 100%);
    color: #fff;
}

.syd-faq__card-icon i { line-height: 1; }

.syd-faq__card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.syd-faq__card-name {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--syd-text-dark, #2d4c72);
    line-height: 1.2;
}

.syd-faq__card-desc {
    font-size: 0.9rem;
    color: var(--syd-text-body, #424242);
    opacity: 0.85;
    /* Clamp to two lines so cards stay roughly the same height even when
       descriptions vary. Falls back gracefully in browsers without
       line-clamp support — the text just wraps normally. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.syd-faq__card-count {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syd-accent, #8dc263);
    font-weight: 700;
}

/* Arrow on the right — slides forward on hover to telegraph "click me". */
.syd-faq__card-arrow {
    flex: 0 0 auto;
    align-self: center;
    color: #b8c2cf;
    font-size: 1.05rem;
    transition: color 0.15s ease, transform 0.15s ease;
}

.syd-faq__card-link:hover .syd-faq__card-arrow,
.syd-faq__card-link:focus .syd-faq__card-arrow {
    color: var(--syd-primary, #0071b9);
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .syd-faq__card-grid { grid-template-columns: 1fr; }
    .syd-faq__card-link { padding: 0.95rem 1rem; }
    .syd-faq__card-icon { width: 2.3rem; height: 2.3rem; font-size: 1.2rem; }
    .syd-faq__card-name { font-size: 1.05rem; }
}


/* -----------------------------------------------------------------------
   Index — most viewed list
   ----------------------------------------------------------------------- */
.syd-faq__top {
    margin: 0 0 2.5rem 0;
}

.syd-faq__top-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.syd-faq__top-item {
    margin: 0;
    padding: 0;
}

.syd-faq__top-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    color: var(--syd-text-dark, #2d4c72);
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 35, 60, 0.04);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        color 0.15s ease;
}

.syd-faq__top-link:hover,
.syd-faq__top-link:focus {
    text-decoration: none;
    border-color: var(--syd-primary, #0071b9);
    color: var(--syd-primary, #0071b9);
    box-shadow: 0 4px 12px rgba(0, 113, 185, 0.1);
    transform: translateY(-1px);
}

.syd-faq__top-link:focus-visible {
    outline: 3px solid rgba(0, 113, 185, 0.35);
    outline-offset: 2px;
}


/* -----------------------------------------------------------------------
   Category page — branded header panel + card-style question rows.
   The header echoes the index card's icon-on-the-left layout so the
   transition from landing → category feels continuous.
   ----------------------------------------------------------------------- */
.syd-faq__cat-header {
    margin: 0.5rem 0 2rem 0;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(135deg, #f4f9fd 0%, #e8f1f8 100%);
    border: 1px solid #dbe6f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.syd-faq__cat-header-icon {
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--syd-primary, #0071b9) 0%, var(--syd-dark-blue, #2d4c72) 100%);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 113, 185, 0.2);
}

.syd-faq__cat-header-body {
    flex: 1;
    min-width: 0;
}

.syd-faq__cat-header-title {
    font-size: 1.55rem;
    margin: 0 0 0.2rem 0;
    color: var(--syd-text-dark, #2d4c72);
    line-height: 1.15;
}

.syd-faq__cat-header-count {
    margin: 0 0 0.35rem 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--syd-accent, #8dc263);
    font-weight: 700;
}

.syd-faq__cat-desc {
    margin: 0;
    color: var(--syd-text-body, #424242);
    opacity: 0.9;
    font-size: 0.95rem;
}

@media (max-width: 480px) {
    .syd-faq__cat-header { padding: 1rem 1rem; gap: 0.85rem; }
    .syd-faq__cat-header-icon { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; }
    .syd-faq__cat-header-title { font-size: 1.3rem; }
}

/* Question rows — same visual language as the index cards: white panel,
   subtle border, lifts on hover with a brand-blue arrow. Vertical stack
   (one per row) because question text varies in length and reads better
   left-to-right. */
.syd-faq__q-list {
    margin: 0 0 2.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.syd-faq__q-item {
    margin: 0;
    padding: 0;
}

.syd-faq__q-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.05rem;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    color: var(--syd-text-dark, #2d4c72);
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(20, 35, 60, 0.04);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        color 0.15s ease;
}

.syd-faq__q-link:hover,
.syd-faq__q-link:focus {
    text-decoration: none;
    border-color: var(--syd-primary, #0071b9);
    color: var(--syd-primary, #0071b9);
    box-shadow: 0 4px 12px rgba(0, 113, 185, 0.1);
    transform: translateY(-1px);
}

.syd-faq__q-link:focus-visible {
    outline: 3px solid rgba(0, 113, 185, 0.35);
    outline-offset: 2px;
}

.syd-faq__q-text {
    flex: 1;
    min-width: 0;
}

.syd-faq__q-arrow {
    flex: 0 0 auto;
    color: #b8c2cf;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s ease, transform 0.15s ease;
}

.syd-faq__q-link:hover .syd-faq__q-arrow,
.syd-faq__q-link:focus .syd-faq__q-arrow {
    color: var(--syd-primary, #0071b9);
    transform: translateX(3px);
}

.syd-faq__empty {
    font-style: italic;
    opacity: 0.75;
}


/* -----------------------------------------------------------------------
   Single-question article
   ----------------------------------------------------------------------- */
.syd-faq__article {
    margin: 2.0 0 3.0rem 0;
	background:#f4f4f4;
	border: solid 1px #0071b9;
    padding: 20px;
    border-radius: 10px;
}

.syd-faq__article h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.syd-faq__answer img {
    max-width: 100%;
    height: auto;
}

.syd-faq__answer table {
    max-width: 100%;
    border-collapse: collapse;
}

.syd-faq__answer th,
.syd-faq__answer td {
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    text-align: left;
    vertical-align: top;
}

.syd-faq__answer blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--syd-primary, #0071b9);
    color: var(--syd-text-body, #424242);
}


/* -----------------------------------------------------------------------
   Related questions
   ----------------------------------------------------------------------- */
.syd-faq__related {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid #e3e8ee;
	margin-bottom: 2.5rem;
}

.syd-faq__related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.syd-faq__related-item {
    margin: 0;
    padding: 0;
}

.syd-faq__related-link {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    background: transparent;
    border: 1px solid #e9ecf0;
    border-radius: 6px;
    color: var(--syd-text-body, #424242);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}

.syd-faq__related-link:hover,
.syd-faq__related-link:focus {
    text-decoration: none;
    border-color: var(--syd-primary, #0071b9);
    background: #fff;
    color: var(--syd-primary, #0071b9);
}


/* -----------------------------------------------------------------------
   Top-viewed sidebar widget (TopViewed.ascx)
   ----------------------------------------------------------------------- */
.syd-faq-top-viewed {
    margin: 0 0 1.5rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: var(--syd-bg-light, #f4f4f4);
}

.syd-faq-top-viewed__title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem 0;
    opacity: 0.8;
}

.syd-faq-top-viewed__list {
    margin: 0;
    padding-left: 1.25rem;
}

.syd-faq-top-viewed__item {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

.syd-faq-top-viewed__link {
    color: inherit;
}

.syd-faq-top-viewed__empty {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0;
}


/* -----------------------------------------------------------------------
   404 / not-found
   ----------------------------------------------------------------------- */
.syd-faq__notfound {
    padding: 1.5rem;
    border: 1px dashed #ccc;
    border-radius: 6px;
    text-align: center;
    background: var(--syd-bg-light, #f4f4f4);
}


/* -----------------------------------------------------------------------
   Small-screen tweaks
   ----------------------------------------------------------------------- */
@media (max-width: 540px) {
    .syd-faq__cat-list {
        gap: 0.5rem;
    }

    .syd-faq__cat-link {
        padding: 0.45rem 0.9rem;
        font-size: 0.95rem;
    }

    .syd-faq__article h1 {
        font-size: 1.35rem;
    }
}


/* -----------------------------------------------------------------------
   Accessibility
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .syd-faq__cat-link,