/* Only what theme.json and block settings can't do. Everything else is set in the Site Editor.
   Loaded on every page by functions.php. */

/* Widths include padding and borders (so width: 100% boxes with padding fit their container) */
*, *::before, *::after { box-sizing: border-box; }

/* Thinner, lighter text rendering on macOS (theme.json has no setting for it) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Header, banner, main and footer sit flush: theme.json's block gap would otherwise space the page's top-level parts */
.wp-site-blocks > * { margin-block-start: 0; }

/* Headings: a <small> part is the lighter lead-in ("Max Mega Menu <b>Documentation</b>") */
h1 small, h2 small, h3 small { font-size: 1em; font-weight: 400; color: var(--wp--preset--color--muted); }

/* Space after a heading: tighter than the 16px block gap, as before */
:is(.is-layout-flow, .is-layout-constrained) > :is(h2, h3) + * { margin-block-start: 10px; }
:is(.is-layout-flow, .is-layout-constrained) > :is(h4, h5, h6) + * { margin-block-start: 4px; }

/* Docs articles: section headings a step larger, with room above */
.docs-article > :is(h2, h3) { margin-block-start: 40px; font-size: 22px; }
.docs-article > h4 { margin-block-start: 28px; font-size: 17px; }
.docs-article > :first-child { margin-block-start: 0; }

/* Plugin forms (Contact Form 7, EDD checkout and account pages): their fields aren't blocks */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], select, textarea {
	width: 100%; padding: 10px 14px; font: inherit; color: var(--wp--preset--color--ink);
	background: #fff; border: 1px solid var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--md);
}
input:focus, select:focus, textarea:focus { border-color: var(--wp--preset--color--blue); outline: 2px solid rgb(20 118 215 / .2); }
textarea { min-height: 140px; resize: vertical; }
::placeholder { font-style: italic; color: var(--wp--preset--color--muted); }

/* Older docs articles written as plain HTML (block quotes and separators are styled in theme.json) */
blockquote:not(.wp-block-quote) { margin: 0 0 24px; padding: 24px 28px; background: var(--wp--preset--color--page); border-left: 3px solid var(--wp--preset--color--blue); border-radius: 5px; }
hr:not(.wp-block-separator) { height: 1px; margin: 30px 0; border: 0; background: var(--wp--preset--color--line-strong); }

