/* VEDA page frame shared by every redesigned page (Home, About us, Documentation, Software, Contacts).
   The pages are built from WordPress core blocks (Group, Heading, Paragraph, Image, Buttons, List, File, Shortcode);
   the VEDA look comes from the CSS classes on those blocks ("Additional CSS class(es)" in the block settings).
   The frame is as wide as the theme header bar (--veda-gutter, common.css) and is a size container: fluid sizes use
   cqw (1% of the frame width), so the design keeps the proportions it was drawn with.
   In the block editor the same rules are applied with #veda-approved replaced by the editor canvas (see includes/editor.php). */
#veda-approved {
  --va-paper: #f4f4f2; --va-ink: #0c141a; --va-muted: #7c7f80; --va-label: #586068; --va-red: #cd080f; --va-red-dark: #ae070d;
  --va-dark: #0d1419; --va-line: #d6d7d6; --va-on-dark-muted: #9aa0a4; --va-on-dark-line: #a7afb4;
  --va-pad: clamp(28px, 4.55cqw, 66px);
  --va-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7'/%3E%3C/svg%3E");
  --va-i-arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M7 6h11v11'/%3E%3C/svg%3E");
  --va-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-4-4 4 4 4-4M4 17v4h16v-4'/%3E%3C/svg%3E");
  --va-i-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h9l5 5v13H5ZM14 3v6h5M8 13h8M8 17h6'/%3E%3C/svg%3E");
  --va-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.8'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  --va-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='24' height='18' rx='1'/%3E%3Cpath d='m4 8 12 9L28 8'/%3E%3C/svg%3E");
  --va-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 3 5 7-4 4c2 4 4 6 8 8l4-4 7 5-3 5C18 32 0 14 4 6Z'/%3E%3C/svg%3E");
  --va-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 44S8 29 8 18a16 16 0 1 1 32 0c0 11-16 26-16 26Z'/%3E%3Ccircle cx='24' cy='18' r='5'/%3E%3C/svg%3E");
  display: block; width: auto; max-width: none; margin: 20px var(--veda-gutter, 0px); background: var(--va-paper); color: var(--va-ink);
  font-family: "VEDA Sans", Arial, sans-serif !important; font-size: 16px; font-weight: 400; line-height: 1.3; text-align: left;
  -webkit-font-smoothing: antialiased; overflow: clip; container-type: inline-size;
}
#veda-approved, #veda-approved *, #veda-approved *::before, #veda-approved *::after { box-sizing: border-box; }
#veda-approved :is(h1,h2,h3,h4,p,ul,ol,li,figure) { margin: 0; padding: 0; }
#veda-approved :is(h1,h2,h3,h4,p,a,li,span,summary,label,input,textarea,button,figcaption) { font-family: "VEDA Sans", Arial, sans-serif !important; }
#veda-approved :is(h1,h2,h3,h4) { color: inherit; font-style: normal; font-weight: 700; text-transform: none; }
#veda-approved a { color: inherit; text-decoration: none; box-shadow: none; }
#veda-approved img { display: block; max-width: none; height: auto; border: 0; border-radius: 0; }
#veda-approved ul { list-style: none; }
#veda-approved :is(a,summary,input,textarea,button):focus-visible { outline: 3px solid #008c99; outline-offset: 5px; }
#veda-approved .va-skip { position: absolute; top: -100px; left: 20px; z-index: 100; padding: 12px; background: white; }
#veda-approved .va-skip:focus { top: 12px; }
#veda-approved > main { padding: 0 !important; margin: 0 !important; width: 100%; max-width: none; }

/* Core block defaults are neutralised inside the frame: spacing and sizes come from the VEDA classes. */
#veda-approved .wp-block-group { margin: 0; padding: 0; }
/* Themes without theme.json get an extra <div class="wp-block-group__inner-container"> inside every Group;
   it is made transparent so the Group's own grid/flex layout applies to the blocks inside it. */
