/**
 * GUL Block Controls — shared design surface.
 * Classes here are emitted onto block wrappers by JS (client save) and by
 * GUL_Block_Controls::wrap() (server render). One source of truth.
 */

/* -------------- 1. Color schemes ----------------
 *  Default = white bg / slate text (theme.json baseline).
 *  Blue / Orange / Dark = inverse-friendly variants. Every GUL block
 *  should use these tokens via var() so a scheme swap reskins the block.
 */
.gul-scheme-blue,
.gul-scheme-orange,
.gul-scheme-dark {
	--gul-bg:        var(--gul-scheme-bg);
	--gul-text:      var(--gul-scheme-text);
	--gul-text-mute: var(--gul-scheme-text-mute);
	--gul-card-bg:   var(--gul-scheme-card);
	--gul-accent:    var(--gul-scheme-accent);
	background-color: var(--gul-scheme-bg);
	color: var(--gul-scheme-text);
}
.gul-scheme-blue {
	--gul-scheme-bg: #0093fe;
	--gul-scheme-text: #ffffff;
	--gul-scheme-text-mute: rgba(255,255,255,.85);
	--gul-scheme-card: rgba(255,255,255,.10);
	--gul-scheme-accent: #fcb900;
}
.gul-scheme-orange {
	--gul-scheme-bg: #fcb900;
	--gul-scheme-text: #1e293b;
	--gul-scheme-text-mute: rgba(30,41,59,.78);
	--gul-scheme-card: rgba(255,255,255,.55);
	--gul-scheme-accent: #0093fe;
}
.gul-scheme-dark {
	--gul-scheme-bg: #000000;
	--gul-scheme-text: #ffffff;
	--gul-scheme-text-mute: rgba(255,255,255,.72);
	--gul-scheme-card: rgba(255,255,255,.06);
	--gul-scheme-accent: #fcb900;
}
.gul-scheme-blue h1, .gul-scheme-blue h2, .gul-scheme-blue h3, .gul-scheme-blue h4,
.gul-scheme-dark h1, .gul-scheme-dark h2, .gul-scheme-dark h3, .gul-scheme-dark h4 { color: #ffffff; }
.gul-scheme-blue a:not(.gul-btn), .gul-scheme-dark a:not(.gul-btn) { color: #fcb900; }

/* -------------- 2. Heading gradient ----------------
 *  Add gul-hg-<key> to wrapper. Anything with .gul-gradient-text inside picks it up.
 */
[class*="gul-hg-"] .gul-gradient-text { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.gul-hg-brand    .gul-gradient-text { background-image: linear-gradient(135deg, #0093fe 0%, #fcb900 100%); }
.gul-hg-primary  .gul-gradient-text { background-image: linear-gradient(135deg, #0093fe 0%, #007bda 100%); }
.gul-hg-dark     .gul-gradient-text { background-image: linear-gradient(135deg, #000000 0%, #1e293b 100%); }
.gul-hg-sunset   .gul-gradient-text { background-image: linear-gradient(135deg, #ff5c00 0%, #ff2e89 100%); }
.gul-hg-cool     .gul-gradient-text { background-image: linear-gradient(135deg, #00d4ff 0%, #7b3aed 100%); }
.gul-hg-custom   .gul-gradient-text { background-image: linear-gradient(135deg, var(--gul-hg-from, #0093fe) 0%, var(--gul-hg-to, #fcb900) 100%); }

/* Inline highlight — wrap any inline text in .gul-text-highlight to get a marker bar */
.gul-text-highlight { background-image: linear-gradient(120deg, #fcb900 0%, #ffcc33 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 88%; padding: 0 .15em; }
.gul-text-highlight--gradient-bg { background-image: linear-gradient(135deg, #00d4ff 0%, #fcb900 100%); background-size: 100% 100%; color: #1e293b; padding: .05em .3em; border-radius: 6px; }
.gul-text-highlight--underline { background-image: none; position: relative; }
.gul-text-highlight--underline::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -6px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Cpath d='M0 3 Q 25 0, 50 3 T 100 3' stroke='%2300d4ff' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x; }

/* -------------- 3. Spacing & width ---------------- */
.gul-py-tight  { padding-top: 24px;  padding-bottom: 24px; }
.gul-py-normal { padding-top: 48px;  padding-bottom: 48px; }
.gul-py-lg     { padding-top: 80px;  padding-bottom: 80px; }
.gul-py-xl     { padding-top: 120px; padding-bottom: 120px; }
.gul-mw-narrow > * { max-width: 768px;  margin-left: auto; margin-right: auto; }
.gul-mw-std    > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.gul-mw-wide   > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.gul-mw-xwide  > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.gul-mw-full   > * { max-width: none; }

/* -------------- 4. Roundedness (cards / buttons / images) ---------------- */
.gul-round-sharp .gul-card, .gul-round-sharp .gul-btn, .gul-round-sharp img { border-radius: 0 !important; }
.gul-round-soft  .gul-card { border-radius: 12px; }
.gul-round-soft  .gul-btn  { border-radius: 12px; }
.gul-round-pill  .gul-card { border-radius: 24px; }
.gul-round-pill  .gul-btn  { border-radius: 9999px; }

/* -------------- 5. Defaults: rounded edges everywhere unless overridden ---------------- */
.gul-btn { border-radius: 9999px; }
.gul-card,
.gul-card--soft,
.gul-pill,
.gul-faq-item,
.gul-blog-card,
.gul-pricing-card { border-radius: 16px; }

/* -------------- 6. Background image helper ---------------- */
[style*="--gul-bg-image"] { background-image: var(--gul-bg-image); background-size: cover; background-position: center; }