/**
 * Styles for This Girl Know custom blocks (front end + editor).
 * Uses the same CSS variables as main.css.
 */

/* Notice / callout boxes */
.tgk-block-notice{display:flex;flex-direction:column;gap:8px;background:var(--tgk-alt-bg,#fff4e3);border-left:5px solid var(--tgk-primary,#f5a623);border-radius:0 var(--tgk-radius,14px) var(--tgk-radius,14px) 0;padding:18px 22px;margin:1.6em 0;}
.tgk-notice-head{display:flex;align-items:center;gap:10px;}
.tgk-notice-emoji{font-size:1.4rem;line-height:1;}
.tgk-notice-title{font-family:var(--tgk-font-heading,sans-serif);font-weight:700;color:var(--tgk-heading,#2b2733);font-size:1.1rem;}
.tgk-box-content{margin:0;}
.tgk-box-content p:last-child{margin-bottom:0;}
.tgk-notice--warning{border-left-color:#e53935;background:#fdecea;}
.tgk-notice--tip{border-left-color:#43a047;background:#e9f7ec;}
.tgk-notice--protip{border-left-color:#fb8c00;background:#fff3e0;}
.tgk-notice--didyouknow{border-left-color:#3f51b5;background:#eaecfb;}
.tgk-notice--quote{border-left-color:var(--tgk-secondary,#ff8a65);font-style:italic;font-size:1.15rem;}
.tgk-notice--download{border-left-color:#00897b;background:#e0f2f1;}

/* List blocks */
.tgk-block-list{background:#fff;border:1px solid var(--tgk-border,#eee);border-radius:var(--tgk-radius,14px);padding:18px 22px;margin:1.6em 0;box-shadow:0 6px 24px rgba(0,0,0,.04);}
.tgk-list-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.tgk-list-title{font-family:var(--tgk-font-heading,sans-serif);font-weight:700;color:var(--tgk-heading,#2b2733);font-size:1.1rem;}
.tgk-block-list ul{list-style:none;padding:0;margin:0;}
.tgk-block-list li{position:relative;padding:6px 0 6px 30px;border-bottom:1px dashed var(--tgk-border,#eee);}
.tgk-block-list li::before{content:"○";position:absolute;left:6px;color:var(--tgk-primary,#f5a623);}
.tgk-list--checklist li::before,.tgk-list--materials li::before{content:"☐";font-size:1.1em;left:4px;}
.tgk-list--ingredients li::before{content:"•";}

/* Steps */
.tgk-block-steps{margin:1.6em 0;}
.tgk-steps-title{margin-bottom:14px;}
.tgk-steps-list,.tgk-block-steps .block-editor-inner-blocks{counter-reset:tgkstep;}
.tgk-step{position:relative;counter-increment:tgkstep;background:#fff;border-radius:var(--tgk-radius,14px);padding:16px 16px 16px 64px;margin-bottom:14px;box-shadow:0 6px 22px rgba(0,0,0,.05);}
.tgk-step::before{content:counter(tgkstep);position:absolute;left:16px;top:16px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--tgk-primary,#f5a623);color:#fff;border-radius:50%;font-family:var(--tgk-font-heading,sans-serif);font-weight:700;}
.tgk-step-text p:last-child{margin-bottom:0;}

/* FAQ */
.tgk-block-faq{margin:1.6em 0;}
.tgk-faq-title{margin-bottom:12px;}
.tgk-faq-item{background:#fff;border:1px solid var(--tgk-border,#eee);border-radius:var(--tgk-radius,14px);margin-bottom:10px;padding:0 18px;}
.tgk-faq-item summary,.tgk-faq-q{font-family:var(--tgk-font-heading,sans-serif);font-weight:700;color:var(--tgk-heading,#2b2733);cursor:pointer;padding:14px 0;list-style:none;position:relative;padding-right:30px;}
.tgk-faq-item summary::-webkit-details-marker{display:none;}
.tgk-faq-item summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.4rem;color:var(--tgk-primary,#f5a623);}
.tgk-faq-item[open] summary::after{content:"–";}
.tgk-faq-a{padding:0 0 16px;}

/* Pros & cons */
.tgk-block-proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.6em 0;}
.tgk-pros,.tgk-cons{border-radius:var(--tgk-radius,14px);padding:16px 18px;}
.tgk-pros{background:#e9f7ec;border:1px solid #b5e0bf;}
.tgk-cons{background:#fdecea;border:1px solid #f3c0bb;}
.tgk-pros h4,.tgk-cons h4{margin:0 0 8px;}
.tgk-block-proscons ul{list-style:none;padding:0;margin:0;}
.tgk-block-proscons li{padding:4px 0;}
@media(max-width:560px){.tgk-block-proscons{grid-template-columns:1fr;}}

/* "Was this helpful?" feedback */
.tgk-block-feedback{text-align:center;background:var(--tgk-alt-bg,#fff4e3);border-radius:var(--tgk-radius,14px);padding:20px;margin:1.8em 0;}
.tgk-feedback--minimal{background:transparent;padding:10px 0;}
.tgk-feedback--boxed{border:2px solid var(--tgk-border,#eee);background:#fff;}
.tgk-feedback-q{font-family:var(--tgk-font-heading,sans-serif);font-weight:700;font-size:1.15rem;color:var(--tgk-heading,#2b2733);margin:0 0 12px;}
.tgk-feedback-actions{display:flex;gap:12px;justify-content:center;}
.tgk-feedback-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--tgk-border,#eee);border-radius:12px;padding:10px 20px;cursor:pointer;font-family:var(--tgk-font-heading,sans-serif);font-weight:600;font-size:1rem;color:var(--tgk-heading,#2b2733);transition:.18s;}
.tgk-feedback--pills .tgk-feedback-btn{border-radius:999px;}
.tgk-feedback-btn:hover{transform:translateY(-2px);border-color:var(--tgk-primary,#f5a623);}
.tgk-feedback-up:hover{border-color:#43a047;}
.tgk-feedback-down:hover{border-color:#e53935;}
.tgk-feedback-icon{font-size:1.2rem;}
.tgk-feedback-count{background:var(--tgk-alt-bg,#f4f4f4);border-radius:999px;padding:1px 9px;font-size:.85rem;min-width:24px;}
.tgk-block-feedback.is-voted .tgk-feedback-btn{cursor:default;opacity:.65;}
.tgk-block-feedback.voted-up .tgk-feedback-up{border-color:#43a047;background:#e9f7ec;opacity:1;}
.tgk-block-feedback.voted-down .tgk-feedback-down{border-color:#e53935;background:#fdecea;opacity:1;}
.tgk-feedback-thanks{margin:12px 0 0;color:var(--tgk-muted,#888);font-size:.9rem;}

/* Printable / Download */
.tgk-block-printable{display:flex;gap:20px;align-items:center;background:#fff;border:2px dashed var(--tgk-primary,#f5a623);border-radius:var(--tgk-radius,14px);padding:20px;margin:1.8em 0;}
.tgk-printable-thumb{width:120px;height:150px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:0 6px 20px rgba(0,0,0,.12);}
.tgk-printable-thumb.tgk-ph{display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:var(--tgk-alt-bg,#f4f4f4);}
.tgk-printable-title{margin:0 0 6px;}
.tgk-printable-btn{margin-top:10px;}
@media(max-width:560px){.tgk-block-printable{flex-direction:column;text-align:center;}}

/* Info bar */
.tgk-block-infobar{display:flex;flex-wrap:wrap;gap:10px;background:var(--tgk-alt-bg,#fff4e3);border-radius:var(--tgk-radius,14px);padding:14px;margin:1.6em 0;justify-content:space-around;text-align:center;}
.tgk-info-item{display:flex;flex-direction:column;gap:2px;min-width:80px;}
.tgk-info-icon{font-size:1.4rem;}
.tgk-info-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tgk-muted,#999);}
.tgk-info-val{font-weight:700;color:var(--tgk-heading,#2b2733);}
.tgk-infobar-edit{gap:14px;}
.tgk-info-edit{display:flex;flex-direction:column;font-size:.7rem;}
.tgk-info-edit input{margin-top:4px;border:1px solid var(--tgk-border,#ddd);border-radius:6px;padding:4px;text-align:center;}

/* Recipe */
.tgk-block-recipe{background:#fff;border:2px solid var(--tgk-primary,#f5a623);border-radius:var(--tgk-radius,14px);padding:22px;margin:1.6em 0;}
.tgk-recipe-title{margin-top:0;}
.tgk-recipe-meta{display:flex;flex-wrap:wrap;gap:16px;border-top:1px solid var(--tgk-border,#eee);border-bottom:1px solid var(--tgk-border,#eee);padding:10px 0;margin:12px 0;font-weight:600;color:var(--tgk-heading,#2b2733);}
.tgk-recipe-meta-edit{gap:10px;}
.tgk-recipe-meta-edit label{display:flex;flex-direction:column;font-size:.7rem;}
.tgk-recipe-ing ul{list-style:none;padding:0;}
.tgk-recipe-ing li{padding:5px 0 5px 26px;position:relative;}
.tgk-recipe-ing li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border:2px solid var(--tgk-primary,#f5a623);border-radius:50%;}
.tgk-recipe-steps ol{padding-left:20px;}
.tgk-recipe-steps li{padding:4px 0;}

/* Product card */
.tgk-block-product{display:flex;gap:18px;background:#fff;border:1px solid var(--tgk-border,#eee);border-radius:var(--tgk-radius,14px);padding:18px;margin:1.6em 0;box-shadow:0 8px 30px rgba(0,0,0,.06);align-items:center;}
.tgk-product-img{width:140px;height:140px;object-fit:contain;flex-shrink:0;border-radius:10px;background:#faf8fc;}
.tgk-product-img.tgk-ph,.tgk-ph{display:flex;align-items:center;justify-content:center;background:var(--tgk-alt-bg,#f4f4f4);color:var(--tgk-muted,#999);border-radius:10px;min-height:120px;}
.tgk-product-name{margin:0 0 6px;}
.tgk-product-foot{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap;}
.tgk-product-price{font-size:1.3rem;font-weight:800;color:var(--tgk-primary,#f5a623);}
@media(max-width:560px){.tgk-block-product{flex-direction:column;text-align:center;}}

/* CTA */
.tgk-block-cta{text-align:center;background:linear-gradient(135deg,rgba(var(--tgk-primary-rgb,245,166,35),.12),rgba(var(--tgk-accent-rgb,77,182,172),.12));border:2px dashed var(--tgk-primary,#f5a623);border-radius:var(--tgk-radius,14px);padding:30px;margin:1.8em 0;}
.tgk-cta-title{margin-top:0;}

/* Age badge */
.tgk-block-agebadge{margin:1em 0;}
.tgk-agebadge{display:inline-block;background:var(--tgk-secondary,#ff8a65);color:#fff;padding:6px 16px;border-radius:999px;font-family:var(--tgk-font-heading,sans-serif);font-weight:700;font-size:.9rem;}

/* Emoji divider */
.tgk-block-divider{text-align:center;margin:2em 0;color:var(--tgk-secondary,#ff8a65);font-size:1.2rem;letter-spacing:8px;}

/* Pin image */
.tgk-block-pin-image{position:relative;display:inline-block;max-width:100%;margin:1.6em 0;border-radius:var(--tgk-radius,14px);overflow:hidden;}
.tgk-block-pin-image img{width:100%;display:block;}
.tgk-pin-overlay{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;padding:30px 18px 16px;font-family:var(--tgk-font-heading,sans-serif);font-weight:700;font-size:1.3rem;}

/* Themed button block */
.tgk-block-button{margin:1.4em 0;}

/* Editor niceties */
.editor-styles-wrapper .tgk-info-edit input,.editor-styles-wrapper .tgk-recipe-meta-edit input{color:inherit;}