/**
 * Callout Notes Stylesheet (Front-end & Gutenberg Editor)
 * Savour The Pho - Food Blog
 * Clean, high-contrast, accessible callout boxes for recipes & articles.
 */

:root {
  --note-radius: 14px;
  --tip: #c2410c;     --tip-bg: #fff4ec;
  --swap: #1d4ed8;    --swap-bg: #eef4ff;
  --store: #0f766e;   --store-bg: #ecfdf9;
  --warn: #b91c1c;    --warn-bg: #fef2f2;
  --variant: #6d28d9; --variant-bg: #f5f0ff;
  --why: #a16207;     --why-bg: #fffbeb;
}

/* Base Note Box Structure - High Specificity Protection */
.single-post .entry-content .wp-block-group.is-style-tip,
.single-post .entry-content .wp-block-group.is-style-swap,
.single-post .entry-content .wp-block-group.is-style-store,
.single-post .entry-content .wp-block-group.is-style-warn,
.single-post .entry-content .wp-block-group.is-style-variant,
.single-post .entry-content .wp-block-group.is-style-why,
.entry-content .wp-block-group.is-style-tip,
.entry-content .wp-block-group.is-style-swap,
.entry-content .wp-block-group.is-style-store,
.entry-content .wp-block-group.is-style-warn,
.entry-content .wp-block-group.is-style-variant,
.entry-content .wp-block-group.is-style-why,
.is-style-tip, 
.is-style-swap, 
.is-style-store,
.is-style-warn, 
.is-style-variant, 
.is-style-why {
  border-left: 6px solid var(--c) !important;
  background: var(--bg) !important;
  border-radius: var(--note-radius) !important;
  padding: 1.15rem 1.35rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

/* Khử padding/lề của inner container để outer box kiểm soát 100% */
.is-style-tip > .wp-block-group__inner-container,
.is-style-swap > .wp-block-group__inner-container,
.is-style-store > .wp-block-group__inner-container,
.is-style-warn > .wp-block-group__inner-container,
.is-style-variant > .wp-block-group__inner-container,
.is-style-why > .wp-block-group__inner-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Paragraph spacing inside notes */
.is-style-tip p:last-child,
.is-style-swap p:last-child,
.is-style-store p:last-child,
.is-style-warn p:last-child,
.is-style-variant p:last-child,
.is-style-why p:last-child {
  margin-bottom: 0 !important;
}

.is-style-tip p,
.is-style-swap p,
.is-style-store p,
.is-style-warn p,
.is-style-variant p,
.is-style-why p {
  color: #1f2937;
  font-size: 16px;
  line-height: 1.65;
}

/* Specific Theme Variables for each type */
.is-style-tip     { --c: var(--tip);     --bg: var(--tip-bg); }
.is-style-swap    { --c: var(--swap);    --bg: var(--swap-bg); }
.is-style-store   { --c: var(--store);   --bg: var(--store-bg); }
.is-style-warn    { --c: var(--warn);    --bg: var(--warn-bg); }
.is-style-variant { --c: var(--variant); --bg: var(--variant-bg); }
.is-style-why     { --c: var(--why);     --bg: var(--why-bg); }

/* Header Label with Inline Clean SVG Icon */
.is-style-tip::before, 
.is-style-swap::before, 
.is-style-store::before,
.is-style-warn::before, 
.is-style-variant::before, 
.is-style-why::before {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: var(--c);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Light inline SVG icons for labels */
.is-style-tip::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c2410c'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.477.859h4z'/%3E%3C/svg%3E") left center no-repeat;
  background-size: 16px 16px;
  padding-left: 22px;
}

.is-style-swap::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231d4ed8'%3E%3Cpath fill-rule='evenodd' d='M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.047a1 1 0 011.885-.666A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.608-.286z' clip-rule='evenodd'/%3E%3C/svg%3E") left center no-repeat;
  background-size: 16px 16px;
  padding-left: 22px;
}

.is-style-store::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230f766e'%3E%3Cpath d='M4 3a2 2 0 100 4h12a2 2 0 100-4H4z'/%3E%3Cpath fill-rule='evenodd' d='M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E") left center no-repeat;
  background-size: 16px 16px;
  padding-left: 22px;
}

