/* ████████████████████████████████████████████████████████████████
   DS GARDEN MAGAZINE v16
   JOOMLA 5 • HELIX ULTIMATE
   EDITORIAL GARDEN STYLE
   FIXED CATALOG LABEL H1 + SMALLER H2/H3
████████████████████████████████████████████████████████████████ */

/* =========================================================
   LAYERS
========================================================= */
@layer reset, helix, theme, editorial, mobile;

/* =========================================================
   ROOT
========================================================= */
:root {

  --primary-green: #bfdbaa;
  --secondary-green: #5f7a4a;
  --dark-green: #324a32;

  --bg-main: #fcf8f1;
  --bg-soft: #f5efe4;
  --bg-table: #f6f0e6;
  --bg-card: #ffffff;

  --text-primary: #2c2a29;
  --text-secondary: #5f5b56;

  --border-light: #e6ddd0;

  --accent-red: #d97757;
  --accent-warm: #c9a14a;
  --accent-pink: #d98c9b;
  --accent-good: #89a96f;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --shadow-soft: 0 8px 30px rgba(44,42,41,.04);

  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --mob-edge: 14px;

  --table-header-bg: #2c4a2c;
}

/* =========================================================
   HTML
========================================================= */
html {
  scroll-behavior: smooth;
  scrollbar-color: var(--secondary-green) var(--bg-soft);
}

/* =========================================================
   RESET
========================================================= */
@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    overflow-x: clip;
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.76;
    -webkit-font-smoothing: antialiased;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
  }

  figure {
    margin: 0;
  }
}

/* =========================================================
   HELIX
========================================================= */
@layer helix {

  body.com-content-article,
  body.com-content-featured,
  #sp-main-body.com-content-article,
  #sp-main-body.com-content-featured {
    background: var(--bg-main);
  }

  body.com-content-article #sp-main-body,
  body.com-content-featured #sp-main-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .card,
  .card-body,
  .moduletable {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   CONTENT
========================================================= */
@layer theme {

  .ds-article,
  .article-content,
  .entry-content,
  .com-content-article [itemprop="articleBody"],
  .blog-items,
  .blog .items-row,
  .intro-item {

    width: 100%;
    max-width: 920px;

    margin: 0 auto;

    padding: 14px 24px 64px;

    background: transparent;
  }

  /* ======================================================
     ТЕКСТ
  ====================================================== */

  p {

    max-width: 68ch;

    margin: 0 auto 1.35rem;

    line-height: 1.86;

    color: var(--text-primary);

    text-wrap: pretty;

    letter-spacing: .01em;
  }

  .article-content p + p,
  .entry-content p + p {
    text-indent: 1em;
  }

  .article-content > p:first-of-type,
  .entry-content > p:first-of-type {

    font-size: 1.05rem;

    color: #4d4943;
  }

  .article-content > p:first-of-type::first-letter,
  .entry-content > p:first-of-type::first-letter {

    float: left;

    margin-right: 7px;

    font-size: 2.5em;

    line-height: .9;

    color: #6f8f63;

    font-family: var(--font-serif);
  }

  /* ======================================================
     ССЫЛКИ
  ====================================================== */

  a {

    color: var(--dark-green);

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
  }

  a:hover {
    color: var(--secondary-green);
  }

  /* ======================================================
     ЗАГОЛОВКИ
  ====================================================== */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {

    color: var(--dark-green);

    font-family: var(--font-serif);

    font-weight: 700;

    scroll-margin-top: 90px;
  }

  /* ======================================================
     H1 — ЖУРНАЛЬНЫЙ ЛЕЙБЛ
  ====================================================== */

  .ds-catalog-title,
  .article-header h1,
  .page-header h1,
  .item-page h1,
  [itemprop="headline"] {

    display: table !important;

    width: auto !important;

    max-width: fit-content !important;

    margin: 0.8rem auto 1.15rem !important;

    padding: 0.68rem 1.65rem !important;

    background: linear-gradient(
      180deg,
      #fbf3e4,
      #f2e3ca
    ) !important;

    border: 1px solid #d9ccb6 !important;

    border-radius: 999px !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 2px 6px rgba(0,0,0,.04);

    color: #4f5e40 !important;

    font-family: Georgia, "Times New Roman", serif !important;

    font-size: 1.32rem !important;

    font-weight: 700 !important;

    line-height: 1.18 !important;

    letter-spacing: 0.07em !important;

    text-transform: uppercase !important;

    text-align: center !important;
  }

  /* ======================================================
     H2
  ====================================================== */

  h2 {

    max-width: 68ch;

    margin: 1.9rem auto .8rem;

    padding-left: .8rem;

    border-left: 3px solid var(--primary-green);

    font-size: 1.22rem;

    line-height: 1.28;

    letter-spacing: -.01em;
  }

  /* ======================================================
     H3
  ====================================================== */

  h3 {

    max-width: 68ch;

    margin: 1.45rem auto .65rem;

    padding-left: .65rem;

    border-left: 2px solid var(--primary-green);

    font-size: .98rem;

    line-height: 1.28;
  }

  /* ======================================================
     СПИСКИ
  ====================================================== */

  ul,
  ol {

    max-width: 68ch;

    margin: 1rem auto 1.4rem;

    padding-left: 1.35rem;
  }

  li {
    margin-bottom: .55rem;
  }

  ul li::marker {
    color: #89a96f;
  }

  /* ======================================================
     ИЗОБРАЖЕНИЯ
  ====================================================== */

  img,
  figure img {

    margin: 2rem auto;

    border-radius: var(--radius-md);
  }

  /* ======================================================
     ТАБЛИЦЫ
  ====================================================== */

  .table-responsive,
  .ds-table-wrap {

    overflow-x: auto;

    max-width: 100%;

    margin: 2rem auto;

    border-radius: var(--radius-sm);

    background: var(--bg-table);
  }

  table,
  .ds-table {

    width: 100%;

    min-width: 560px;

    border-collapse: collapse;

    font-size: 14px;
  }

  th {

    padding: 12px;

    background: var(--table-header-bg);

    color: #fff;

    text-align: left;
  }

  td {

    padding: 12px;

    border-bottom: 1px solid #e5dccf;
  }

  /* ======================================================
     ЦИТАТЫ
  ====================================================== */

  blockquote {

    max-width: 68ch;

    margin: 2rem auto;

    padding: .4rem 0 .4rem 1rem;

    border-left: 4px solid var(--primary-green);

    color: var(--text-secondary);

    font-style: italic;
  }

  /* ======================================================
     HR
  ====================================================== */

  hr {

    max-width: 68ch;

    height: 1px;

    margin: 2rem auto;

    border: 0;

    background:
      linear-gradient(
        90deg,
        transparent,
        #d8d0c3,
        transparent
      );
  }
}

/* =========================================================
   EDITORIAL BLOCKS
========================================================= */
@layer editorial {

  .ds-note,
  .ds-tip,
  .ds-story,
  .ds-warning,
  .ds-good,
  .ds-season {

    position: relative;

    max-width: 68ch;

    margin: 2rem auto;

    padding: 1rem 1.2rem 1rem 1.3rem;

    border-radius: 0 16px 16px 0;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.38),
        rgba(255,255,255,0)
      );
  }

  .ds-note::before,
  .ds-tip::before,
  .ds-story::before,
  .ds-warning::before,
  .ds-good::before,
  .ds-season::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 5px;
    height: 100%;

    border-radius: 10px;
  }

  .ds-note::before { background: var(--accent-pink); }
  .ds-tip::before { background: var(--accent-warm); }
  .ds-story::before { background: var(--accent-good); }
  .ds-warning::before { background: var(--accent-red); }
  .ds-good::before { background: #7ca86e; }
  .ds-season::before { background: var(--primary-green); }
}

