/*
Theme Name: Westclinic Viagra PI Lightning Child
Theme URI: https://viagra.westclinic.jp/
Template: lightning
Author: West Clinic Group
Description: Lightning child theme for a Japanese package-insert HTML archive. Adds a document-viewer style, searchable in-page reading, responsive tables, document navigation, print support, and lightweight site settings.
Version: 1.0.1
Text Domain: wclpi
License: GPL-2.0-or-later
*/

:root {
  --wclpi-accent: #1558d6;
  --wclpi-accent-dark: #0f3178;
  --wclpi-accent-soft: #edf4ff;
  --wclpi-ink: #172033;
  --wclpi-muted: #5d6a7e;
  --wclpi-border: #dbe4f0;
  --wclpi-paper: #ffffff;
  --wclpi-bg: #f6f8fb;
  --wclpi-warning: #a6391d;
  --wclpi-warning-soft: #fff3ed;
  --wclpi-radius-lg: 24px;
  --wclpi-radius-md: 16px;
  --wclpi-shadow: 0 18px 45px rgba(19, 37, 65, 0.10);
}

body.wclpi-child-theme {
  color: var(--wclpi-ink);
  background: var(--wclpi-bg);
}

body.wclpi-child-theme a {
  color: var(--wclpi-accent);
}

body.wclpi-child-theme .site-body,
body.wclpi-child-theme .siteContent {
  background: transparent;
}

.wclpi-wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.wclpi-skip-target {
  scroll-margin-top: 112px;
}

.wclpi-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 34px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.28), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg, var(--wclpi-accent-dark), var(--wclpi-accent));
  color: #fff;
}

.wclpi-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -90px auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}

.wclpi-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 28px;
  align-items: stretch;
}

.wclpi-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 13px;
  letter-spacing: .06em;
  font-weight: 700;
}

.wclpi-hero h1 {
  margin: 18px 0 14px;
  color: #fff;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.13;
  letter-spacing: .01em;
}

.wclpi-hero-lead {
  margin: 0;
  max-width: 760px;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.9;
  color: rgba(255,255,255,.9);
}

.wclpi-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.wclpi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.wclpi-btn:hover,
.wclpi-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

.wclpi-btn-primary {
  background: #fff;
  color: var(--wclpi-accent-dark) !important;
}

.wclpi-btn-ghost {
  border-color: rgba(255,255,255,.48);
  color: #fff !important;
  background: rgba(255,255,255,.08);
}

.wclpi-hero-card {
  padding: 22px;
  border-radius: var(--wclpi-radius-lg);
  background: rgba(255,255,255,.94);
  color: var(--wclpi-ink);
  box-shadow: var(--wclpi-shadow);
}

.wclpi-hero-card h2 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--wclpi-ink);
}

.wclpi-hero-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wclpi-hero-card li {
  padding: 10px 0 10px 28px;
  border-top: 1px solid var(--wclpi-border);
  position: relative;
  line-height: 1.55;
}

.wclpi-hero-card li:first-child { border-top: 0; }

.wclpi-hero-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wclpi-accent);
  font-weight: 900;
}

.wclpi-notice {
  margin: 24px auto 0;
  padding: 15px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.13);
  color: #fff;
  line-height: 1.75;
}

.wclpi-jump {
  margin-top: -22px;
  position: relative;
  z-index: 4;
}

.wclpi-jump-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.wclpi-jump-card {
  display: block;
  padding: 18px 18px 16px;
  border-radius: var(--wclpi-radius-md);
  background: var(--wclpi-paper);
  border: 1px solid var(--wclpi-border);
  box-shadow: 0 12px 30px rgba(23, 32, 51, .08);
  color: var(--wclpi-ink) !important;
  text-decoration: none !important;
}

