/* =========================================================
       CSS VARIABLES: MARK SALON THEME & FONTS
       All colors mapped from Mark Salon's design system tokens:
       - Accent: Gold #f0be6f / #e3a54a / #8c5f1c
       - Sidebar & Primary: Deep Teal #10302e
       - Card Background: Cream #fffcf7
       - Headings: Cormorant Garamond, serif
       - Body / UI: Jost, sans-serif
    ========================================================= */
    .ms-blog {
      --ms-font-heading: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
      --ms-font-body: "Jost", "Helvetica Neue", Arial, system-ui, sans-serif;

      --ms-color-primary: #10302e;          /* Mark Salon Deep Teal (--teal-900) */
      --ms-color-primary-dark: #0b2221;     /* Mark Salon Teal 950 (--teal-950) */
      --ms-color-accent: #f0be6f;           /* Mark Salon Gold Accent (--gold-400) */
      --ms-color-accent-hover: #f6d39b;     /* Mark Salon Gold Light (--gold-300) */
      --ms-color-accent-subtle: #fbf5ea;    /* Soft Warm Tint for tab hover */
      --ms-color-accent-dark: #8c5f1c;      /* Mark Salon Deep Gold Accent (--gold-700) */
      --ms-color-bg-card: #fffcf7;          /* Mark Salon Light Card Tone (--cream-50) */
      --ms-color-card-border: #e7d8bf;      /* Mark Salon Soft Border Tone (--cream-300) */
      --ms-color-ink: #0e1b1a;              /* Mark Salon Heading Ink (--ink) */
      --ms-color-text: #33413f;             /* Mark Salon Body Text (--text) */
      --ms-color-muted: #5f6d6a;            /* Mark Salon Meta / Muted Text (--muted) */
      --ms-color-on-dark: #faf4ea;          /* Mark Salon Light Text on Dark (--cream-100) */
      --ms-color-on-dark-muted: rgba(250, 244, 234, 0.82); /* Muted on Dark */

      width: 100%;
      box-sizing: border-box;
      padding: 40px 15px 60px;
      font-family: var(--ms-font-body);
      background: #faf4ea; /* Mark Salon Cream 100 base */
    }

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

    .ms-blog-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 30px;
      max-width: 1150px;
      margin: 0 auto;
      align-items: start;
    }

    /* =========================================================
       FILTER TABS
    ========================================================= */
    .ms-blog-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }

    .ms-blog .ms-tab {
      padding: 9px 18px;
      border: 1px solid var(--ms-color-accent);
      border-radius: 8px;
      background: var(--ms-color-bg-card);
      color: var(--ms-color-ink);
      font-family: var(--ms-font-body);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      box-shadow: none;
      text-shadow: none;
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    /* Hover / focus / tap: keep text dark so it NEVER turns white */
    .ms-blog .ms-tab:hover,
    .ms-blog .ms-tab:focus,
    .ms-blog .ms-tab:focus-visible,
    .ms-blog .ms-tab:active {
      background: var(--ms-color-accent-subtle) !important;
      color: var(--ms-color-ink) !important;
      border-color: var(--ms-color-accent) !important;
      box-shadow: none !important;
      outline: none;
    }

    /* Selected tab */
    .ms-blog .ms-tab.is-active,
    .ms-blog .ms-tab.is-active:hover,
    .ms-blog .ms-tab.is-active:focus,
    .ms-blog .ms-tab.is-active:active {
      background: var(--ms-color-accent) !important;
      color: var(--ms-color-primary) !important;
      border-color: var(--ms-color-accent) !important;
    }

    /* =========================================================
       POST CARD
    ========================================================= */
    .ms-post {
      margin-bottom: 22px;
      padding: 22px 24px;
      background: var(--ms-color-bg-card);
      border: 1px solid var(--ms-color-card-border);
      border-radius: 14px;
      box-shadow: 0 6px 20px rgba(11, 34, 33, 0.06);
      font-family: var(--ms-font-body);
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .ms-post:hover {
      box-shadow: 0 10px 28px rgba(11, 34, 33, 0.1);
    }

    .ms-post.is-hidden {
      display: none !important;
    }

    .ms-post h2 {
      margin: 0 0 8px;
      font-family: var(--ms-font-heading);
      font-size: 25px;
      line-height: 1.25;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .ms-post h2 a {
      color: var(--ms-color-ink);
      font-family: var(--ms-font-heading);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .ms-post h2 a:hover {
      color: var(--ms-color-accent-dark);
    }

    .ms-post-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--ms-color-muted);
      font-family: var(--ms-font-body);
      font-size: 14px;
    }

    .ms-sep {
      color: var(--ms-color-accent-dark);
      font-weight: 600;
    }

    .ms-post-excerpt {
      margin: 0 0 16px;
      color: var(--ms-color-text);
      font-family: var(--ms-font-body);
      font-size: 15.5px;
      line-height: 1.6;
    }

    /* =========================================================
       READ MORE BUTTON
       Inverts colours on hover: dark teal to gold on teal
    ========================================================= */
    .ms-read-more {
      display: inline-block;
      padding: 9px 20px;
      border: 2px solid var(--ms-color-primary);
      border-radius: 8px;
      background: transparent;
      color: var(--ms-color-primary);
      font-family: var(--ms-font-body);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-decoration: none;
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .ms-read-more:hover,
    .ms-read-more:focus,
    .ms-read-more:active {
      background: var(--ms-color-primary) !important;
      color: var(--ms-color-accent) !important;
      border-color: var(--ms-color-primary) !important;
    }

    /* =========================================================
       SIDEBAR
       Mark Salon Deep Teal Background with Gold Accents
    ========================================================= */
    .ms-blog-sidebar {
      padding: 26px 24px;
      background: var(--ms-color-primary);
      border-radius: 16px;
      color: var(--ms-color-on-dark);
      font-family: var(--ms-font-body);
      box-shadow: 0 14px 34px -10px rgba(11, 34, 33, 0.35);
    }

    .ms-blog-sidebar h3 {
      margin: 0 0 16px;
      padding-bottom: 12px;
      border-bottom: 2px dashed var(--ms-color-accent);
      color: var(--ms-color-accent);
      font-family: var(--ms-font-heading);
      font-size: 24px;
      line-height: 1.2;
      font-weight: 600;
    }

    .ms-about {
      margin: 0 0 32px;
      color: var(--ms-color-on-dark-muted);
      font-family: var(--ms-font-body);
      font-size: 15px;
      line-height: 1.6;
    }

    .ms-recent {
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
    }

    .ms-recent li {
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(250, 244, 234, 0.16);
    }

    .ms-recent li:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .ms-recent a {
      color: var(--ms-color-on-dark);
      font-family: var(--ms-font-heading);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.35;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .ms-recent a:hover {
      color: var(--ms-color-accent);
    }

    /* =========================================================
       SIDEBAR CALL BUTTON
    ========================================================= */
    .ms-call-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 46px;
      padding: 11px 16px;
      border-radius: 9px;
      background: var(--ms-color-accent);
      color: var(--ms-color-primary) !important;
      font-family: var(--ms-font-body);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none !important;
      box-shadow: 0 8px 20px -8px rgba(240, 190, 111, 0.6);
      transition: transform 0.2s ease, background 0.25s ease;
    }

    .ms-call-button:hover {
      background: var(--ms-color-accent-hover);
    }

    .ms-call-button:active {
      transform: scale(0.98);
    }

    .ms-call-icon {
      font-size: 16px;
      line-height: 1;
    }

    .ms-book-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      margin-top: 10px;
      padding: 10px 16px;
      border: 1px solid rgba(250, 244, 234, 0.35);
      border-radius: 9px;
      background: transparent;
      color: var(--ms-color-on-dark) !important;
      font-family: var(--ms-font-body);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none !important;
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
    }

    .ms-book-button:hover {
      background: rgba(250, 244, 234, 0.12);
      border-color: var(--ms-color-accent);
      color: var(--ms-color-accent) !important;
    }

    .ms-book-button:active {
      transform: scale(0.98);
    }

    @media (min-width: 901px) {
      .ms-blog-sidebar {
        position: sticky;
        top: calc(var(--header-h) + 24px);
      }
    }

    /* =========================================================
       RESPONSIVE BREAKPOINTS (900px & 600px)
    ========================================================= */
    @media (max-width: 900px) {
      .ms-blog-wrap {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .ms-blog {
        padding: 24px 12px 40px;
      }

      .ms-post {
        padding: 18px 16px;
      }

      .ms-post h2 {
        font-size: 20px;
      }

      .ms-post-excerpt {
        font-size: 14.5px;
      }

      .ms-blog-sidebar {
        padding: 22px 18px;
      }

      .ms-blog-sidebar h3 {
        font-size: 21px;
      }
    }