/* PCO Health Content - Frontend Styles | Content (c) Patient.info */

.pco-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1a2535; }
.pco-header { margin-bottom: 1.5rem; }
.pco-topic-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .4rem; }
.pco-topic-desc  { color: #6b7a8d; line-height: 1.6; margin: 0; font-size: .9rem; }
.pco-breadcrumb  { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.pco-back-btn    { background: #fff; border: 1px solid #e2e8f0; padding: .4rem .875rem; border-radius: 6px; cursor: pointer; font-size: .82rem; font-weight: 500; }
.pco-back-btn:hover { background: #f1f5f9; }
.pco-breadcrumb-label { font-weight: 600; }
.pco-loading { text-align: center; padding: 2.5rem; color: #6b7a8d; }
.pco-error   { color: #c0392b; }

/* CARDS */
.pco-grid--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.pco-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; cursor: pointer; text-align: left; padding: 0; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; width: 100%; }
.pco-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.pco-card-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #f1f5f9; }
.pco-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.pco-card:hover .pco-card-img { transform: scale(1.05); }
.pco-card-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#e0f2f1,#b2dfdb); }
.pco-card-body  { padding: .75rem; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.pco-card-title { font-size: .875rem; font-weight: 600; margin: 0; line-height: 1.35; }
.pco-card-cta   { font-size: .75rem; color: #3a9e97; font-weight: 500; }

/* LIST */
.pco-grid--list { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.pco-list-item  { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid #e2e8f0; cursor: pointer; text-align: left; width: 100%; transition: background .12s; }
.pco-list-item:last-child { border-bottom: none; }
.pco-list-item:hover { background: #f8fafc; }
.pco-list-dot   { width: 6px; height: 6px; border-radius: 50%; background: #3a9e97; flex-shrink: 0; }
.pco-list-title { flex: 1; font-size: .9rem; font-weight: 500; }
.pco-list-arrow { color: #aab0bc; }

/* COMPACT */
.pco-grid--compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .625rem; }
.pco-compact-card  { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; cursor: pointer; padding: 0; text-align: left; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.pco-compact-card:hover { border-color: #5bb5ae; box-shadow: 0 2px 8px rgba(91,181,174,.15); }
.pco-compact-img  { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pco-compact-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg,#e0f2f1,#b2dfdb); }
.pco-compact-title { padding: .5rem .625rem; font-size: .78rem; font-weight: 600; line-height: 1.3; }

/* FEATURED */
.pco-grid--featured { display: flex; flex-direction: column; gap: 1rem; }
.pco-featured-hero  { position: relative; border-radius: 10px; overflow: hidden; height: 260px; cursor: pointer; width: 100%; background: #1a2535; border: none; padding: 0; }
.pco-featured-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.pco-featured-hero:hover .pco-featured-hero-img { transform: scale(1.04); }
.pco-featured-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%); }
.pco-featured-hero-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.pco-featured-hero-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.pco-featured-hero-title { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.25; margin: 0; }
.pco-featured-hero-cta   { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.8); }
.pco-featured-rest  { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.pco-featured-small { background: #fff; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; cursor: pointer; padding: 0; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.pco-featured-small:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.pco-featured-small-img   { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.pco-featured-small-title { padding: .5rem .625rem; font-size: .8rem; font-weight: 600; line-height: 1.3; }

/* JUMP NAV */
.pco-jump-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin-bottom: 1.25rem; padding: .625rem .875rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: .78rem; }
.pco-jump-nav-label { font-weight: 700; color: #6b7a8d; margin-right: .125rem; white-space: nowrap; }
.pco-jump-link { color: #3a9e97; font-weight: 500; text-decoration: none; padding: .2rem .5rem; border: 1px solid rgba(58,158,151,.25); border-radius: 3px; white-space: nowrap; transition: background .12s, color .12s; }
.pco-jump-link:hover { background: #3a9e97; color: #fff; border-color: #3a9e97; }

/* ARTICLES */
.pco-subtopic { margin-bottom: 1.5rem; scroll-margin-top: 1rem; }
.pco-subtopic-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7a8d; margin: 0 0 .5rem; padding-bottom: .4rem; border-bottom: 1px solid #e2e8f0; }
.pco-article-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
.pco-article-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .875rem; background: #fff; border-bottom: 1px solid #e2e8f0; transition: background .12s; }
.pco-article-item:last-child { border-bottom: none; }
.pco-article-item:hover { background: #f0faf9; }
.pco-article-img  { width: 2.75rem; height: 2.75rem; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.pco-article-link { font-size: .875rem; color: #1a2535; text-decoration: none; font-weight: 500; flex: 1; }
.pco-article-link:hover { color: #3a9e97; text-decoration: underline; }

/* ATTRIBUTION */
.pco-attribution { margin-top: 1.5rem; padding: 1rem 1.125rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: .8rem; color: #6b7a8d; line-height: 1.55; }
.pco-attribution p { margin: 0 0 .5rem; }
.pco-attribution a { color: #3a9e97; font-weight: 500; }
.pco-attribution-link { display: inline-block; margin-top: .25rem; font-weight: 600; font-size: .78rem; color: #3a9e97; text-decoration: none; border: 1px solid rgba(91,181,174,.35); padding: .3rem .7rem; border-radius: 4px; }

/* SECTION ACCENT COLOURS */
.pco-medicines .pco-list-dot { background: #3b7dd8; }
.pco-medicines .pco-card-cta,
.pco-medicines .pco-article-link:hover { color: #3b7dd8; }
.pco-editorial .pco-list-dot { background: #d97706; }
.pco-editorial .pco-card-cta,
.pco-editorial .pco-article-link:hover { color: #d97706; }

/* SEARCH */
.pco-search-wrap { margin-bottom: 1.25rem; }
.pco-search-inner { display: flex; align-items: center; gap: .5rem; background: #fff; border: 2px solid #5bb5ae; border-radius: 8px; padding: .375rem .75rem; transition: border-color .15s, box-shadow .15s; }
.pco-search-inner:focus-within { border-color: #3a9e97; box-shadow: 0 0 0 3px rgba(91,181,174,.2); }
.pco-search-icon { font-size: 1rem; color: #5bb5ae; flex-shrink: 0; }
.pco-search-input { flex: 1; border: none; outline: none; font-size: .9rem; background: transparent; color: #1a2535; font-family: inherit; }
.pco-search-input::placeholder { color: #aab0bc; }
.pco-search-clear { background: none; border: none; cursor: pointer; color: #aab0bc; font-size: .9rem; line-height: 1; padding: 0 .125rem; transition: color .12s; }
.pco-search-clear:hover { color: #e53e3e; }
.pco-search-count { display: block; font-size: .78rem; color: #6b7a8d; margin-top: .4rem; min-height: 1.1em; }

/* SEARCH ALL */
.pco-search-all-wrapper { }
.pco-search-section-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a9e97; margin: 1.25rem 0 .5rem; padding-bottom: .35rem; border-bottom: 2px solid rgba(91,181,174,.25); }
.pco-search-no-results { font-size: .85rem; color: #aab0bc; padding: .5rem 0; }
.pco-search-no-results-global { font-size: .9rem; color: #aab0bc; text-align: center; padding: 1.5rem 0; }

/* A–Z INDEX */
.pco-az-wrapper { }
.pco-az-nav { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.5rem; padding: .75rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.pco-az-nav-link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 4px; font-size: .85rem; font-weight: 700; color: #3a9e97; border: 1px solid rgba(58,158,151,.25); text-decoration: none; transition: background .12s, color .12s, border-color .12s; }
.pco-az-nav-link:hover { background: #3a9e97; color: #fff; border-color: #3a9e97; }
.pco-az-section { margin-bottom: 1.75rem; scroll-margin-top: 1rem; }
.pco-az-letter { font-size: 1.25rem; font-weight: 800; color: #3a9e97; margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 2px solid rgba(58,158,151,.2); }
.pco-az-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1rem; }
@media (min-width: 640px) { .pco-az-list { columns: 3; } }
@media (min-width: 900px) { .pco-az-list { columns: 4; } }
.pco-az-item { margin-bottom: .3rem; break-inside: avoid; padding-left: .875rem; position: relative; }
.pco-az-item::before { content: '•'; position: absolute; left: 0; color: #3a9e97; }
.pco-az-link { font-size: .875rem; color: #1a2535; text-decoration: none; font-weight: 500; }
.pco-az-link:hover { color: #3a9e97; text-decoration: underline; }

/* ── NHS THEME OVERRIDES ─────────────────────────────────────────────────────
   Applied via data-theme="nhs" on .pco-wrapper.
   Uses official NHS colour palette from the NHS Identity Guidelines.
   ──────────────────────────────────────────────────────────────────────────── */
.pco-wrapper[data-theme="nhs"] { color: #212B32; }

/* NHS cards */
.pco-wrapper[data-theme="nhs"] .pco-card { border-top: 3px solid #005EB8; }
.pco-wrapper[data-theme="nhs"] .pco-card-title { color: #005EB8; }
.pco-wrapper[data-theme="nhs"] .pco-card-cta { color: #003087; }
.pco-wrapper[data-theme="nhs"] .pco-card:hover { box-shadow: 0 8px 24px rgba(0,94,184,.12); }
.pco-wrapper[data-theme="nhs"] .pco-card-img-placeholder { background: linear-gradient(135deg, #e8f1f8, #c8ddf2); }

/* NHS list */
.pco-wrapper[data-theme="nhs"] .pco-list-item:hover { background: #f0f4f5; }
.pco-wrapper[data-theme="nhs"] .pco-list-dot { background: #005EB8; }

/* NHS compact */
.pco-wrapper[data-theme="nhs"] .pco-compact-card:hover { border-color: #005EB8; box-shadow: 0 2px 8px rgba(0,94,184,.15); }
.pco-wrapper[data-theme="nhs"] .pco-compact-placeholder { background: linear-gradient(135deg, #e8f1f8, #c8ddf2); }

/* NHS jump nav */
.pco-wrapper[data-theme="nhs"] .pco-jump-nav { background: #f0f4f5; border-color: #AEB7BD; }
.pco-wrapper[data-theme="nhs"] .pco-jump-link { color: #005EB8; border-color: rgba(0,94,184,.3); }
.pco-wrapper[data-theme="nhs"] .pco-jump-link:hover { background: #005EB8; color: #fff; border-color: #005EB8; }

/* NHS articles */
.pco-wrapper[data-theme="nhs"] .pco-article-item:hover { background: #f0f4f5; }
.pco-wrapper[data-theme="nhs"] .pco-article-link { color: #003087; }
.pco-wrapper[data-theme="nhs"] .pco-article-link:hover { color: #003087; text-decoration: underline; }

/* NHS attribution */
.pco-wrapper[data-theme="nhs"] .pco-attribution { background: #f0f4f5; border-color: #AEB7BD; }
.pco-wrapper[data-theme="nhs"] .pco-attribution h3 { color: #005EB8; }
.pco-wrapper[data-theme="nhs"] .pco-attribution a,
.pco-wrapper[data-theme="nhs"] .pco-attribution-link { color: #005EB8; border-color: rgba(0,94,184,.35); }

/* NHS search */
.pco-wrapper[data-theme="nhs"] + .pco-search-wrap .pco-search-inner,
.pco-search-wrap.pco-search--nhs .pco-search-inner { border-color: #005EB8; }
.pco-wrapper[data-theme="nhs"] + .pco-search-wrap .pco-search-inner:focus-within { border-color: #003087; box-shadow: 0 0 0 3px rgba(0,94,184,.2); }

/* NHS A-Z overrides */
.pco-wrapper[data-theme="nhs"] .pco-az-letter { color: #005EB8; border-color: rgba(0,94,184,.2); }
.pco-wrapper[data-theme="nhs"] .pco-az-nav-link { color: #005EB8; border-color: rgba(0,94,184,.25); }
.pco-wrapper[data-theme="nhs"] .pco-az-nav-link:hover { background: #005EB8; color: #fff; border-color: #005EB8; }
.pco-wrapper[data-theme="nhs"] .pco-az-item::before { color: #005EB8; }
.pco-wrapper[data-theme="nhs"] .pco-az-link { color: #003087; }
.pco-wrapper[data-theme="nhs"] .pco-az-link:hover { color: #005EB8; }