.wclpi-jump-card b {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.wclpi-jump-card span {
  display: block;
  color: var(--wclpi-muted);
  font-size: 13px;
  line-height: 1.6;
}

.wclpi-section {
  padding: 34px 0;
}

.wclpi-warning-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.wclpi-warning-item {
  border: 1px solid rgba(166,57,29,.18);
  border-left: 5px solid var(--wclpi-warning);
  background: var(--wclpi-warning-soft);
  border-radius: 16px;
  padding: 16px;
  min-height: 126px;
}

.wclpi-warning-item b {
  display: block;
  margin-bottom: 8px;
  color: var(--wclpi-warning);
}

.wclpi-warning-item p {
  margin: 0;
  color: #5d2e1e;
  font-size: 14px;
  line-height: 1.75;
}

.wclpi-doc-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 10px auto 64px;
}

.wclpi-sidebar {
  position: sticky;
  top: 92px;
  border-radius: var(--wclpi-radius-lg);
  border: 1px solid var(--wclpi-border);
  background: var(--wclpi-paper);
  box-shadow: 0 12px 28px rgba(23, 32, 51, .07);
  overflow: hidden;
}

.wclpi-sidebar-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--wclpi-border);
  background: linear-gradient(180deg, #fff, var(--wclpi-accent-soft));
}

.wclpi-sidebar-head b {
  display: block;
  font-size: 15px;
}

.wclpi-sidebar-head small {
  display: block;
  margin-top: 4px;
  color: var(--wclpi-muted);
}

.wclpi-toc {
  max-height: min(68vh, 640px);
  overflow: auto;
  padding: 12px 10px 14px;
}

.wclpi-toc a {
  display: block;
  padding: 8px 8px;
  border-radius: 10px;
  color: var(--wclpi-ink);
  text-decoration: none !important;
  line-height: 1.45;
  font-size: 14px;
}

.wclpi-toc a:hover,
.wclpi-toc a.is-active {
  background: var(--wclpi-accent-soft);
  color: var(--wclpi-accent-dark);
}

.wclpi-toc a[data-level="3"] { padding-left: 18px; font-size: 13px; }
.wclpi-toc a[data-level="4"] { padding-left: 28px; font-size: 12px; color: var(--wclpi-muted); }

.wclpi-doc-card {
  border-radius: var(--wclpi-radius-lg);
  border: 1px solid var(--wclpi-border);
  background: var(--wclpi-paper);
  box-shadow: 0 15px 34px rgba(23, 32, 51, .08);
  overflow: hidden;
}

.wclpi-doc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wclpi-border);
  background: #fbfdff;
}

.wclpi-doc-tools-left,
.wclpi-doc-tools-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.wclpi-search-in-page {
  min-width: min(320px, 100%);
  border: 1px solid var(--wclpi-border) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  background: #fff !important;
}

.wclpi-tool-button {
  border: 1px solid var(--wclpi-border);
  border-radius: 999px;
  background: #fff;
  color: var(--wclpi-ink);
  padding: 10px 14px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.wclpi-modified {
  color: var(--wclpi-muted);
  font-size: 13px;
}

.wclpi-entry {
  padding: clamp(22px, 3.4vw, 44px);
  font-size: 16px;
  line-height: 1.95;
}

.wclpi-entry h1,
.wclpi-entry h2,
.wclpi-entry h3,
.wclpi-entry h4,
.wclpi-entry h5,
.wclpi-entry h6 {
  color: var(--wclpi-ink);
  line-height: 1.45;
  scroll-margin-top: 112px;
}

.wclpi-entry h1 {
  margin-top: 0;
  font-size: clamp(28px, 3.4vw, 42px);
}

.wclpi-entry h2 {
  margin: 2.2em 0 .9em;
  padding: 0 0 .45em;
  border-bottom: 3px solid var(--wclpi-accent);
  font-size: clamp(24px, 2.5vw, 32px);
}

.wclpi-entry h3 {
  margin: 1.9em 0 .75em;
  padding: .56em .75em;
  border-left: 6px solid var(--wclpi-accent);
  background: var(--wclpi-accent-soft);
  border-radius: 12px;
  font-size: clamp(20px, 2vw, 25px);
}

.wclpi-entry h4 {
  margin: 1.5em 0 .6em;
  padding-left: .7em;
  border-left: 4px solid var(--wclpi-border);
  font-size: 18px;
}

.wclpi-entry p,
.wclpi-entry li {
  overflow-wrap: anywhere;
}

.wclpi-entry blockquote {
  border-left: 5px solid var(--wclpi-accent);
  background: var(--wclpi-accent-soft);
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border-radius: 0 14px 14px 0;
}

.wclpi-entry table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 15px;
}

