/*
Theme Name: R.O.S.E. Coming Soon
Theme URI: https://github.com/Brick60/ROSEF
Author: Brick60
Description: Minimal single-page coming-soon theme for Rain or Shine Equines. Phase 0 only — replaced by a GeneratePress/Astra child theme in Phase 1. Renders the content of a WordPress page so copy stays editable in wp-admin without touching code.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rose-comingsoon
*/

/* Palette is defined once here and swapped wholesale for dark. Nothing
   below hardcodes a color, so rebranding in Phase 1 is a single edit. */
:root {
  --bg:        #f6f4ef;
  --bg-card:   #fffdf9;
  --ink:       #2b2723;
  --ink-soft:  #5d564e;
  --accent:    #4a6141;
  --accent-in: #ffffff;
  --line:      #e2ddd3;
  --error:     #a13b2f;
  --success:   #33602c;
  --shadow:    0 1px 2px rgba(43, 39, 35, .05), 0 8px 24px rgba(43, 39, 35, .06);
  --radius:    10px;
  --measure:   34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #16150f;
    --bg-card:   #201e18;
    --ink:       #ece7dd;
    --ink-soft:  #a8a096;
    --accent:    #9dbb8f;
    --accent-in: #16150f;
    --line:      #34302a;
    --error:     #e59a90;
    --success:   #9dbb8f;
    --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rose-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  gap: 2rem;
}

.rose-card {
  width: 100%;
  /*
   * `min-width: 0` matters more than it looks. Flex children default to
   * `min-width: auto`, so the card refuses to shrink below the min-content
   * width of the form inside it — which pushed the whole page into
   * horizontal overflow on phones. Capping at 100% as well as the measure
   * keeps it honest on narrow viewports.
   */
  min-width: 0;
  max-width: min(100%, var(--measure));
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.75rem, 5vw, 3rem);
}

/* Hero -------------------------------------------------------------- */

/*
 * The logo artwork is opaque on a white background, so on the dark theme
 * it would otherwise read as a bright rectangle punched out of the card.
 * Giving it its own rounded light plaque makes that white intentional
 * rather than accidental, in both themes.
 */
.rose-hero {
  margin: 0 auto 1.75rem;
  max-width: min(100%, 30rem);
  background: #fff;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  line-height: 0;
}

.rose-hero img,
.rose-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Present in the DOM for assistive tech and search engines; the logo
   carries the name visually. */
.rose-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.rose-title {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 650;
  text-align: center;
  text-wrap: balance;
}

.rose-rule {
  width: 3rem;
  height: 2px;
  margin: 1.25rem auto;
  border: 0;
  background: var(--accent);
  opacity: .55;
}

.rose-body {
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
}
.rose-body > :first-child { margin-top: 0; }
.rose-body > :last-child  { margin-bottom: 0; }

/* Form -------------------------------------------------------------- */

.rose-form { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }

.rose-form-heading {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 620;
  text-align: center;
}

.rose-form input[type="text"],
.rose-form input[type="email"],
.rose-form input[type="tel"],
.rose-form textarea,
.rose-form select {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.rose-form input:focus-visible,
.rose-form textarea:focus-visible,
.rose-form select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.rose-form textarea { min-height: 8rem; resize: vertical; }

.rose-form label { display: block; margin-bottom: .3rem; font-size: .9rem; font-weight: 560; }

.rose-form button,
.rose-form input[type="submit"] {
  width: 100%;
  padding: .8rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-in);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.rose-form button:hover,
.rose-form input[type="submit"]:hover { opacity: .88; }
.rose-form button:focus-visible,
.rose-form input[type="submit"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Fluent Forms integration ------------------------------------------ */

/*
 * The plugin drives its own look from a custom property, so point that at
 * the theme accent rather than fighting it rule by rule.
 */
.rose-form { --fluentform-primary: var(--accent); }

.rose-form .ff-el-group,
.rose-form .wpcf7-form-control-wrap { margin-bottom: 1rem; }
.rose-form .ff-message-success { color: var(--success); }
.rose-form .ff-el-is-error .text-danger,
.rose-form .wpcf7-not-valid-tip { color: var(--error); font-size: .875rem; }

/*
 * The plugin injects `form.fluent_form_N .ff-btn-submit { color: #fff }`
 * from an inline <style> in the body, which outranks anything we set in
 * the head at equal specificity. These selectors carry one more class so
 * they win on merit rather than with !important.
 *
 * The hardcoded white matters: on the dark theme the accent is a pale
 * green, and white text on it lands near 1.9:1 — well under WCAG AA. The
 * button text has to follow the same token as every other inverted
 * surface in the theme.
 */
.rose-card .rose-form .ff-btn-submit:not(.ff_btn_no_style) {
  width: 100%;
  padding: .8rem 1.25rem;
  font: inherit;
  font-weight: 600;
  background-color: var(--accent);
  color: var(--accent-in);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.rose-card .rose-form .ff-btn-submit:not(.ff_btn_no_style):hover { opacity: .88; }
.rose-card .rose-form .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Same specificity problem for the fields themselves. */
.rose-card .rose-form input[type="text"],
.rose-card .rose-form input[type="email"],
.rose-card .rose-form input[type="tel"],
.rose-card .rose-form textarea {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rose-card .rose-form input[type="text"]:focus,
.rose-card .rose-form input[type="email"]:focus,
.rose-card .rose-form input[type="tel"]:focus,
.rose-card .rose-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.rose-card .rose-form .ff-el-input--label label { color: var(--ink); font-weight: 560; }
.rose-card .rose-form ::placeholder { color: var(--ink-soft); opacity: .7; }

/* Same min-content trap applies inside the plugin's own flex/grid rows. */
.rose-form .ff-el-group,
.rose-form .ff-t-container,
.rose-form .ff-t-cell { min-width: 0; }

.rose-card .rose-form input,
.rose-card .rose-form textarea,
.rose-card .rose-form select { min-width: 0; max-width: 100%; }

/* Nothing should be able to push the page sideways. */
.rose-wrap { width: 100%; max-width: 100%; overflow-x: clip; }
.rose-body { overflow-wrap: break-word; }

/* Footer ------------------------------------------------------------ */

.rose-foot {
  color: var(--ink-soft);
  font-size: .85rem;
  text-align: center;
}
.rose-foot a { color: inherit; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}