/*
 * db-gn-wp.css: data-h support (2026-11-12). The elements print their former <h2>–<h6> as <p data-h="N">
 * (or, when a title is typed as <h2>/<h3>, as that heading with data-h="N"). In this file:
 *   - every p rule reads p:not(:where([data-h])), so paragraph rules keep off them;
 *   - every h2–h6 rule reads hN:not(:where([data-h])) and has an :is(p,h2,h3,h4,h5,h6):where([data-h="N"])
 *     twin (same weight, same place), so any tag with data-h="N" gets exactly the level-N look.
 * Same transformation the old inc/db-gn-headings.php applied on the fly (extended to any tag); baked in once.
 */
/*
 * Geonutrition — the WordPress layer. The design itself is geonutrition.css (the mockup's
 * stylesheet, untouched); every fix that only WordPress / Flatsome / the plugins need lives here.
 */

/* Flatsome paints #wrapper / #main white → the design's Ivory page */
body.gn #wrapper,
body.gn #main { background: var(--ivory, #F2F3EC); }
body.gn .page-wrapper { padding: 0; }
body.gn #content.content-area { padding: 0; }

/* Flatsome list indent (ul li { margin-left: 1.3em }) — the design sets its own */
.gn .gn-nav__list li,
.gn .gn-dropdown li,
.gn .gn-mnav__sub li,
.gn .ft-footer li,
.gn .bl-pages li { margin-left: 0; }

/* ============ Forms = Contact Form 7 (inc/db-gn-forms.php). The design's markup sits inside CF7's
   form; CF7's wrappers step aside (as if the inputs were the design's own) and its tips, spinner and
   answer box stay hidden — the design shows its own (geonutrition.js) ============ */
.gn .wpcf7 { color: inherit; position: static; }
.gn .wpcf7 .wpcf7-form-control-wrap,
.gn .wpcf7 .wpcf7-acceptance,
.gn .wpcf7 .wpcf7-list-item { display: contents; }
.gn .wpcf7 .hidden-fields-container { display: none; }
.gn .wpcf7 .wpcf7-not-valid-tip,
.gn .wpcf7 .wpcf7-response-output,
.gn .wpcf7 .wpcf7-spinner { display: none !important; }
/* Flatsome's CF7 labels (full-width inline-block) → blocks, as in the mockup */
.gn .wpcf7 label { display: block; width: auto; }
.gn .wpcf7 label.gn-check { display: flex; }
.gn .wpcf7-form.submitting * { opacity: 1; }

/* Flatsome's form defaults vs the design's forms */
.gn form#booking-form,
.gn form#contact-form,
.gn form#newsletter-form,
.gn form.rc-search { background: none; border: 0; padding: 0; margin-bottom: 0; overflow: visible; }
.gn .gn-check,
.gn .gn-field label { font-weight: inherit; text-transform: none; letter-spacing: inherit; }
.gn input[type="text"],
.gn input[type="email"],
.gn input[type="tel"],
.gn input[type="search"],
.gn textarea { box-shadow: none; }
.gn .button { margin-right: 0; }

