/*
 * Durrun responsive fixes (clone, 2026-10-14) — loaded after the app's own styles on every page.
 * Layout-only: no colours, fonts or components are redesigned. Breakpoints follow the app's own:
 *   1399 / 1149 (header only), 992 (app's mobile-menu switch), 768, 480.
 * The app's component styles are scoped with [_ngcontent-*] attributes (specificity 0,2,0+), so the few overrides
 * that must win use a doubled class or !important. See README.md for the list of fixes and why.
 */

/* ---------- 1. Global safety net (zero-specificity :where(), so any component rule still wins) ---------- */
:where(input, select, textarea, button) { font-family: inherit; }          /* form controls used the browser font */
:where(img, video, canvas, iframe) { max-width: 100%; }
:where(pre) { max-width: 100%; overflow-x: auto; }
:where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, blockquote, figcaption) { overflow-wrap: break-word; }
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--primary-color, #2563eb); outline-offset: 2px;
}

/* ---------- 2. Header: the desktop menu did not fit between 993 and ~1360px ----------
 * The app switches to its mobile drawer at 992px. Above that, the logo + links + a fixed 280px search box +
 * buttons needed ~1340px when signed in (~1220px signed out), so the right side (Sign Up / profile) was cut off. */
html .app-header .btn-nav.btn-nav { white-space: nowrap; }
@media (min-width: 993px) and (max-width: 1399px) {
  html .app-header .header-left.header-left { gap: 1.25rem; min-width: 0; }
  html .app-header .nav-links.nav-links { gap: 1rem; }
  html .app-header .nav-link.nav-link { white-space: nowrap; }
  html .app-header .header-right.header-right { gap: 1rem; min-width: 0; flex: 0 1 auto; }
  html .app-header .search-bar.search-bar { width: auto; flex: 0 1 280px; min-width: 150px; }
}
/* 993-1149px: not enough room for the full menu -> use the app's own mobile drawer (same markup and rules the app
 * applies at <=992px, repeated here for this range). */
@media (min-width: 993px) and (max-width: 1149px) {
  html .app-header.app-header { padding: 0 1rem; }
  html .app-header .mobile-toggle-btn.mobile-toggle-btn { display: flex; }
  html .app-header .desktop-nav, html .app-header .desktop-right { display: none !important; }
  html .mobile-drawer-backdrop.mobile-drawer-backdrop {
    display: block; position: fixed; inset: 64px 0 0; background-color: #0f172a80;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 998;
  }
  html .mobile-drawer.mobile-drawer {
    display: flex; flex-direction: column; position: fixed; top: 64px; left: -100%; width: 280px; max-width: 85vw;
    height: calc(100vh - 64px); background-color: #fff; box-shadow: 4px 0 15px #0000001a; z-index: 999;
    padding: 1.25rem; transition: left .3s cubic-bezier(.16, 1, .3, 1); overflow-y: auto;
  }
  html .mobile-drawer.mobile-drawer.open { left: 0; }
  html .mobile-drawer .mobile-search-bar { position: relative; width: 100%; margin-bottom: 1.25rem; }
  html .mobile-drawer .mobile-nav-links { display: flex; flex-direction: column; gap: .5rem; }
  html .mobile-drawer .mobile-nav-link {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; font-size: .95rem; font-weight: 500;
    color: var(--text-dark); border-radius: 8px; transition: background .2s, color .2s;
  }
  html .mobile-drawer .mobile-nav-link i { font-size: 1.1rem; color: var(--text-muted); width: 20px; text-align: center; }
  html .mobile-drawer .mobile-nav-link:hover, html .mobile-drawer .mobile-nav-link.active {
    background-color: #f1f5f9; color: var(--primary-color); font-weight: 600;
  }
  html .mobile-drawer .mobile-nav-link.active { border-left: 3px solid var(--primary-color); }
  html .mobile-drawer .mobile-nav-link.active i { color: var(--primary-color); }
  html .mobile-drawer .mobile-nav-divider { height: 1px; background-color: var(--border-color); margin: .75rem 0; }
  html .mobile-drawer .mobile-auth-buttons { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
  html .mobile-drawer .w-100 { width: 100%; }
}
@media (max-width: 1149px) {
  html .mobile-drawer.mobile-drawer { overscroll-behavior: contain; }
  /* drawer search: the magnifier button dropped below the field (existing bug at every mobile width) */
  html .mobile-drawer .mobile-search-bar.mobile-search-bar { display: flex; align-items: center; }
  html .mobile-drawer .mobile-search-bar .search-input.search-input { width: 100%; padding-right: 2.5rem; }
  html .mobile-drawer .mobile-search-bar .search-button.search-button { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); }
}