.wclpi-entry th,
.wclpi-entry td {
  border: 1px solid var(--wclpi-border);
  padding: 10px 12px;
  vertical-align: top;
}

.wclpi-entry th {
  background: var(--wclpi-accent-soft);
  color: var(--wclpi-accent-dark);
  font-weight: 800;
}

.wclpi-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2em 0;
  border: 1px solid var(--wclpi-border);
  border-radius: 14px;
  background: #fff;
}

.wclpi-table-wrap table { margin: 0; min-width: 720px; }

.wclpi-entry img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.wclpi-entry mark.wclpi-mark {
  background: #fff0a8;
  color: inherit;
  padding: 0 .1em;
}

.wclpi-no-results {
  padding: 24px;
  border-radius: 16px;
  background: var(--wclpi-accent-soft);
  color: var(--wclpi-accent-dark);
  font-weight: 700;
}

.wclpi-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wclpi-result-card {
  padding: 20px;
  border: 1px solid var(--wclpi-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 32, 51, .06);
}

.wclpi-result-card h2,
.wclpi-result-card h3 {
  margin-top: 0;
  font-size: 20px;
}

.wclpi-result-card p {
  color: var(--wclpi-muted);
  line-height: 1.75;
}

.wclpi-floating-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--wclpi-border);
  box-shadow: 0 12px 30px rgba(23,32,51,.16);
}

.wclpi-floating-cta a {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--wclpi-accent);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 13px;
}

.wclpi-floating-cta button {
  border: 0;
  background: transparent;
  color: var(--wclpi-muted);
  cursor: pointer;
  font-weight: 900;
}

.wclpi-admin-note {
  padding: 12px 14px;
  border-left: 4px solid var(--wclpi-accent);
  background: var(--wclpi-accent-soft);
}

@media (max-width: 991px) {
  .wclpi-hero-grid,
  .wclpi-doc-shell {
    grid-template-columns: 1fr;
  }
  .wclpi-sidebar {
    position: relative;
    top: auto;
  }
  .wclpi-jump-grid,
  .wclpi-warning-band,
  .wclpi-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .wclpi-wrap { width: min(100% - 22px, 1180px); }
  .wclpi-hero { padding: 38px 0 28px; }
  .wclpi-jump-grid,
  .wclpi-warning-band,
  .wclpi-card-grid {
    grid-template-columns: 1fr;
  }
  .wclpi-doc-tools { align-items: stretch; }
  .wclpi-doc-tools-left,
  .wclpi-doc-tools-right,
  .wclpi-search-in-page { width: 100%; }
  .wclpi-floating-cta {
    right: 10px;
    left: 10px;
    justify-content: center;
  }
}

@media print {
  body.wclpi-child-theme { background: #fff; }
  .wclpi-hero,
  .wclpi-jump,
  .wclpi-sidebar,
  .wclpi-doc-tools,
  .wclpi-floating-cta,
  .siteHeader,
  .siteFooter,
  .breadcrumb,
  .page-header,
  .vk-mobile-nav-menu-btn { display: none !important; }
  .wclpi-wrap { width: 100%; }
  .wclpi-doc-shell { display: block; margin: 0; }
  .wclpi-doc-card { border: 0; box-shadow: none; }
  .wclpi-entry { padding: 0; font-size: 12pt; line-height: 1.75; }
  .wclpi-entry a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}