.is-style-warn::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b91c1c'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E") left center no-repeat;
  background-size: 16px 16px;
  padding-left: 22px;
}

.is-style-variant::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236d28d9'%3E%3Cpath fill-rule='evenodd' d='M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") left center no-repeat;
  background-size: 16px 16px;
  padding-left: 22px;
}

.is-style-why::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a16207'%3E%3Cpath fill-rule='evenodd' d='M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.316.492-.533 1.035-.688 1.587a6.002 6.002 0 00-1.127 1.055 8.97 8.97 0 00-.916 1.488c-.28.58-.456 1.18-.553 1.764-.097.585-.098 1.164.004 1.715.103.551.314 1.07.632 1.52.317.45.742.812 1.258 1.042a4.992 4.992 0 001.996.406c.69 0 1.363-.141 1.979-.413.615-.272 1.144-.675 1.545-1.18.4-.504.662-1.107.755-1.762.093-.655.037-1.341-.183-2.008a9.07 9.07 0 00-.868-1.785 11.02 11.02 0 00-1.272-1.637 13.9 13.9 0 00-1.67-1.386c-.538-.363-1.076-.669-1.579-.903zm-1.892 4.22c.164-.236.353-.45.56-.639.414-.378.887-.648 1.347-.855.46-.208.92-.35 1.316-.443.198-.046.38-.074.542-.086a3.996 3.996 0 011.038.163c.31.11.578.29.774.538.196.248.303.557.303.882 0 .649-.247 1.282-.676 1.78-.43.498-.997.868-1.632 1.066a5.003 5.003 0 01-1.79.163 7.02 7.02 0 01-1.782-.553z' clip-rule='evenodd'/%3E%3C/svg%3E") left center no-repeat;
  background-size: 16px 16px;
  padding-left: 22px;
}

/* Multilingual Label Content: Default English (EN) */
.is-style-tip::before     { content: "Pro Tip"; }
.is-style-swap::before    { content: "Substitution"; }
.is-style-store::before   { content: "Storage"; }
.is-style-warn::before    { content: "Heads up"; }
.is-style-variant::before { content: "Variation"; }
.is-style-why::before     { content: "Why it works"; }

/* German Language Overrides (DE) */
html[lang^="de"] .is-style-tip::before,
.editor-styles-wrapper.lang-de .is-style-tip::before     { content: "Tipp"; }

html[lang^="de"] .is-style-swap::before,
.editor-styles-wrapper.lang-de .is-style-swap::before    { content: "Austausch"; }

html[lang^="de"] .is-style-store::before,
.editor-styles-wrapper.lang-de .is-style-store::before   { content: "Aufbewahrung"; }

html[lang^="de"] .is-style-warn::before,
.editor-styles-wrapper.lang-de .is-style-warn::before    { content: "Achtung"; }

html[lang^="de"] .is-style-variant::before,
.editor-styles-wrapper.lang-de .is-style-variant::before { content: "Variante"; }

html[lang^="de"] .is-style-why::before,
.editor-styles-wrapper.lang-de .is-style-why::before     { content: "Darum funktioniert es"; }

/* ==========================================================================
   SERVING SUGGESTION BOX (HỘP CÁCH THƯỞNG THỨC VỚI ICON HUY HIỆU NỔI - HÌNH 2)
   ========================================================================== */
.stp-serving-box,
.is-style-serving {
    position: relative !important;
    background: #ffffff !important;
    border: 5px solid #F8BFBF !important;
    border-radius: 30px !important;
    margin: 60px 0 30px !important;
    padding: 30px 35px 30px !important;
    box-shadow: 0 4px 16px rgba(185, 44, 44, 0.03) !important;
    box-sizing: border-box;
}