/* ---------- 3. Website footer (Home, Library, Providers, legal pages …) ---------- */
@media (max-width: 1024px) {
  /* brand + CTA take a full row; the four link columns sit in a tidy grid */
  html .website-footer .footer-top.footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
  html .website-footer .footer-brand-col.footer-brand-col { grid-column: 1 / -1; }
  html .website-footer .footer-cta-col.footer-cta-col { grid-column: 1 / -1; }
  html .website-footer .brand-desc.brand-desc { max-width: 420px; }
}
@media (max-width: 1024px) {
  /* CTA column: left-aligned like the other columns (its button was centred on small screens) */
  html .website-footer .footer-cta-col.footer-cta-col { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  html .website-footer .footer-cta-col .btn-footer-cta { align-self: flex-start; }
}
@media (max-width: 768px) {
  html .website-footer .footer-container.footer-container { padding: 0 24px; }
  html .website-footer .footer-top.footer-top { gap: 28px 20px; }
}
@media (max-width: 600px) {
  html .website-footer .footer-top.footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* the app centred only the brand block while every other column stayed left-aligned: align all to the left */
  html .website-footer .footer-top.footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  html .website-footer .footer-brand-col.footer-brand-col { align-items: flex-start; text-align: left; }
  html .website-footer .brand-desc.brand-desc { max-width: 100%; text-align: left; }
  html .website-footer .footer-links-col h4 { margin-bottom: 12px !important; }
  html .website-footer .footer-links-col ul li { margin-bottom: 0 !important; }
  html .website-footer .footer-links-col ul li a { display: inline-block; padding: 6px 0; }   /* 32px+ tap targets */
}
html .website-footer .footer-links-col ul li a:focus-visible,
html .website-footer .btn-footer-cta:focus-visible { outline: 2px solid #0052ff; outline-offset: 2px; border-radius: 4px; }
/* app (signed-in) footer: wrap instead of overflowing on narrow screens */
html .app-footer.app-footer:not(.website-footer) { flex-wrap: wrap; gap: .25rem 1rem; }

/* ---------- 4. Home ---------- */
@media (max-width: 480px) {
  /* "PHP Framework", "JavaScript Library" … badges were wider than their cards */
  html .stack-card .stack-badge.stack-badge { white-space: normal; max-width: 100%; line-height: 1.3; }
  html .stack-card.stack-card { padding-left: 8px; padding-right: 8px; }
}

/* ---------- 5. Providers list: the search field was a fixed 420px ---------- */
@media (max-width: 768px) {
  html app-providers .search-box.search-box { min-width: 0; max-width: 100%; width: 100%; }
  html app-providers .search-box input { width: 100% !important; max-width: 100%; }
}

/* ---------- 6. Search page: input + large button did not fit side by side ---------- */
@media (max-width: 600px) {
  html .search-form.search-form { flex-wrap: wrap; gap: .75rem; }
  html .search-form .search-input-large.search-input-large { min-width: 0; flex: 1 1 100%; }
  html .search-form .search-btn-large.search-btn-large { flex: 1 1 100%; justify-content: center; padding: .875rem 1.25rem; }
}

/* ---------- 7. Community → Submit integration: 5-step stepper forced the form to ~540px ---------- */
html .submit-page .submit-main.submit-main { min-width: 0; max-width: 100%; }
@media (max-width: 768px) {
  /* scrolls sideways; starts at the left so the first step is never cut off */
  html .submit-page .submit-main .stepper.stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 2px 6px; justify-content: flex-start; }
  html .submit-page .submit-main .submit-header.submit-header { min-width: 0; }
}

/* ---------- 7b. Community landing "How it works": 4 steps + arrows in one row ran off-screen on phones ---------- */
@media (max-width: 1020px) {
  html .dc-steps.dc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  html .dc-steps .step-arrow.step-arrow, html .dc-steps .dc-arrow { display: none; }
}
@media (max-width: 600px) {
  html .dc-steps.dc-steps { grid-template-columns: minmax(0, 1fr); }
  html .dc-steps .dc-step p { max-width: none; }
}

/* ---------- 7c. Community landing hero: 3 mini features in one row overlapped and were cut off on phones ---------- */
@media (max-width: 1200px) {
  html .dc-mini.dc-mini { flex-wrap: wrap; }
  html .dc-mini .dc-mini__item.dc-mini__item { flex: 1 1 200px; }
}
@media (max-width: 600px) {
  html .dc-mini.dc-mini { flex-wrap: wrap; gap: 16px; }
  html .dc-mini .dc-mini__item.dc-mini__item { flex: 1 1 100%; max-width: 100%; }
  html .dc-mini .dc-mini__item h4 { white-space: normal !important; }
}

/* ---------- 7d. Affiliates hero: 2nd feature card cut off, dashboard illustration covered the cards below ---------- */
@media (max-width: 1200px) {
  html .affiliate-hero .hero-cards-section.hero-cards-section { flex-wrap: wrap; }
  html .affiliate-hero .hero-cards-section .hero-card { flex: 1 1 200px; min-width: 0; }
}
@media (max-width: 850px) {
  html .affiliate-hero .affiliate-dashboard.affiliate-dashboard { margin: 20px auto; max-width: 100%; }
}
@media (max-width: 480px) {
  html .affiliate-hero .referral-row > * { min-width: 0; }
  html .affiliate-hero .dashboard-process.dashboard-process > * { min-width: 0; }
}
@media (max-width: 600px) {
  html .affiliate-hero .hero-cards-section.hero-cards-section { flex-direction: column; }
  html .affiliate-hero .hero-cards-section .hero-card { width: 100%; min-width: 0; }
  html .affiliate-hero .hero-illustration.hero-illustration { height: auto; }
}

/* ---------- 7e. Provider / template detail stepper: long model names ran past the card ---------- */
@media (max-width: 600px) {
  html .provider-detail-container .stepper .step.step { min-width: 0; flex: 0 1 auto; }
  html .provider-detail-container .stepper .step > :not(.step-number) { min-width: 0; }
  html .provider-detail-container .stepper .step .step-number { flex-shrink: 0; }
  html .provider-detail-container .stepper :is(.step-title, .step-subtitle) { overflow-wrap: anywhere; }
  html .provider-detail-container .stepper .step-connector.step-connector { min-width: 16px; margin: 0 .5rem; }
}

/* ---------- 7f. Small spills found by the audit ---------- */
/* dashboard / projects tables: model and language badges wider than their cell */
html .sp-provider-cell .sp-badge.sp-badge, html .sp-language-cell .sp-language.sp-language,
html .language-cell.language-cell > span, html .provider-cell.provider-cell > .badge.badge {
  max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; display: inline-block;
}
html .sp-provider-cell.sp-provider-cell, html .provider-cell.provider-cell { min-width: 0; flex-wrap: wrap; }
/* docs card grids at 360px */
html .card-grid > .doc-card { min-width: 0; }
html .doc-card :is(h4, p) { overflow-wrap: anywhere; }
/* community submit stepper labels (in the scrollable stepper) */
@media (max-width: 768px) {
  html .submit-page .submit-main .stepper .step-label.step-label { white-space: normal; text-align: center; max-width: 90px; }
}

/* ---------- 7g. Pricing: the page used indigo (#6366f1) instead of the Durrun blue (--primary-color #2563eb) ---------- */
html app-pricing .btn-primary.btn-primary { background: var(--primary-color, #2563eb); border-color: var(--primary-color, #2563eb); color: #fff; }
html app-pricing .btn-primary.btn-primary:hover { background: var(--primary-hover, #1d4ed8); border-color: var(--primary-hover, #1d4ed8); }
html app-pricing .btn-outline-primary.btn-outline-primary { color: var(--primary-color, #2563eb); border-color: var(--primary-color, #2563eb); }
html app-pricing .btn-outline-primary.btn-outline-primary:hover { background: #eff6ff; color: var(--primary-hover, #1d4ed8); border-color: var(--primary-hover, #1d4ed8); }
html app-pricing .switch.switch.on { background: var(--primary-color, #2563eb); }
html app-pricing .popular-badge.popular-badge { background: var(--primary-color, #2563eb); }
html app-pricing .pricing-card.popular-card.popular-card { border-color: var(--primary-color, #2563eb); box-shadow: 0 20px 40px #0f172a59, 0 0 0 1px #2563eb26; }
html app-pricing .pricing-card:not(.popular-card) .group-title.group-title { color: var(--primary-color, #2563eb); }
html app-pricing .banner-right strong { color: var(--primary-color, #2563eb) !important; }

/* ---------- 7h. Community landing font: it listed "Inter" before the site font; use Source Sans Pro like every page ---------- */
html app-community-landing {
  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ---------- 7i. Category chip rows hidden on Templates and Providers (user's request, 2026-10-14) ----------
 * Only hidden: the filtering code is unchanged. Providers keeps its "All Categories" dropdown. */
html app-library .category-tabs.category-tabs,
html app-providers .category-chips.category-chips { display: none !important; }
/* Providers: the "All Categories" dropdown is hidden too (user's request); the search field takes the row */
html app-providers .filters-section select { display: none !important; }
html app-providers .filters-section .search-box.search-box { max-width: 100%; }

/* ---------- 7j. Search suggestions dropdown (durrun-enhance.js) — site colours, font and radius ---------- */
.dsg {
  position: fixed; z-index: 1100; overflow-y: auto; background: #fff; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, .5rem); box-shadow: 0 10px 25px -5px #0f172a26, 0 4px 6px -2px #0f172a0d;
  padding: 6px; font-family: var(--font-family, "Source Sans Pro", sans-serif);
}
.dsg[hidden] { display: none; }
.dsg-group { padding: 8px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.dsg-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--text-dark, #0f172a); min-height: 44px; }
.dsg-opt.is-active { background: #f1f5f9; }
.dsg-opt.is-active .dsg-name { color: var(--primary-color, #2563eb); }
.dsg-icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: var(--primary-color, #2563eb); background: #eff6ff; border: 1px solid var(--border-color, #e2e8f0); overflow: hidden;
}
.dsg-icon.dsg-template { color: #7c3aed; background: #f5f3ff; }
.dsg-icon img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.dsg-text { display: flex; flex-direction: column; min-width: 0; }
.dsg-name { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsg-name strong { font-weight: 700; }
.dsg-sub { font-size: .75rem; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsg-all { border-top: 1px solid var(--border-color, #e2e8f0); border-radius: 0 0 6px 6px; margin-top: 4px; color: var(--primary-color, #2563eb); font-weight: 600; font-size: .875rem; gap: 8px; }
.dsg-empty { padding: 10px; font-size: .875rem; color: var(--text-muted, #64748b); }

/* ---------- 8. Long content never breaks layouts ---------- */
/* model / provider names and descriptions, API responses and code inside flex/grid cards */
html :is(.provider-meta, .provider-name-row, .model-card, .template-card, .provider-card, .card-body, .response-body, .message-content) { min-width: 0; }
html :is(.response-body, .response-content, .json-viewer, .code-block, .code-view, .code-content) {
  max-width: 100%; overflow-x: auto; overflow-wrap: anywhere;
}