/*
Theme Name: CloudSimple
Theme URI: https://cloudsimple.ai
Author: CloudSimple
Description: The CloudSimple marketing site: a bright, friendly block theme. Coral calls to action, deep ink for contrast, and violet, sun, mint, and sky as section colours.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: cloudsimple
*/

/* The look of the home page sections. Blocks carry these class names (Advanced >
   Additional CSS class), so the content stays editable as ordinary blocks. */
:root {
  --cs-bg: #FFFCF7;
  --cs-ink: #1D1838;
  --cs-muted: #4C4766;
  --cs-faint: #6E6988;
  --cs-line: #ECE6DA;
  --cs-violet: #5B45F0;
  --cs-violet-soft: #EFECFF;
  --cs-coral: #FF6A4D;
  --cs-coral-deep: #D9472C;
  --cs-coral-soft: #FFEDE7;
  --cs-sun: #FFC23D;
  --cs-sun-soft: #FFF5D6;
  --cs-mint: #18B57A;
  --cs-mint-soft: #E2F7EE;
  --cs-sky: #2F9BFF;
  --cs-sky-soft: #E4F2FF;
}
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { -webkit-font-smoothing: antialiased }
:where(a, button, summary):focus-visible { outline: 3px solid var(--cs-sun); outline-offset: 3px; border-radius: 8px }
[id] { scroll-margin-top: 90px }

/* Buttons: coral with a pressed edge */
.wp-block-button__link { box-shadow: 0 6px 0 var(--cs-coral-deep), 0 14px 30px rgba(255, 106, 77, .3); transition: transform .15s ease, box-shadow .15s ease }
.wp-block-button__link:hover { transform: translateY(-2px) }
.wp-block-button__link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cs-coral-deep) }
.wp-block-button.is-style-outline .wp-block-button__link { box-shadow: inset 0 0 0 2px var(--cs-line); border: 0; background: #fff; color: var(--cs-ink) }
.wp-block-button.is-style-outline .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px var(--cs-ink) }
@media (prefers-reduced-motion: reduce) { .wp-block-button__link { transition: none } .wp-block-button__link:hover { transform: none } }

/* Header */
.cs-header { position: sticky; top: 0; z-index: 10; background: rgba(255, 252, 247, .9); backdrop-filter: blur(12px) }
.admin-bar .cs-header { top: var(--wp-admin--admin-bar--height, 32px) }
.cs-header .wp-block-navigation a { color: var(--cs-muted); text-decoration: none; font-weight: 500 }
.cs-header .wp-block-navigation a:hover { color: var(--cs-ink) }
.cs-header .wp-block-button__link { box-shadow: 0 4px 0 var(--cs-coral-deep) }
.cs-brand { display: flex; align-items: center; gap: 10px; color: var(--cs-ink); text-decoration: none; font: 700 21px/1 var(--wp--preset--font-family--display) }