#veda-approved .wp-block-group__inner-container { display: contents; }
#veda-approved :is(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid) > * { margin-block: 0; }
#veda-approved :is(.wp-block-image, .wp-block-buttons, .wp-block-button, .wp-block-file, .wp-block-list) { margin: 0; }
#veda-approved .wp-block-image img { box-sizing: border-box; vertical-align: bottom; }
#veda-approved .wp-block-buttons { gap: 0; }
#veda-approved .wp-block-button__link { display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; box-shadow: none; }

/* Buttons: add the class "va-button" (red) or "va-button va-button-white" to a Button block. */
#veda-approved .va-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; min-height: 60px; padding: 21px 30px; background: var(--va-red); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0; cursor: pointer; }
#veda-approved .va-button .wp-block-button__link::after { content: ""; flex: 0 0 auto; width: 25px; height: 25px; background: currentColor; -webkit-mask: var(--va-i-arrow) center / contain no-repeat; mask: var(--va-i-arrow) center / contain no-repeat; }
#veda-approved .va-button .wp-block-button__link:hover { background: var(--va-red-dark); }
#veda-approved .va-button-white .wp-block-button__link { color: var(--va-red); background: #fff; }
#veda-approved .va-button-white .wp-block-button__link:hover { color: #fff; background: #151d23; }

/* Small uppercase label with a short red rule (Paragraph with class "va-eyebrow") */
#veda-approved .va-eyebrow { display: flex; align-items: center; gap: 14px; color: var(--va-label); font-size: 14px; line-height: 1.1; text-transform: uppercase; }
#veda-approved .va-eyebrow::before { content: ""; display: block; flex: 0 0 auto; width: 54px; height: 3px; background: var(--va-red); }

/* Red "Contact us" band (Group "va-cta" = Group "va-cta-text" with heading + optional paragraph, then a white button) */
#veda-approved .va-cta { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 39px var(--va-pad) 44px; background: linear-gradient(110deg, #cb060e, #ba030b); }
#veda-approved .va-cta h2 { color: #fff; font-size: clamp(34px, 3.9cqw, 56px); font-weight: 700; line-height: 1.03; letter-spacing: -.024em; }
#veda-approved .va-cta h2::before { content: ""; display: block; width: 46px; height: 3px; margin-bottom: 22px; background: #fff9; }
#veda-approved .va-cta p { margin-top: 16px; color: #fff; font-size: clamp(18px, 1.6cqw, 23px); line-height: 1.3; }
#veda-approved .va-cta .wp-block-buttons { flex: 0 0 278px; }
#veda-approved .va-cta .wp-block-button { width: 100%; }

@media (min-width: 1600px) {
  #veda-approved { --va-pad: 72px; }
}
@media (max-width: 1199px) and (min-width: 761px) {
  #veda-approved .va-eyebrow { font-size: 10px; }
  #veda-approved .va-eyebrow::before { width: 34px; height: 2px; }
  #veda-approved .va-cta { padding-block: 30px; }
  #veda-approved .va-cta h2 { font-size: 3.9cqw; }
  #veda-approved .va-cta .wp-block-buttons { flex-basis: 220px; }
  #veda-approved .va-button-white .wp-block-button__link { min-height: 50px; font-size: 13px; }
}
@media (max-width: 760px) {
  #veda-approved { --va-pad: 26px; }
  #veda-approved .va-cta { flex-direction: column; align-items: flex-start; padding: 35px var(--va-pad) 40px; gap: 27px; }
  #veda-approved .va-cta h2 { font-size: clamp(30px, 5.4cqw, 40px); }
  #veda-approved .va-cta h2 br { display: none; }
  #veda-approved .va-cta p { font-size: 20px; }
  #veda-approved .va-cta .wp-block-buttons { flex-basis: auto; width: 235px; }
  #veda-approved .va-button-white .wp-block-button__link { min-height: 56px; font-size: 14px; }
}
@media (max-width: 400px) {
  #veda-approved { --va-pad: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #veda-approved *, #veda-approved *::before, #veda-approved *::after { transition: none !important; animation: none !important; }
}

/* "Contact us" band placed on a non-VEDA page with [veda_contact_band]: a frame without background or side margins,
   so the band takes the width of the surrounding content (e.g. the WooCommerce product list). */
#veda-approved.veda-embed { margin: clamp(60px, 5.8vw, 110px) 0 0; background: none; overflow: visible; }