/* ============ Home hero video: play button when the phone refuses autoplay (db-gn-wp.js) ============ */
.gn .db-gn-vplay { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px !important; padding: 0; border: 0; border-radius: 50%; background: rgba(242, 243, 236, .92); color: #26473A; box-shadow: 0 8px 24px rgba(38, 71, 58, .25); cursor: pointer; min-height: 0; }
.gn .db-gn-vplay .gn-icon { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; stroke: none; }
.gn .db-gn-vplay:focus-visible { outline: 3px solid #F27348; outline-offset: 3px; }

/* ============ Article category chips — the colour chosen per tab (Άρθρα → Κατηγορίες (tabs)) ============ */
.bl-chip--pine { background: #26473A; }
.bl-chip--lime { background: #A7AE37; }
.bl-chip--coral { background: #F27348; }
.bl-chip--sage { background: #8CA096; }

/* ============ Article text (the_content of the old posts) ============ */
.gn .ar-doc img,
.gn .rp-intro__box img { max-width: 100%; height: auto; border-radius: 14px; }
.gn .ar-doc .aligncenter,
.gn .rp-intro__box .aligncenter { display: block; margin: 1.4em auto; }
.gn .ar-doc .alignleft { float: left; margin: .3em 1.2em 1em 0; max-width: 50%; }
.gn .ar-doc .alignright { float: right; margin: .3em 0 1em 1.2em; max-width: 50%; }
.gn .ar-doc .wp-caption,
.gn .rp-intro__box .wp-caption { max-width: 100%; }
.gn .ar-doc .wp-caption-text { font-size: .85em; opacity: .75; text-align: center; }
.gn .ar-doc iframe,
.gn .rp-intro__box iframe { max-width: 100%; border: 0; border-radius: 14px; }
.gn .ar-doc p:not(:where([data-h])):empty,
.gn .rp-intro__box p:not(:where([data-h])):empty { display: none; }
/* old posts carry Flatsome/WP blocks: keep them inside the text column */
.gn .ar-doc .row,
.gn .rp-intro__box .row { margin-left: 0; margin-right: 0; max-width: 100%; }
.gn .ar-doc::after { content: ""; display: table; clear: both; }

/* WP Recipe Maker leftovers inside an intro (roundup cards keep the plugin's look) */
.gn .rp-intro__box .wprm-recipe-roundup-item { margin: 1.5em 0; }

/* ============ Recipe intro: the old posts' texts are long — the details box stays small and sticky
   (in the mockup the intro was short, so the box was stretched to the text's height) ============ */
@media (min-width: 1100px) {
  .rp-intro__grid { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); align-items: start; }
  .rp-meta { position: sticky; top: calc(var(--head-h, 120px) + 16px); }
  .rp-meta__who { margin-top: 0; }
  .rp-intro__box { justify-content: flex-start; }
}

/* ============ Headings inside the old posts' text — a bit smaller than the design's 28px,
   the same in articles and in the recipe intro (where Flatsome's 35px applied) ============ */
.gn .ar-doc h2:not(:where([data-h])),.gn .ar-doc :is(p,h2,h3,h4,h5,h6):where([data-h="2"]),
.gn .rp-intro__box h2:not(:where([data-h])) ,
.gn .rp-intro__box :is(p,h2,h3,h4,h5,h6):where([data-h="2"]) { margin-top: 32px !important; margin-bottom: 12px !important; font-family: var(--f-title); font-weight: 500 !important; font-size: 24px; line-height: 1.3; letter-spacing: -.02em !important; color: #26473A; }
.gn .ar-doc h3:not(:where([data-h])),.gn .ar-doc :is(p,h2,h3,h4,h5,h6):where([data-h="3"]),
.gn .rp-intro__box h3:not(:where([data-h])) ,
.gn .rp-intro__box :is(p,h2,h3,h4,h5,h6):where([data-h="3"]) { margin-top: 24px !important; margin-bottom: 10px !important; font-family: var(--f-title); font-weight: 500 !important; font-size: 20px; line-height: 1.35; color: #26473A; }
.gn .ar-doc h4:not(:where([data-h])),.gn .ar-doc :is(p,h2,h3,h4,h5,h6):where([data-h="4"]),
.gn .rp-intro__box h4:not(:where([data-h])) ,
.gn .rp-intro__box :is(p,h2,h3,h4,h5,h6):where([data-h="4"]) { margin-top: 20px !important; margin-bottom: 8px !important; font-family: var(--f-title); font-weight: 500 !important; font-size: 18px; line-height: 1.4; color: #26473A; }
@media (max-width: 549px) {
  .gn .ar-doc h2:not(:where([data-h])),.gn .ar-doc :is(p,h2,h3,h4,h5,h6):where([data-h="2"]), .gn .rp-intro__box h2:not(:where([data-h])) , .gn .rp-intro__box :is(p,h2,h3,h4,h5,h6):where([data-h="2"]) { font-size: 21px; margin-top: 26px !important; }
  .gn .ar-doc h3:not(:where([data-h])),.gn .ar-doc :is(p,h2,h3,h4,h5,h6):where([data-h="3"]), .gn .rp-intro__box h3:not(:where([data-h])) , .gn .rp-intro__box :is(p,h2,h3,h4,h5,h6):where([data-h="3"]) { font-size: 18px; }
  .gn .ar-doc h4:not(:where([data-h])),.gn .ar-doc :is(p,h2,h3,h4,h5,h6):where([data-h="4"]), .gn .rp-intro__box h4:not(:where([data-h])) , .gn .rp-intro__box :is(p,h2,h3,h4,h5,h6):where([data-h="4"]) { font-size: 17px; }
}
/* old posts carry empty headings (and headings that only hold an image) → no heading gap */
.gn .ar-doc :is(h2:not(:where([data-h])), h3:not(:where([data-h])), h4:not(:where([data-h]))):empty,.gn .ar-doc :is(:is(p,h2,h3,h4,h5,h6):where([data-h="2"]), :is(p,h2,h3,h4,h5,h6):where([data-h="3"]), :is(p,h2,h3,h4,h5,h6):where([data-h="4"])):empty,
.gn .rp-intro__box :is(h2:not(:where([data-h])), h3:not(:where([data-h])), h4:not(:where([data-h]))):empty ,
.gn .rp-intro__box :is(:is(p,h2,h3,h4,h5,h6):where([data-h="2"]), :is(p,h2,h3,h4,h5,h6):where([data-h="3"]), :is(p,h2,h3,h4,h5,h6):where([data-h="4"])):empty { display: none; }
.gn .ar-doc :is(h2:not(:where([data-h])), h3:not(:where([data-h])), h4:not(:where([data-h]))):has(> img:only-child),.gn .ar-doc :is(:is(p,h2,h3,h4,h5,h6):where([data-h="2"]), :is(p,h2,h3,h4,h5,h6):where([data-h="3"]), :is(p,h2,h3,h4,h5,h6):where([data-h="4"])):has(> img:only-child),
.gn .rp-intro__box :is(h2:not(:where([data-h])), h3:not(:where([data-h])), h4:not(:where([data-h]))):has(> img:only-child) ,
.gn .rp-intro__box :is(:is(p,h2,h3,h4,h5,h6):where([data-h="2"]), :is(p,h2,h3,h4,h5,h6):where([data-h="3"]), :is(p,h2,h3,h4,h5,h6):where([data-h="4"])):has(> img:only-child) { margin: 16px 0 !important; font-size: inherit; line-height: 0; }

/* ============ Recipe box: ingredient / step groups (WP Recipe Maker «group» titles, e.g. «Dip γιαουρτιού») ============ */
.gn .rp-ing__group { margin: 22px 0 6px !important; padding-top: 18px; border-top: 1px solid rgba(242, 243, 236, .18); font-family: var(--f-title); font-size: 17px; line-height: 1.3; color: #F2F3EC; }
.gn .rp-ing__group strong { font-weight: 500; color: inherit; }
.gn .rp-steps__group { margin: 22px 0 8px !important; font-family: var(--f-title); font-size: 18px; line-height: 1.3; color: #26473A; }
.gn .rp-steps__group strong { font-weight: 500; }
/* the "tick what you already have" hint: once, under the last list */
.gn .rp-ing__hint:has(~ .rp-ing__list) { display: none; }

/* ============ Recipe box from WP Recipe Maker data ============ */
.gn .rp-ing__group,
.gn .rp-steps__group { margin: 1.1em 0 .4em; }

/* print: only the recipe */
@media print {
  .gn-header, .gn-mnav, .ft-footer, .gn-float, .bl-more, .rp-serve__btns, .rp-hero__actions, .gn-modal, .gn-toast { display: none !important; }
}

/* ============ Sticky header vs the WordPress admin bar (see also db_gn_admin_bar_css) ============ */
.admin-bar .gn-mnav__panel { top: 32px; }
@media (max-width: 782px) { .admin-bar .gn-mnav__panel { top: 46px; } }

/* ============ Home hero (UX Builder → «Hero (βίντεο + κάρτες)»), edited 2026-11-11:
   - the title «Μαζί χτίζουμε…» is an <h2> (it was the page's <h1>) and keeps the design's h1 title
     look (the .bx-text h1 rules of geonutrition.css, final values);
   - the optional «Τίτλος H1» field prints the page's <h1> above it (empty = not printed) in the
     design's kicker look (as .au-philo__kicker / .rp-kicker), light on the pine card; it undoes the
     big .bx-text h1 title rules, which it matches too. ============ */
.gn .bx-text h2:not(:where([data-h])).bx-title ,.gn .bx-text :is(p,h2,h3,h4,h5,h6):where([data-h="2"]).bx-title {
  max-width: none !important;
  margin: 0 0 -10px !important;
  font-family: var(--f-title);
  font-size: clamp(2rem, 2.9vw, 3rem);
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: -.03em !important;
  color: #F2F3EC;
}
.gn .bx-text h2:not(:where([data-h])).bx-title em ,.gn .bx-text :is(p,h2,h3,h4,h5,h6):where([data-h="2"]).bx-title em { font-style: normal; color: #A7AE37; }
@media (max-width: 549px) {
  .gn .bx-text h2:not(:where([data-h])).bx-title ,.gn .bx-text :is(p,h2,h3,h4,h5,h6):where([data-h="2"]).bx-title { margin-bottom: -6px !important; }
}
.gn .bx-text h1.bx-h1 {
  max-width: none !important;
  margin: 0 0 -18px !important; /* the card's 32px gap → 14px down to the title */
  font-family: var(--f-title);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500 !important;
  line-height: 1.4;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: rgba(242, 243, 236, .78);
}
@media (max-width: 549px) {
  .gn .bx-text h1.bx-h1 { margin-bottom: -10px !important; } /* 22px gap → 12px */
}
/* the card's reveal is timed for 4 lines; with the H1 there are 5 */
.gn-js .bx-text.is-in > :nth-child(5) { transition-delay: calc(var(--rd, 0s) + .65s); }