/*
Theme Name: DevMayor
Theme URI: https://devmayor.com
Author: DevMayor
Description: Block theme for devmayor.com — navy, seal blue and gold, Bricolage Grotesque + Figtree.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: devmayor
*/

:root {
  --dm-navy: #0a1428;
  --dm-navy-2: #111e3b;
  --dm-seal: #2a52be;
  --dm-accent: #1f4bb8;
  --dm-accent-light: #5b86f0;
  --dm-gold: #f2c14e;
  --dm-sky: #eef3fc;
  --dm-line: #dce3f1;
  --dm-muted: #55607a;
  --dm-radius: 18px;
  --dm-shadow: 0 1px 2px rgba(10, 20, 40, .06), 0 18px 50px -12px rgba(10, 20, 40, .28);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
/* full-width sections sit edge to edge; spacing comes from their own padding */
.wp-block-post-content > .alignfull { margin-block: 0 !important; }
main.wp-block-group { margin-block: 0; }
.wp-site-blocks { overflow-x: clip; }
code, kbd { font-family: var(--wp--preset--font-family--mono); font-size: .9em; background: var(--dm-sky); padding: .1em .35em; border-radius: 6px; }

/* ---------- header ---------- */
.dm-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 20, 40, .92); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dm-header .dm-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.dm-header .dm-brand svg { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.dm-header .wp-block-navigation { color: rgba(255, 255, 255, .82); font-weight: 550; }
.dm-header .wp-block-navigation a { text-decoration: none; }
.dm-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: #fff; }
.dm-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--dm-navy); color: #fff; }
.dm-header .wp-block-navigation__responsive-container-open, .dm-header .wp-block-navigation__responsive-container-close { color: #fff; }
.dm-header .wp-block-button__link { padding: .55rem 1rem; font-size: .95rem; }
@media (max-width: 640px) { .dm-header .dm-header-cta { display: none; } }

/* ---------- shared ---------- */
.dm-eyebrow { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-accent); margin: 0; }
.dm-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dm-gold); box-shadow: 0 0 0 4px rgba(242, 193, 78, .25); }
.dm-lead { font-size: var(--wp--preset--font-size--large); color: var(--dm-muted); line-height: 1.6; }
.dm-muted { color: var(--dm-muted); }
.dm-shot img, img.dm-shot { border-radius: var(--dm-radius); box-shadow: var(--dm-shadow); border: 1px solid rgba(10, 20, 40, .08); display: block; width: 100%; }
.dm-shot figcaption { color: var(--dm-muted); font-size: .9rem; text-align: center; margin-top: .9rem; }
.dm-section { padding-block: var(--wp--preset--spacing--60); }
.dm-alt { background: var(--dm-sky); }
.dm-center { text-align: center; }
.dm-center .dm-eyebrow { justify-content: center; }
.dm-narrow { max-width: 720px; margin-inline: auto !important; }