/* Homepage hero: the demo browser around the live demo menu (a Custom HTML widget) */
.menu-container { position: relative; max-width: 960px; margin: 56px auto 0; }
.hm-browser .mega-menu-wrap { border-radius: 0 !important; }
.try-demo { position: absolute; top: -108px; right: -124px; width: 120px; height: 108px; background: url(../images/try-the-demo.svg) center / contain no-repeat; animation: bounceInDown 1s .8s both; }
@media (max-width: 1239px) { .try-demo { display: none; } }
.hm-browser { position: relative; max-width: 960px; background: #fff; border: 1px solid var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--lg); box-shadow: 0 24px 48px -12px rgb(15 23 42 / .18), 0 2px 6px rgb(15 23 42 / .06); text-align: left; }
.hm-browser__bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--wp--preset--color--subtle); border-bottom: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0; }
.hm-browser__bar i { width: 11px; height: 11px; border-radius: 50%; }
.hm-browser__bar i:nth-child(1) { background: #f87171; }
.hm-browser__bar i:nth-child(2) { background: #fbbf24; }
.hm-browser__bar i:nth-child(3) { background: #34d399; }
.hm-browser__url { flex: 1; max-width: 360px; margin: 0 auto; padding: 4px 12px; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--pill); font-size: 12px; color: var(--wp--preset--color--muted); text-align: center; }
.hm-browser__page { display: grid; grid-template-columns: 2fr 1fr; align-content: start; gap: 20px; min-height: 440px; padding: 28px; background: #fff; border-radius: 0 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg); }
.hm-sk { background: #eef2f7; border-radius: var(--wp--custom--radius--sm); }
.hm-sk.h { width: 60%; height: 22px; margin-bottom: 14px; }
.hm-sk.l { height: 10px; margin-bottom: 10px; }
.hm-sk.l.s { width: 80%; }
.hm-sk.img { height: 150px; }
.hm-sk.side { height: 206px; }
.hm-browser__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hm-browser__cards .hm-sk { height: 70px; }
.hm-tryline { margin: 16px 0 0; font-size: 13px; color: var(--wp--preset--color--muted); text-align: center; }
.hm-tryline b { color: var(--wp--preset--color--ink); }
@media (max-width: 781px) {
	.hm-browser__page, .hm-tryline { display: none; }
	.hm-browser { border-radius: var(--wp--custom--radius--md); }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}


/* Documentation index cards: what block settings can't do */
.docs-category__description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-category { transition: border-color .15s ease, box-shadow .15s ease; }
.docs-category:hover { border-color: var(--wp--preset--color--line-strong) !important; box-shadow: var(--wp--preset--shadow--md) !important; }
.docs-category a:hover { color: var(--wp--preset--color--blue) !important; }
.docs-category .wp-block-button__link:hover { color: var(--wp--preset--color--blue-dark) !important; }

/* Documentation search box: the input's own height and padding (the Search block has no setting for them) */
.docs-search .wp-block-search__input { min-height: 52px; padding: 0 16px; }

/* Forms (Contact Form 7 on Support, EDD account and checkout forms): one look for all of them.
   Labels above fields, 20px between fields, no browser fieldset borders. */
fieldset { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
legend { margin-bottom: 12px; padding: 0; font-size: var(--wp--preset--font-size--body); font-weight: 600; color: var(--wp--preset--color--ink); }
.wpcf7-form label, #edd_profile_editor_form label, #edd_checkout_form_wrap label, .edd-blocks-form label {
	display: block; margin-bottom: 6px; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--ink);
}
.wpcf7-form .form-item, #edd_profile_editor_form fieldset > p, .edd-blocks-form__group { margin: 0 0 20px; }
.wpcf7-form .form-item p { margin: 0; }
.wpcf7-form .form-item .input > p + p, .wpcf7-form .form-item small { margin: 6px 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.wpcf7-form .blue-text, .edd-required-indicator { color: var(--wp--preset--color--blue); }
select { min-height: 46px; }
.wpcf7-form textarea { height: 160px; }
/* Contact Form 7 validation and send status */
.wpcf7-form .wpcf7-not-valid { border-color: var(--wp--preset--color--red); }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--red); }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 10px 14px; border: 0; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--amber-tint); color: var(--wp--preset--color--amber); font-size: var(--wp--preset--font-size--small); }
.wpcf7 form.sent .wpcf7-response-output { background: var(--wp--preset--color--green-tint); color: var(--wp--preset--color--green); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background: #fee2e2; color: var(--wp--preset--color--red); }

/* An icon in content: <span class="mm-icon has-material-symbols-font-family" aria-hidden="true">check</span>.
   Material Symbols draws the icon from its name (a ligature), so the text must not be restyled. */
.mm-icon { display: inline-block; font-size: 1.25em; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; vertical-align: -.25em; font-feature-settings: "liga"; }

/* Details blocks (FAQs) and the licence cards' Orders box: a plus before the text that turns into a minus when open,
   in place of the browser's triangle */
.wp-block-details > summary,
.mm-licence__payments > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.wp-block-details > summary::-webkit-details-marker,
.mm-licence__payments > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::before,
.mm-licence__payments > summary::before { content: "add"; flex: none; width: 20px; font-family: var(--wp--preset--font-family--material-symbols); font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: normal; color: var(--wp--preset--color--muted); }
.wp-block-details[open] > summary::before,
.mm-licence__payments[open] > summary::before { content: "remove"; }
/* Details rows: the question in ink, blue on hover; the answer in body colour, lined up with the question text */
.wp-block-details > summary { padding: 16px 0; color: var(--wp--preset--color--ink); font-weight: 600; transition: color .15s; }
.wp-block-details > summary:hover,
.wp-block-details > summary:hover::before { color: var(--wp--preset--color--blue); }
.wp-block-details > :not(summary) { padding-left: 32px; }
.wp-block-details > summary + * { margin-top: 0; }
.wp-block-details[open] { padding-bottom: 16px; }