/*
 * article-view.css - the article reading page (/{user}/article/{slug}).
 * Pairs with the standard site navbar (main-nav.php) + footer.
 */

.art-body-page { background: #fff; color: #2b2a2a; font-family: 'Open Sans', system-ui, sans-serif; }

/* ====================================================================
   White navbar - ARTICLE VIEW ONLY. Recolours the shared main-nav.php
   (navy → white, light text → dark) scoped to body.art-body-page so the
   site-wide navbar is unaffected.
   ==================================================================== */
.art-body-page .ss-navbar { background: #fff; border-bottom: 1px solid #f3f3f3; box-shadow: none; }

/* Dark logo swap (the default logo is white + gold, invisible on white). */
.art-body-page .ss-brand { background: url('/assets/img/logo-dark.svg') left center / contain no-repeat; }
.art-body-page .ss-brand .ss-logo { visibility: hidden; }

/* Menu links → dark, matching the white bar. */
.art-body-page .ss-link { color: #5d5d5d !important; }
.art-body-page .ss-link:hover,
.art-body-page .ss-link:focus,
.art-body-page .ss-link[aria-expanded="true"] { color: #0c2b3d !important; background: #f2f5f6; }
.art-body-page .ss-pro { color: #0c2b3d !important; }
.art-body-page .ss-pro:hover { color: #0c2b3d !important; background: rgba(246, 184, 30, .16); }
.art-body-page .ss-lang-toggle { color: #0c2b3d !important; }

/* Search field → light theme. */
.art-body-page .ss-search-input { background: #fff; border-color: #bababa; color: #152e40; }
.art-body-page .ss-search-input::placeholder { color: #6b7a83; }
.art-body-page .ss-search-ico { fill: #6b7a83; }
.art-body-page .ss-search-back { color: #0c2b3d; }

/* Login button + avatar. */
.art-body-page .ss-login { color: #0c2b3d; border-color: #d5d5d5; }
.art-body-page .ss-login:hover { color: #0c2b3d; background: #f2f5f6; border-color: #b9c2ca; }
.art-body-page .ss-avatar-btn .ss-caret { fill: #5d5d5d; }
.art-body-page .ss-avatar-img { border-color: #dfe3e6; }

/* Hamburger → dark strokes. */
.art-body-page .ss-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%230c2b3d' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

/* Browse / Create dropdown panels → light. */
.art-body-page .ss-dropdown { background: #fff; border-color: #e6e6e6; box-shadow: 0 12px 30px -12px rgba(15, 30, 40, .25); }
.art-body-page .ss-dropdown .dropdown-item { color: #33424c; }
.art-body-page .ss-dropdown .dropdown-item:hover,
.art-body-page .ss-dropdown .dropdown-item:focus { background: #f2f5f6; color: #0c2b3d; }
.art-body-page .ss-dropdown .dropdown-item.active { background: rgba(246, 184, 30, .18); color: #0c2b3d; }
.art-body-page .ss-dropdown .dropdown-divider { border-top-color: #eef1f4; }

/* Mobile drawer → white. */
.art-body-page .ss-offcanvas { background: #fff; color: #0c2b3d; }
.art-body-page .ss-offcanvas .offcanvas-header { border-bottom-color: #eef1f4; }
.art-body-page .ss-offcanvas .btn-close-white { filter: none; }
.art-body-page .ss-offcanvas .ss-actions { border-top-color: #eef1f4; }

.art { max-width: 1504px; margin: 2.5rem auto 0; padding: 0 40px 3rem 1px; position: relative; }

.art-alert {
  background: #fff5e0; border: 1px solid #f5e0a8; color: #946100; border-radius: 12px;
  padding: .8rem 1.1rem; font-size: .9rem; font-weight: 600; margin-bottom: 1.5rem;
}

/* Layout: rail · article (720px, centered) · sidebar - matches the original. */
.art-wrap { display: flex; width: 100%; align-items: flex-start; position: relative; }

/* Left action rail (border-right divider, sticky) */
.art-rail { flex: 0 0 auto; position: sticky; top: 90px; align-self: flex-start; display: flex; flex-direction: column;
  gap: 1.5rem; border-right: 1px solid #f3f3f3; margin-right: 1.25rem; padding: .25rem 1.5rem .25rem .25rem; }
.art-rail-btn {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e6e6e6; border-radius: 50%; background: #fff; color: #5d5d5d; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.art-rail-btn svg { fill: currentColor; }
.art-rail-btn:hover { border-color: #c9c9c9; color: #16232e; background: #f7f9fb; }
.art-rail-btn.is-liked { color: #e0245e; border-color: #f5c2d1; background: #fdeef3; }

/* Article column - 720px, centered between the rail and sidebar (auto margins) */
.art-main { flex: 0 1 720px; max-width: 720px; margin: 0 auto; padding: 0 1rem; min-width: 0; }
.art-title { font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  line-height: 1.2; color: #0c2b3d; margin: 0 0 1.25rem; text-transform: capitalize; }

.art-byline { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.art-avatar-link { flex: 0 0 auto; }
.art-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; display: block; }
.art-byline-meta { min-width: 0; flex: 1 1 auto; }
.art-byline-top { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.art-author { font-weight: 700; font-size: .98rem; color: #16232e; text-decoration: none; }
.art-author:hover { color: #117a9e; }
.art-byline-sub { font-size: .82rem; color: #8a8a8a; margin-top: .15rem; }
.art-follow {
  font-size: .78rem; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none;
  color: #117a9e; background: #eef6f9; border: 1px solid #cfe0e8; border-radius: 999px; padding: .35rem .8rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.art-follow:hover { background: #117a9e; color: #fff; border-color: #117a9e; }
.art-follow.is-following { background: #eef1f3; color: #6b7a83; border-color: #dde3e7; cursor: default; }
.art-share { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.art-share a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #5d5d5d; transition: background .15s ease, color .15s ease; }
.art-share a svg { fill: currentColor; }
.art-share a:hover { background: #f0f3f5; color: #16232e; }

.art-banner { width: 100%; height: auto; border-radius: 14px; display: block; margin: 0 0 1.5rem; background: #eef1f4; }
.art-lead { font-family: 'Newsreader', Georgia, serif; font-size: 1.4rem; font-style: italic; line-height: 1.35; color: #687178; margin: 0 0 1.75rem; }

/* Article body (arbitrary HTML stored on S3) */
.art-content { font-family: 'Newsreader', Georgia, serif; font-size: 1.35rem; line-height: 1.7; color: #171717; }
.art-content > *:first-child { margin-top: 0; }
.art-content p { margin: 0 0 1.3rem; }
.art-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1rem 0; }
.art-content h2 { font-family: 'Roboto Slab', serif; font-size: 1.6rem; color: #16232e; margin: 2rem 0 .9rem; }
.art-content h3 { font-family: 'Roboto Slab', serif; font-size: 1.3rem; color: #16232e; margin: 1.6rem 0 .8rem; }
.art-content a { color: #117a9e; text-decoration: underline; }
.art-content ul, .art-content ol { margin: 0 0 1.3rem 1.4rem; }
.art-content li { margin-bottom: .5rem; }
.art-content blockquote { margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem; border-left: 4px solid #f6b81e; color: #4a4a4a; font-style: italic; }
.art-content iframe { max-width: 100%; }
.art-content table { max-width: 100%; }

/* Right sidebar (border-left divider, 300px content, sticky) */
.art-side { flex: 0 0 auto; position: sticky; top: 90px; align-self: flex-start; border-left: 1px solid #f3f3f3;
  margin-left: 1.25rem; padding: .25rem 1rem .25rem 2.5rem; }
.art-search, .art-side-head, .art-more { max-width: 300px; }
.art-search { position: relative; display: flex; align-items: center; margin-bottom: 1.75rem; }
.art-search input { width: 100%; height: 46px; padding: 0 46px 0 1rem; font-size: .92rem; color: #2b2a2a;
  border: 1px solid #dfe3e6; border-radius: 999px; outline: none; background: #fff; }
.art-search input:focus { border-color: #9db9c6; box-shadow: 0 0 0 3px rgba(17, 122, 158, .12); }
.art-search button { position: absolute; right: 6px; width: 36px; height: 36px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #7c8a92; cursor: pointer; }
.art-search button svg { fill: currentColor; }
.art-side-head { font-family: 'Roboto Slab', serif; font-size: 1.05rem; color: #16232e; margin: 0 0 1rem; }
.art-more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.art-more a { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; }
.art-more-thumb { flex: 0 0 auto; width: 80px; height: 56px; border-radius: 8px; overflow: hidden; background: #eef1f4; }
.art-more-thumb img { width: 100%; height: 100%; object-fit: cover; }
.art-more-title { font-size: .9rem; font-weight: 600; color: #2b2a2a; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.art-more a:hover .art-more-title { color: #117a9e; }

/* Recommended (inside the 720px article column, like the original) */
.art-hr { border: 0; border-top: 1px solid #f3f3f3; margin: 2.5rem 0 1.5rem; }
.art-rec { margin-top: 0; }
.art-rec-head { font-family: 'Roboto Slab', serif; font-size: 1.3rem; color: #16232e; margin: 0 0 1.25rem; }
.art-rec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.art-rec-card { display: flex; gap: 1rem; text-decoration: none; color: inherit; border: 1px solid #eef1f4;
  border-radius: 12px; padding: 1rem; transition: box-shadow .16s ease, transform .16s ease; }
.art-rec-card:hover { box-shadow: 0 14px 30px -18px rgba(16, 38, 49, .4); transform: translateY(-2px); }
.art-rec-thumb { flex: 0 0 auto; width: 110px; height: 76px; border-radius: 8px; overflow: hidden; background: #eef1f4; }
.art-rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.art-rec-body { min-width: 0; }
.art-rec-title { display: block; font-weight: 700; font-size: .98rem; color: #16232e; line-height: 1.3; margin-bottom: .35rem;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.art-rec-desc { display: block; font-size: .84rem; color: #7a7a7a; line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Responsive - flanks hidden below 1080px, like the original. */
@media (max-width: 1079.98px) {
  .art { max-width: 100%; margin-top: 1.5rem; padding: 0 1rem 3rem; }
  .art-rail, .art-side { display: none; }
  .art-main { flex: 1 1 auto; max-width: 720px; padding: 0; }
}
@media (max-width: 640px) {
  .art-share { margin-left: auto; }
  .art-rec-grid { grid-template-columns: 1fr; }
  .art-rec-thumb { width: 92px; height: 64px; }
}