/* ---------- hero ---------- */
.dm-hero { position: relative; background: radial-gradient(1200px 600px at 80% -10%, rgba(91, 134, 240, .35), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(42, 82, 190, .45), transparent 60%), var(--dm-navy); color: #e8edf8; padding-top: var(--wp--preset--spacing--60); padding-bottom: 0; }
.dm-hero h1 { color: #fff; }
.dm-hero h1 em { font-style: normal; color: var(--dm-gold); }
.dm-hero .dm-lead { color: #b9c4dd; }
.dm-hero .dm-eyebrow { color: #a9bdf5; }
.dm-hero .dm-hero-shot { margin-top: var(--wp--preset--spacing--50); margin-bottom: calc(-1 * var(--wp--preset--spacing--60)); position: relative; z-index: 2; }
.dm-hero .dm-hero-shot img { border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.dm-hero + * { padding-top: calc(var(--wp--preset--spacing--60) * 2) !important; }
.dm-btn-ghost .wp-block-button__link { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.dm-btn-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.dm-btn-gold .wp-block-button__link { background: var(--dm-gold) !important; color: var(--dm-navy) !important; }
.dm-btn-gold .wp-block-button__link:hover { background: #ffd36b !important; }
.dm-hero-note { color: #8e9bb8; font-size: .9rem; }

/* ---------- works with strip ---------- */
.dm-works { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.dm-works span { border: 1px solid var(--dm-line); background: #fff; border-radius: 999px; padding: .45rem 1rem; font-weight: 600; font-size: .95rem; }

/* ---------- steps & cards ---------- */
.dm-steps { counter-reset: step; }
.dm-card { background: #fff; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); padding: 1.6rem 1.6rem 1.4rem; height: 100%; }
.dm-card h3 { margin-top: 0; }
.dm-card p { margin-bottom: 0; color: var(--dm-muted); }
.dm-steps .dm-card::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dm-navy); color: var(--dm-gold); font-family: var(--wp--preset--font-family--display); font-weight: 700; margin-bottom: 1rem; }
.dm-card .dm-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--dm-sky); color: var(--dm-accent); margin-bottom: 1rem; }
.dm-card .dm-icon svg { width: 1.35rem; height: 1.35rem; }
.dm-center .dm-card { text-align: left; }
.dm-grid-cards > .wp-block-column { display: flex; }
.dm-grid-cards > .wp-block-column > .dm-card { flex: 1; }

/* ---------- feature rows ---------- */
.dm-feature { align-items: center !important; gap: clamp(2rem, 5vw, 4.5rem) !important; }
.dm-feature + .dm-feature { margin-top: var(--wp--preset--spacing--60) !important; }
.dm-feature h2 { font-size: var(--wp--preset--font-size--x-large); }
.dm-checks { list-style: none; padding-left: 0; }
.dm-checks li { position: relative; padding-left: 1.9rem; margin: .55rem 0; }
.dm-checks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--dm-sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231F4BB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; box-shadow: inset 0 0 0 1px #c9d6f3; }
.dm-dark .dm-checks li::before { background-color: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23F2C14E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- dark section ---------- */
.dm-dark { background: radial-gradient(900px 500px at 100% 0%, rgba(42, 82, 190, .35), transparent 60%), var(--dm-navy); color: #c8d2e8; }
.dm-dark h2, .dm-dark h3 { color: #fff; }
.dm-dark .dm-eyebrow { color: #a9bdf5; }
.dm-dark .dm-lead, .dm-dark .dm-muted { color: #aeb9d3; }
.dm-dark .dm-card { background: var(--dm-navy-2); border-color: rgba(255, 255, 255, .09); }
.dm-dark .dm-card p { color: #aeb9d3; }
.dm-dark code { background: rgba(255, 255, 255, .08); color: #e8edf8; }
.dm-dark a { color: #a9bdf5; }

/* ---------- inset approval card ---------- */
.dm-stack { position: relative; }
.dm-stack .dm-inset { position: absolute; left: -6%; bottom: -12%; width: 62%; margin: 0; }
.dm-stack .dm-inset img { border-radius: 14px; box-shadow: 0 24px 60px -16px rgba(10, 20, 40, .45); }
@media (max-width: 781px) { .dm-stack .dm-inset { position: static; width: 100%; margin-top: 1rem; } }

/* ---------- FAQ ---------- */
.dm-faq .wp-block-details { border: 1px solid var(--dm-line); border-radius: 14px; padding: 1rem 1.25rem; background: #fff; margin-top: .75rem; }
.dm-faq .wp-block-details summary { font-weight: 650; font-size: 1.0625rem; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.dm-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.dm-faq .wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: -.1em; font-size: 1.4rem; color: var(--dm-accent); transition: transform .2s; }
.dm-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.dm-faq .wp-block-details p { color: var(--dm-muted); margin-top: .75rem; }

/* ---------- CTA ---------- */
.dm-cta { background: linear-gradient(135deg, var(--dm-seal), var(--dm-accent) 55%, #173a92); color: #e8edf8; border-radius: 28px; padding: clamp(2rem, 6vw, 4rem) !important; }
.dm-cta h2 { color: #fff; }
.dm-cta p { color: #d4ddf3; }

/* ---------- page header (inner pages) ---------- */
.dm-pagehead { background: radial-gradient(900px 400px at 90% -20%, rgba(91, 134, 240, .35), transparent 60%), var(--dm-navy); color: #c8d2e8; padding-block: var(--wp--preset--spacing--60) !important; }
.dm-pagehead h1 { color: #fff; font-size: var(--wp--preset--font-size--xx-large); }
.dm-pagehead .dm-lead { color: #b9c4dd; }
.dm-pagehead .dm-eyebrow { color: #a9bdf5; }

/* ---------- prose (how it works, security) ---------- */
.dm-prose h2 { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--x-large); scroll-margin-top: 90px; }
.dm-prose h3 { margin-top: 2rem; }
.dm-prose figure { margin-block: 1.75rem; }
.dm-toc { background: var(--dm-sky); border-radius: var(--dm-radius); padding: 1.25rem 1.5rem !important; }
.dm-toc ul { columns: 2; column-gap: 2rem; margin: .5rem 0 0; padding-left: 1.1rem; }
@media (max-width: 600px) { .dm-toc ul { columns: 1; } }
.dm-table table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.dm-table th, .dm-table td { border-bottom: 1px solid var(--dm-line); padding: .7rem .6rem; text-align: left; vertical-align: top; }
.dm-table th { font-weight: 650; background: var(--dm-sky); }

/* ---------- waitlist ---------- */
.dm-eyebrow.has-text-align-center { justify-content: center; }
.dm-waitlist { background: #fff; border-radius: 20px; padding: 1.75rem !important; color: var(--dm-navy); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .5); }
.dm-waitlist h3 { color: var(--dm-navy) !important; margin: 0 0 .25rem; }
.dm-waitlist p { color: var(--dm-muted) !important; margin: 0 0 1rem; font-size: .95rem; }
.dm-waitlist .hostinger-reach-block-form-fields { display: flex; flex-direction: column; gap: .75rem; }
.dm-waitlist label { font-weight: 600; font-size: .9rem; color: var(--dm-navy); }
.dm-waitlist input[type=email] { width: 100%; box-sizing: border-box; font: inherit; padding: .8rem 1rem; border: 1.5px solid var(--dm-line); border-radius: 12px; margin-top: .35rem; color: var(--dm-navy); background: #fff; }
.dm-waitlist input[type=email]:focus { outline: none; border-color: var(--dm-accent-light); box-shadow: 0 0 0 4px rgba(91, 134, 240, .2); }
.dm-waitlist .hostinger-reach-block-submit { background: var(--dm-gold) !important; color: var(--dm-navy) !important; border: 0; border-radius: 12px; padding: .85rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer; }
.dm-waitlist .hostinger-reach-block-submit:hover { background: #ffd36b !important; }

/* ---------- footer ---------- */
.dm-footer { background: var(--dm-navy); color: #8e9bb8; font-size: .95rem; }
.dm-footer a { color: #c8d2e8; text-decoration: none; }
.dm-footer a:hover { color: #fff; }
.dm-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .5rem; font-family: var(--wp--preset--font-family--body); letter-spacing: 0; }
.dm-footer ul { list-style: none; padding: 0; margin: 0; }
.dm-footer li { margin: .35rem 0; }
.dm-footer .dm-brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.25rem; }
.dm-footer .dm-brand svg { width: 36px; height: 36px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }