/*
Theme Name: Eggzekiel
Theme URI: https://eggzekiel.com
Author: Eggzekiel
Description: One-page dark landing theme for Eggzekiel with the egg-and-yolk logo, a contact email card and a "Get in touch" inquiry form. Inquiries are emailed to you and saved under Inquiries in the dashboard. Edit text, email and dropdown choices in Appearance > Customize > Eggzekiel.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eggzekiel
*/

/* Layout: one centered column — logo hero, contact card, then a "Get in touch" link that unfolds the inquiry form. Dark take on logo option 3. */
:root{
  --night:#150c1d;      /* page ground: plum pushed toward black */
  --plum:#452e5f;       /* the egg */
  --plum-deep:#261734;  /* raised surfaces */
  --lav:#dbc9f3;        /* the logo's lavender, now used for type */
  --lav-dim:#a996c2;
  --yolk:#fcb808;       /* the yolk */
  --line:rgba(219,201,243,.16);
  --danger:#ff8f8f;
  --display:"Fredoka","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --page:#dbc9f3;       /* matches the logo background */
  --ink:#1c0b20;        /* the wordmark */
  --ink-soft:#452e5f;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--page);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;min-height:100vh}
.wrap{max-width:44rem;margin:0 auto;padding-inline:20px;padding-block:clamp(2.5rem,7vw,5rem) 3rem;display:flex;flex-direction:column;gap:2.75rem}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.logo{display:flex;align-items:center;gap:clamp(.75rem,2.5vw,1.25rem)}
.logo svg{width:clamp(4.5rem,15vw,6.5rem);height:auto;flex:none}
.wordmark{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,9vw,4rem);letter-spacing:.02em;line-height:1;color:var(--lav)}
.tagline{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,3.6vw,1.5rem);color:var(--ink);margin:0;text-wrap:balance}
.tagline b{color:var(--ink-soft);font-weight:700}
.intro{margin:0;max-width:32rem;color:var(--ink-soft);text-wrap:pretty}

/* Contact card */
.card{background:var(--plum-deep);color:var(--lav);color-scheme:dark;border-radius:22px;padding:clamp(1.5rem,4vw,2.25rem);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;box-shadow:0 30px 60px -30px rgba(28,11,32,.55)}
.card > *{width:100%}
.card h2{font-family:var(--display);font-weight:600;font-size:1.35rem;margin:0;color:var(--lav)}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--yolk);font-weight:600;margin:0 0 .15rem}
.info{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0}
.info div{min-width:0}
.info dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lav-dim)}
.info dd{margin:.1rem 0 0;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;overflow-wrap:anywhere;font-weight:500}
.info a{color:var(--lav);text-decoration-color:rgba(252,184,8,.5);text-underline-offset:3px}
.copy{font:inherit;font-size:.72rem;color:var(--lav-dim);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.1rem .6rem;cursor:pointer}
.copy:hover{color:var(--lav);border-color:var(--lav-dim)}

/* Get in touch toggle */
.toggle{width:auto!important;align-self:center;display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:600;font-size:1.1rem;
  background:var(--yolk);color:var(--night);border:0;border-radius:999px;padding:.7rem 1.35rem;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.toggle:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(252,184,8,.55)}
.toggle svg{width:1rem;height:1rem;transition:transform .25s ease}
.toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
:focus-visible{outline:2px solid var(--yolk);outline-offset:3px}

.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.panel.open{grid-template-rows:1fr}
.panel > div{overflow:hidden}
form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.field{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0}
.field.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:600;color:var(--lav)}
label span{color:var(--lav-dim);font-weight:400}
input,select,textarea{font:inherit;color:var(--lav);background:var(--night);border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;width:100%}
input::placeholder,textarea::placeholder{color:rgba(169,150,194,.6)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--yolk);box-shadow:0 0 0 3px rgba(252,184,8,.18)}
select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fcb808' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:.75rem;padding-right:2.3rem}
select option{background:var(--plum-deep);color:var(--lav)}
textarea{min-height:7rem;resize:vertical}
.err{font-size:.8rem;color:var(--danger);min-height:0}
.actions{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.send{font-family:var(--display);font-weight:600;font-size:1rem;background:var(--lav);color:var(--night);border:0;border-radius:999px;padding:.65rem 1.5rem;cursor:pointer}
.send:hover{background:#fff}
.send:disabled{opacity:.6;cursor:wait}
.status{font-size:.9rem;color:var(--lav-dim);margin:0;min-width:0}
.done{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.done h3{font-family:var(--display);font-weight:600;margin:0;color:var(--yolk);font-size:1.2rem}
.done p{margin:0;color:var(--lav-dim)}
.done pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--night);border:1px solid var(--line);border-radius:12px;padding:.85rem;margin:0;font:inherit;font-size:.9rem;color:var(--lav)}
.link-btn{align-self:center;font:inherit;font-weight:600;color:var(--lav);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

footer{text-align:center;font-size:.8rem;color:var(--ink-soft)}

@media (max-width:560px){form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

body{margin:0}
.notice{border-radius:12px;padding:.75rem 1rem;font-size:.95rem}
.notice.ok{background:rgba(252,184,8,.12);border:1px solid rgba(252,184,8,.4);color:var(--lav)}
.notice.bad{background:rgba(255,143,143,.1);border:1px solid rgba(255,143,143,.4);color:var(--lav)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.logo-img{display:block;width:min(100%,38rem);height:auto;-webkit-mask-image:radial-gradient(ellipse 72% 80% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 72% 80% at 50% 50%,#000 72%,transparent 100%)}