/* Floating round badge at top center - Viền 5px dầy đồng bộ với khung và căn giữa tuyệt đối */
.stp-serving-box .stp-serving-badge,
.is-style-serving .stp-serving-badge,
.stp-serving-box figure.stp-serving-badge,
.is-style-serving figure.stp-serving-badge {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 92px !important;
    height: 92px !important;
    background: #ffffff !important;
    border: 5px solid #F8BFBF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    z-index: 2;
    overflow: hidden !important;
    padding: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.stp-serving-box .stp-serving-badge img,
.is-style-serving .stp-serving-badge img,
.stp-serving-box figure.stp-serving-badge img,
.is-style-serving figure.stp-serving-badge img {
    width: 100% !important;
    height: 100% !important;
    max-width: 62px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
}

/* Title in Serif Terracotta/Crimson - Khoảng cách thoáng với ô tròn */
.stp-serving-box h2,
.stp-serving-box h3,
.stp-serving-box .stp-serving-title,
.is-style-serving h2,
.is-style-serving h3 {
    color: #b92c2c !important;
    font-family: var(--stp-font-heading, "Playfair Display", Georgia, serif) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-top: 6px !important;
    margin-bottom: 16px !important;
    line-height: 1.35 !important;
}

/* Content */
.stp-serving-box p,
.is-style-serving p {
    font-family: Georgia, Cambria, "Times New Roman", serif !important;
    font-size: 1.06rem !important;
    line-height: 1.75 !important;
    color: #222222 !important;
    margin-bottom: 14px !important;
}

.stp-serving-box p:last-child,
.is-style-serving p:last-child {
    margin-bottom: 0 !important;
}

/* Links inside serving box */
.stp-serving-box a,
.is-style-serving a {
    color: #b92c2c !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.15s ease !important;
}

.stp-serving-box a:hover,
.is-style-serving a:hover {
    color: #7f1d1d !important;
}

@media (max-width: 600px) {
    .stp-serving-box,
    .is-style-serving {
        margin: 50px 0 24px !important;
        padding: 30px 20px 22px !important;
        border-radius: 24px !important;
    }
    .stp-serving-box .stp-serving-badge,
    .is-style-serving .stp-serving-badge {
        width: 80px !important;
        height: 80px !important;
        top: 0 !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-width: 4px !important;
        padding: 6px !important;
    }
    .stp-serving-box .stp-serving-badge img,
    .is-style-serving .stp-serving-badge img {
        max-width: 52px !important;
        max-height: 52px !important;
    }
}

/* ==========================================================================
   COOKBOOK PROMO CTA CARD (HỘP GIỚI THIỆU SÁCH NẤU ĂN / EBOOK - HÌNH 1)
   ========================================================================== */
.stp-cookbook-promo,
.is-style-cookbook-promo {
    background: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    padding: 36px 40px !important;
    margin: 2.5rem 0 !important;
    box-sizing: border-box;
}

.stp-cookbook-promo .wp-block-columns {
    margin-bottom: 0 !important;
    gap: 36px !important;
    align-items: center !important;
}

.stp-cookbook-promo .wp-block-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stp-cookbook-promo__title {
    font-family: var(--stp-font-heading, "Playfair Display", Georgia, serif) !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.stp-cookbook-promo__desc {
    font-family: Georgia, Cambria, "Times New Roman", serif !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #262626 !important;
    margin: 0 0 24px 0 !important;
    text-align: center !important;
    max-width: 480px;
}

.stp-cookbook-promo .wp-block-buttons {
    justify-content: center !important;
    margin-bottom: 0 !important;
}

.stp-cookbook-promo__btn .wp-block-button__link,
.stp-cookbook-promo a.stp-cookbook-promo__btn {
    display: inline-block !important;
    background-color: #b92c2c !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(185, 44, 44, 0.25) !important;
    border: none !important;
}

.stp-cookbook-promo__btn .wp-block-button__link:hover,
.stp-cookbook-promo a.stp-cookbook-promo__btn:hover {
    background-color: #991b1b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(185, 44, 44, 0.35) !important;
}

.stp-cookbook-promo__img img,
.stp-cookbook-promo figure img {
    max-width: 270px !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    display: block !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .stp-cookbook-promo,
    .is-style-cookbook-promo {
        padding: 30px 20px !important;
    }
    
    .stp-cookbook-promo .wp-block-columns {
        flex-direction: column-reverse !important;
        gap: 24px !important;
    }
    
    .stp-cookbook-promo__img img,
    .stp-cookbook-promo figure img {
        max-width: 220px !important;
    }
}