/* Small labels above headings */
.cs-tag { display: inline-block; width: fit-content; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600 }
.cs-tag-coral { background: var(--cs-coral-soft); color: #C2401F }
.cs-tag-mint { background: var(--cs-mint-soft); color: #0E6B47 }
.cs-tag-sky { background: var(--cs-sky-soft); color: #136FC4 }
.cs-tag-violet { background: var(--cs-violet-soft); color: var(--cs-violet) }
.cs-tag-white { background: #fff; color: var(--cs-violet) }
.cs-tag-sun { background: var(--cs-sun); color: var(--cs-ink) }
.cs-tag-gold { background: #fff; color: #A87300 }
.cs-mark { background: linear-gradient(transparent 58%, var(--cs-sun) 58%, var(--cs-sun) 90%, transparent 90%); padding: 0 4px }

/* Hero */
.cs-hero { position: relative; overflow: hidden }
.cs-hero::before, .cs-hero::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none }
.cs-hero::before { width: 420px; height: 420px; background: var(--cs-coral-soft); top: -120px; right: -80px }
.cs-hero::after { width: 320px; height: 320px; background: var(--cs-violet-soft); bottom: -100px; left: -120px }
.cs-hero > * { position: relative; z-index: 1 }
.cs-trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; font-weight: 500; color: var(--cs-muted) }
.cs-trust li { display: flex; align-items: center; gap: 8px }
.cs-trust li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--cs-mint-soft); color: var(--cs-mint) }
.cs-trust li:nth-child(2)::before { background: var(--cs-violet-soft); color: var(--cs-violet) }
.cs-trust li:nth-child(3)::before { background: var(--cs-coral-soft); color: var(--cs-coral) }

/* The cards drawn in Custom HTML blocks */
.cs-card { background: #fff; border-radius: 22px; box-shadow: 0 2px 4px rgba(29, 24, 56, .05), 0 18px 44px rgba(29, 24, 56, .1); min-width: 0 }
.cs-demo { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 500px; margin-inline: auto }
.cs-mail { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; transform: rotate(-1.5deg) }
.cs-who { display: flex; align-items: center; gap: 12px }
.cs-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--cs-coral); flex: 0 0 auto }
.cs-who b { display: block; font-size: 15px }
.cs-who span, .cs-faint { font-size: 13px; color: var(--cs-faint) }
.cs-mail p { margin: 0; font-size: 17px; line-height: 1.55 }
.cs-result { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; transform: rotate(1deg); border: 2px solid var(--cs-mint) }
.cs-rhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--cs-faint) }
.cs-live { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 12px; border-radius: 999px; background: var(--cs-mint-soft); color: #0E7A50; font-size: 13px; font-weight: 700 }
.cs-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-mint) }
.cs-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px }
.cs-line + .cs-line { padding-top: 12px; border-top: 1px dashed var(--cs-line) }
.cs-line b { display: block; font-size: 16px; font-weight: 600 }
.cs-line small { font-size: 12px; color: var(--cs-faint) }
.cs-price { white-space: nowrap; font-variant-numeric: tabular-nums }
.cs-price s { color: #A39FB5 }
.cs-price strong { color: #0E7A50 }
.cs-sticker { position: absolute; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(29, 24, 56, .12); white-space: nowrap }
.cs-s1 { background: var(--cs-sun); color: var(--cs-ink); top: 44%; left: -18px; transform: rotate(-6deg) }
.cs-s2 { background: var(--cs-sky); color: #fff; bottom: -14px; right: 10px; transform: rotate(4deg) }
@media (max-width: 520px) { .cs-s1 { left: 4px } }

/* Example requests */
.cs-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px }
.cs-chips li { padding: 12px 18px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--cs-ink) }
.cs-chips li:nth-child(5n+1) { background: var(--cs-sun) }
.cs-chips li:nth-child(5n+2) { background: #FFB4A3 }
.cs-chips li:nth-child(5n+3) { background: #9EE6C6 }
.cs-chips li:nth-child(5n+4) { background: #B9DDFF }
.cs-chips li:nth-child(5n+5) { background: #CFC6FF }

/* Rounded tiles */
.cs-tile { border-radius: 24px; min-width: 0 }
.cs-outline { background: #fff; box-shadow: inset 0 0 0 2px var(--cs-line) }
.cs-num { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font: 800 22px/1 var(--wp--preset--font-family--display); color: #fff }
.cs-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center }

/* Builder sidebar drawing */
.cs-sidebar { max-width: 440px; margin-inline: auto; overflow: hidden }
.cs-sb-head { padding: 16px 20px; background: var(--cs-violet); color: #fff; display: flex; flex-direction: column; gap: 4px }
.cs-sb-head span { font-size: 12px; opacity: .85 }
.cs-sb-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px }
.cs-bubble { max-width: 86%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5 }
.cs-me { align-self: flex-end; background: var(--cs-ink); color: #fff; border-bottom-right-radius: 6px }
.cs-ai { align-self: flex-start; background: #F3F1FA; border-bottom-left-radius: 6px }
.cs-done { border: 2px solid var(--cs-mint); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--cs-faint) }
.cs-undo { text-align: center; padding: 9px; border-radius: 10px; background: #F3F1FA; font-weight: 600; color: var(--cs-ink) }

/* Checklist */
.cs-checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px }
.cs-checks li { display: flex; gap: 12px }
.cs-checks li::before { content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #fff; color: var(--cs-violet) }

/* Settings drawing */
.cs-settings { max-width: 440px; margin-inline: auto; padding: 26px; display: flex; flex-direction: column; gap: 14px; color: var(--cs-ink) }
.cs-settings .cs-h { font-size: 14px; font-weight: 700; color: var(--cs-violet) }
.cs-opt { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500 }
.cs-opt::before { content: "✓"; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 800; background: var(--cs-mint); color: #fff }
.cs-opt.cs-off { color: var(--cs-faint) }
.cs-opt.cs-off::before { content: ""; background: transparent; box-shadow: inset 0 0 0 2px #D5D0E4 }
.cs-foot { padding-top: 12px; border-top: 1px dashed var(--cs-line); font-size: 15px; color: var(--cs-muted) }

/* Pricing */
.cs-big { font: 800 72px/1 var(--wp--preset--font-family--display); letter-spacing: -0.04em }
.cs-big small { font: 600 20px var(--wp--preset--font-family--body); color: var(--cs-faint); letter-spacing: 0 }
.cs-free { padding: 14px 16px; border-radius: 16px; background: var(--cs-mint-soft); font-weight: 600; color: #0E5E3E }
.cs-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.cs-packs div { border-radius: 16px; padding: 14px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px }
.cs-packs div:nth-child(1) { background: var(--cs-sky-soft) }
.cs-packs div:nth-child(2) { background: var(--cs-violet-soft) }
.cs-packs div:nth-child(3) { background: var(--cs-coral-soft) }
.cs-packs div:nth-child(4) { background: var(--cs-mint-soft) }
.cs-packs b { font: 800 26px/1.1 var(--wp--preset--font-family--display) }
.cs-packs span { font-size: 13px; font-weight: 600; color: var(--cs-faint) }
.cs-costs { margin: 0; display: flex; flex-direction: column }
.cs-costs div { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-bottom: 1px dashed var(--cs-line) }
.cs-costs div:first-child { padding-top: 0 }
.cs-costs dt { color: var(--cs-muted) }
.cs-costs dd { margin: 0; font-weight: 700; white-space: nowrap }

/* FAQ (Details blocks) */
.cs-faq .wp-block-details { background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--cs-line); padding: 0 22px }
.cs-faq .wp-block-details[open] { box-shadow: inset 0 0 0 2px var(--cs-violet) }
.cs-faq summary { cursor: pointer; list-style: none; padding-block: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 700 19px/1.3 var(--wp--preset--font-family--display) }
.cs-faq summary::-webkit-details-marker { display: none }
.cs-faq summary::after { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-violet-soft); color: var(--cs-violet); font: 700 20px/1 var(--wp--preset--font-family--body) }
.cs-faq .wp-block-details[open] summary::after { content: "–" }
.cs-faq .wp-block-details p { padding-bottom: 20px; color: var(--cs-muted) }

/* Closing card */
.cs-close { position: relative; overflow: hidden; border-radius: 32px }
.cs-close::before, .cs-close::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none }
.cs-close::before { width: 260px; height: 260px; background: #FFD677; top: -120px; left: -80px }
.cs-close::after { width: 200px; height: 200px; background: #9EE6C6; bottom: -110px; right: -50px }
.cs-close > * { position: relative; z-index: 1 }
.cs-addr { user-select: all }

html { background: var(--cs-bg) }
.cs-center { display: block; width: fit-content; margin-inline: auto !important }
.cs-logo { width: 34px; height: 34px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='15' cy='22' r='9' fill='%23FF6A4D'/%3E%3Ccircle cx='24' cy='17' r='11' fill='%235B45F0'/%3E%3Ccircle cx='29' cy='25' r='7' fill='%23FFC23D'/%3E%3C/svg%3E") center / contain no-repeat }
.cs-num-1 { background: var(--cs-coral) }
.cs-num-2 { background: var(--cs-violet) }
.cs-num-3 { background: var(--cs-mint) }
.cs-icon { background-repeat: no-repeat; background-position: center; background-size: 26px }
.cs-icon-mail { background-color: var(--cs-sky-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F9BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") }
.cs-icon-builder { background-color: var(--cs-violet-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B45F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M15 4v16'/%3E%3C/svg%3E") }
.cs-icon-dashboard { background-color: var(--cs-sun-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='2'/%3E%3Crect x='14' y='3' width='7' height='5' rx='2'/%3E%3Crect x='14' y='12' width='7' height='9' rx='2'/%3E%3Crect x='3' y='16' width='7' height='5' rx='2'/%3E%3C/svg%3E") }
.cs-icon-phone { background-color: var(--cs-mint-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318B57A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") }
footer a { color: inherit; text-decoration: none }
footer a:hover { color: var(--cs-ink) }