/* =========================================================
   MOBILE
========================================================= */
@layer mobile {

  @media (max-width: 768px) {

    .ds-article,
    .article-content,
    .entry-content,
    .com-content-article [itemprop="articleBody"] {

      padding:
        10px
        var(--mob-edge)
        40px;
    }

    p {

      max-width: 100%;

      font-size: 15.2px;

      line-height: 1.78;
    }

    .article-content p + p,
    .entry-content p + p {
      text-indent: .65em;
    }

    /* ====================================================
       H1 MOBILE
    ==================================================== */

    .ds-catalog-title,
    .article-header h1,
    .page-header h1,
    .item-page h1,
    [itemprop="headline"] {

      font-size: 1.08rem !important;

      line-height: 1.14 !important;

      padding:
        .58rem
        1.1rem !important;

      letter-spacing: .05em !important;

      margin:
        .45rem auto
        .85rem !important;

      max-width: 94% !important;
    }

    /* ====================================================
       H2 MOBILE
    ==================================================== */

    h2 {

      margin-top: 1.7rem;

      padding-left: .65rem;

      font-size: 1.02rem;
    }

    /* ====================================================
       H3 MOBILE
    ==================================================== */

    h3 {

      font-size: .9rem;

      padding-left: .58rem;
    }

    table,
    .ds-table {

      min-width: 500px;

      font-size: 13px;
    }

    td,
    th {
      padding: 8px;
    }
  }
}

/* =========================================================
   PRINT
========================================================= */
@media print {

  body,
  .article-content,
  .ds-article {

    background: white;

    color: black;
  }

  a {
    color: black;
  }

  .pagination,
  form {
    display: none;
  }
}