/* =================================================================
   Haustüren-Neuss blog styles (Hasan Code: assets/front/css/blog.css)
   Loaded only on blog views. Uses the global design tokens (--c-*).
   Covers: archive/listing cards + single-post editorial layout.
   ================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }

/* ---------- Archive / listing ---------- */
.hasan-code-blog{ color:var(--c-ink,#0d1b2e); background:#FAF3EA; margin:0; padding:0 0 80px; }
.hasan-code-archive-hero{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:54px 20px 58px;
  margin:0 0 56px;
  background:
    linear-gradient(150deg, rgba(92,59,35,.96), rgba(61,38,24,.96));
}
.hasan-code-archive-hero__inner{ max-width:var(--container,1200px); margin:0 auto; }
.hasan-code-archive-title{ font-family:var(--font-head); font-size:clamp(2rem,3.4vw,2.55rem); font-weight:600; color:#fff; line-height:1.15; margin:0; letter-spacing:0; }
.hasan-code-archive-description{ color:rgba(255,255,255,.82); font-size:1.02rem; margin-top:10px; }
.hasan-code-posts-wrap{ max-width:1140px; margin:0 auto; padding:0 20px; }
.hasan-code-posts-grid,.hasan-code-card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.hasan-code-card{ background:#fff; border:1px solid #E4EAF2; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 10px rgba(18,42,84,.15); transition:transform .25s ease, box-shadow .25s ease; min-height:552px; }
.hasan-code-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.hasan-code-card a{ color:inherit; text-decoration:none; }
.hasan-code-card__media img,.hasan-code-card-media img{ width:100%; height:213px; object-fit:cover; display:block; border-radius:0; margin:0; }
.hasan-code-card__body,.hasan-code-card-body{ padding:22px 21px 0; display:flex; flex-direction:column; gap:12px; flex:1; }
.hasan-code-card__title,.hasan-code-card-title{ font-family:var(--font-head); font-size:1.15rem; line-height:1.35; color:#5C3B23; margin:0; font-weight:700; }
.hasan-code-card__excerpt,.hasan-code-card-excerpt{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  overflow:hidden;
  font-family:var(--font-body);
  color:#1A1917;
  font-size:15.5px;
  line-height:1.65;
  margin:0;
}
.hasan-code-readmore{ margin-top:auto; padding-top:16px; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:#5C3B23; }
.hasan-code-card .hasan-code-entry-meta{ font-family:var(--font-body); margin:22px -21px 0; padding:12px 21px; border-top:1px solid #E4EAF2; font-size:12px; line-height:1.4; color:#2b2f36; }
.hasan-code-card .hasan-code-entry-meta a{ color:inherit; }
.hasan-code-pagination{ margin-top:48px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.hasan-code-pagination .page-numbers{ padding:10px 16px; border:1px solid #E4EAF2; border-radius:10px; text-decoration:none; color:var(--c-navy); }
.hasan-code-pagination .current{ background:var(--c-orange); color:#fff; border-color:var(--c-orange); }
@media (max-width:960px){ .hasan-code-posts-grid,.hasan-code-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .hasan-code-archive-hero{ min-height:140px; margin-bottom:34px; padding:42px 18px; }
  .hasan-code-posts-grid,.hasan-code-card-grid{ grid-template-columns:1fr; gap:24px; }
  .hasan-code-card{ min-height:0; }
}

/* ================= Single post ================= */
.rf-post{ background:#FAF3EA; }

/* Hero */
.rf-post__hero{
  background:linear-gradient(160deg,#5C3B23 0%,#3D2618 72%,#24150D 100%);
  position:relative; padding:116px 20px 221px; text-align:center; overflow:hidden;
}
.rf-post__hero-inner{ position:relative; z-index:1; max-width:1000px; margin-inline:auto; }
.rf-post__crumbs{ font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.65); margin-bottom:18px; }
.rf-post__crumbs a{ color:rgba(255,255,255,.85); text-decoration:none; }
.rf-post__crumbs a:hover{ color:#fff; }
.rf-post__crumb-sep{ margin:0 6px; }
.rf-post__cats{ margin-bottom:16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.rf-post__cats a{
  display:inline-block; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:#fff; background:rgba(115,193,255,.18); border:1px solid rgba(115,193,255,.35);
  padding:5px 12px; border-radius:30px; text-decoration:none; transition:background .2s ease;
}
.rf-post__cats a:hover{ background:rgba(115,193,255,.3); }
.rf-post__cats .rf-sep{ display:none; }
.rf-post__title{
  font-family:"Outfit",sans-serif; font-weight:600; color:#fff;
  font-size:clamp(2rem,3.4vw,40px); line-height:1.42; letter-spacing:0; margin:0 0 18px;
}
.rf-post__meta{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.rf-post__meta-item{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.88); }
.rf-post__meta-item svg{ width:16px; height:16px; color:var(--c-accent); flex:0 0 auto; }

/* Featured image straddling hero/content */
.rf-post__media{ max-width:760px; margin:-180px auto 0; padding:0 20px; position:relative; z-index:2; }
.rf-post__media img{ width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 24px 60px rgba(15,27,51,.28); }

/* Body / reading column. */
.rf-post__body{ max-width:980px; margin-inline:auto; padding:70px 20px 24px; }
.rf-post__content{
  font-family:var(--font-body); font-size:17px; line-height:28px; color:#2b2f36;
}
.rf-post__content > *:first-child{ margin-top:0; }
.rf-post__content p{ margin:0 0 1.3em; }
.rf-post__content a{ color:#C96A12; text-decoration:underline; text-underline-offset:3px; }
.rf-post__content a:hover{ color:#a85a0f; }
.rf-post__content ul,.rf-post__content ol{ margin:0 0 1.3em; padding-left:1.4em; }
.rf-post__content li{ margin-bottom:.5em; }
.rf-post__content img{ max-width:100%; height:auto; border-radius:12px; margin:1.6em 0; }
.rf-post__content table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95em; }
.rf-post__content th,.rf-post__content td{ border:1px solid #E1DACE; padding:10px 12px; text-align:left; }
.rf-post__content th{ background:#F0E8DA; color:var(--c-navy); }
.rf-post__content hr{ border:0; border-top:1px solid #E1DACE; margin:2em 0; }
.rf-post__content .hn-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.6em 0;
}
.rf-post__content .hn-table-wrap table{ margin:0; min-width:560px; }
.rf-post__content .hn-service-link,
.rf-post__content .cta-box,
.rf-post__content .hn-related{
  border:1px solid #E1DACE;
  border-radius:6px;
  background:#fff;
  padding:22px;
  margin:28px 0;
  box-shadow:0 8px 24px rgba(92,59,35,.08);
}
.rf-post__content .hn-service-link{
  border-left:4px solid #C96A12;
  background:#FFF8F1;
}
.rf-post__content .cta-box{
  border-color:#D0B18D;
  background:#5C3B23;
  color:#fff;
}
.rf-post__content .cta-box strong{ display:block; color:#fff; font-size:1.08em; margin-bottom:.35em; }
.rf-post__content .cta-box p{ color:#fff; margin-bottom:.75em; }
.rf-post__content .cta-box a{ color:#fff; font-weight:700; }
.rf-post__content .hn-blog-images{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:30px 0 34px;
}
.rf-post__content .hn-blog-images figure{ margin:0; }
.rf-post__content .hn-blog-images img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  margin:0 0 8px;
  border-radius:6px;
}
.rf-post__content .hn-blog-images figcaption{
  font-size:13px;
  line-height:1.45;
  color:#5f5a55;
}
.rf-post__content .hn-related h2{ margin-top:0; }
.rf-post__content .hn-related ul{ margin-bottom:0; }

/* Tags + post nav */
.rf-post__tags{ margin-top:36px; padding-top:20px; border-top:1px solid #E1DACE; font-family:var(--font-body); font-size:14px; color:var(--c-muted); }
.rf-post__tags-label{ font-weight:700; color:var(--c-navy); margin-right:8px; }
.rf-post__tags a{ color:var(--c-blue); text-decoration:none; margin-right:10px; }
.rf-post__nav{ display:flex; justify-content:space-between; gap:16px; margin-top:32px; padding-top:24px; border-top:1px solid #E1DACE; }
.rf-post__nav a{ display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--c-navy); font-family:var(--font-body); font-size:14px; max-width:48%; }
.rf-post__nav a span{ font-size:12px; color:var(--c-muted); text-transform:uppercase; letter-spacing:.4px; }
.rf-post__nav-next{ text-align:right; margin-left:auto; }

@media (max-width:640px){
  .rf-post__hero{ padding:58px 16px 98px; }
  .rf-post__media{ margin-top:-58px; }
  .rf-post__body{ padding-top:44px; }
  .rf-post__content{ font-size:16px; }
  .rf-post__content .hn-blog-images{ grid-template-columns:1fr; }
  .rf-post__content table{ white-space:normal; }
  .rf-post__content .hn-table-wrap table{ min-width:0; width:100%; table-layout:fixed; }
  .rf-post__content .hn-table-wrap th,
  .rf-post__content .hn-table-wrap td{ overflow-wrap:anywhere; word-break:normal; padding:8px 9px; }
  .rf-post__nav{ flex-direction:column; }
  .rf-post__nav a{ max-width:100%; }
  .rf-post__nav-next{ text-align:left; }
}

/* ============ Editorial content system for long-form Haustüren articles ============ */
.hblogcont {
  --navy: #122A54;
  --navy-12: rgba(18, 42, 84, 0.12);
  --navy-06: rgba(18, 42, 84, 0.06);
  --accent: #C96A12;
  --accent-hover: #a85a0f;
  --border: #dce0e8;
  --border-light: #ebeef2;
  --bg-light: #f7f8fa;
  --bg-warm: #fdfcfa;
  --white: #ffffff;
}
/* -----------------------------------------------------------------------
   HEADINGS  (+8% font-size)
   ----------------------------------------------------------------------- */

.hblogcont h2,
.hblogcont > h2,
div.hblogcont h2 {
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 1.78rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.3 !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
.hblogcont h2:first-of-type {
  margin-top: 0 !important;
}
.hblogcont h3,
div.hblogcont h3 {
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 1.32rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.35 !important;
  margin-top: 2.2rem !important;
  margin-bottom: 0.7rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.hblogcont h4,
div.hblogcont h4 {
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 1.13rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.4 !important;
  margin-top: 1.6rem !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
/* -----------------------------------------------------------------------
   LINKS — only inside CTA and keytake blocks
   ----------------------------------------------------------------------- */

.hblogcont .medical-snippet a,
.hblogcont .keytake a:not(.faq-jump) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201, 106, 18, 0.4);
}
.hblogcont .medical-snippet a:hover,
.hblogcont .keytake a:not(.faq-jump):hover {
  text-decoration-color: var(--accent);
}
/* -----------------------------------------------------------------------
   STRONG — only inside keytake bullets
   ----------------------------------------------------------------------- */

.hblogcont .keytake li strong {
  color: var(--navy);
  font-weight: 700;
}
/* =========================================================================
   KEY TAKEAWAYS
   ========================================================================= */

.hblogcont .keytake {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent) !important;
  border-radius: 4px 14px 14px 4px;
  padding: 2.2rem 2.5rem 1.8rem;
  margin: 1.4rem 0 2.6rem;
  box-shadow:
    0 1px 2px rgba(18, 42, 84, 0.03),
    0 6px 20px rgba(18, 42, 84, 0.045);
}
/* Heading (+8%) */
.hblogcont .keytake h3 {
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 1.62rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 1.2rem !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.3 !important;
}
/* Summary paragraph — only slightly muted, nothing drastic */
.hblogcont .keytake > p {
  margin-bottom: 1.2rem !important;
  padding-bottom: 1.2rem !important;
  border-bottom: 1px solid var(--border-light) !important;
}
/* Bullet list */
.hblogcont .keytake ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
}
.hblogcont .keytake ul li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.6rem;
  line-height: 1.75;
}
.hblogcont .keytake ul li + li {
  border-top: 1px solid var(--border-light);
}
/* Accent dash bullet */
.hblogcont .keytake ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.55em - 3px);
  width: 10px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
/* =========================================================================
   FAQ JUMP BUTTON
   ========================================================================= */

.hblogcont a.faq-jump,
.hblogcont .keytake a.faq-jump {
  display: inline-block !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0.72rem 1.8rem !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  border: none !important;
  letter-spacing: 0.015em !important;
  transition: background 0.25s, transform 0.2s;
}
.hblogcont a.faq-jump:hover,
.hblogcont .keytake a.faq-jump:hover {
  background: var(--accent) !important;
  transform: translateY(-1px);
  color: var(--white) !important;
  text-decoration: none !important;
}
/* =========================================================================
   MEDICAL QUOTE — Doctor Pull Quote
   ========================================================================= */

.hblogcont .medical-quote {
  display: flex;
  align-items: stretch;
  background: var(--navy);
  border-radius: 14px;
  margin: 3rem 0;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(18, 42, 84, 0.06),
    0 10px 32px rgba(18, 42, 84, 0.1);
}
.hblogcont .quote-body {
  flex: 1;
  padding: 2.4rem 2.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Clean background — no watermark */

.hblogcont .medical-quote .quote-body p {
  font-family: Georgia, serif !important;
  font-size: 17px !important;
  font-style: italic !important;
  line-height: 28px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 0 1.2rem !important;
  position: relative;
  z-index: 1;
}
.hblogcont .quote-attribution {
  display: block;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 700;
  color: var(--white);
  position: relative;
  z-index: 1;
}
.hblogcont .quote-role {
  display: block;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 400;
  color: #e0a86a;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}
/* Doctor photo */
.hblogcont .quote-photo {
  flex: 0 0 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0.8rem 0 0;
}
.hblogcont .quote-photo img {
  display: block;
  width: 170px;
  height: auto;
  object-fit: contain;
  margin: 0 !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}
/* =========================================================================
   MEDICAL SNIPPET — Consultation CTA
   ========================================================================= */

.hblogcont .medical-snippet {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px 10px 10px 4px;
  padding: 1.6rem 2rem;
  margin: 2.6rem 0;
  box-shadow: 0 1px 3px rgba(18, 42, 84, 0.03);
}
/* (+8%) */
.hblogcont .medical-snippet h3 {
  font-size: 1.13rem !important;
  margin: 0 0 0.4rem !important;
}
/* p inside snippet — no overrides, inherits default */

.hblogcont .medical-snippet a {
  font-weight: 700;
}
/* =========================================================================
   FAQ SECTION
   ========================================================================= */

.hblogcont .faq-section {
  margin: 1.2rem 0 2.4rem;
}
.hblogcont .faq-item {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.6rem 2rem 1.5rem;
  margin-bottom: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hblogcont .faq-item:hover {
  border-color: var(--navy-12);
  box-shadow: 0 4px 16px rgba(18, 42, 84, 0.06);
}
/* FAQ question heading (+8%) */
.hblogcont .faq-item h4 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 0 0.6rem !important;
  font-size: 1.21rem !important;
  line-height: 1.4 !important;
}
/* Q badge */
.hblogcont .faq-item h4::before {
  content: "Q";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--navy);
  color: var(--white);
  font-family: Georgia, serif;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  margin-top: 2px;
}
/* FAQ answer — NO font-size, NO color override, inherits default p styling */
.hblogcont .faq-item p {
  margin: 0 !important;
  padding-left: 38px !important;
}
/* =========================================================================
   REFERENCES — container styling only, text inherits defaults
   ========================================================================= */

.hblogcont .references {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.5rem 1.8rem;
  margin: 1rem 0 0;
}
/* Only add hanging indent, nothing else — font/size/color stays default */
.hblogcont .references p {
  margin-bottom: 0.6rem !important;
  padding-left: 1.4rem !important;
  text-indent: -1.4rem !important;
}
.hblogcont .references p:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 480px){
.hblogcont h2,
  .hblogcont > h2,
  div.hblogcont h2 {
    font-size: 1.35rem !important;
  }
.hblogcont .keytake {
    padding: 1.5rem 1.2rem 1.2rem;
  }
.hblogcont .keytake ul li {
    padding-left: 1.4rem;
  }
.hblogcont .quote-body {
    padding: 1.4rem 1.2rem;
  }
.hblogcont .medical-quote .quote-body p {
    font-size: 1rem !important;
  }
.hblogcont .faq-item h4 {
    font-size: 1.10rem !important;
  }
.hblogcont a.faq-jump,
  .hblogcont .keytake a.faq-jump {
    font-size: 0.82rem !important;
    padding: 0.6rem 1.4rem !important;
  }
}