/*
Theme Name:        Wings of Learning
Theme URI:         https://learn.wingsofgrace.help
Author:            Wings of Grace
Author URI:        https://wingsofgrace.help
Description:       The public face of First Flight, the homeschool app from Wings of Learning: a sunny sky, Gracie the mascot and a big Sign in button. The app itself (at /app/) comes from the First Flight plugin and doesn't use the theme.
Version:           0.3.0
Requires at least: 6.5
Tested up to:      7.1
Requires PHP:      8.1
License:           GPL-2.0-or-later
Text Domain:       wings-of-learning-theme
Update URI:        https://wolfirstflight.blob.core.windows.net/plugin/wings-of-learning.json
*/

/* Colors and fonts come from theme.json; this file adds the sky, Gracie and the cards. */

:root {
  --wol-r: 22px;
  --wol-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 28px rgba(60, 40, 10, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--cream: #14161a;
    --wp--preset--color--card: #1d2026;
    --wp--preset--color--ink: #eceae6;
    --wp--preset--color--muted: #9ca3af;
    --wp--preset--color--line: #2e323a;
    --wp--preset--color--teal: #2dd4bf;
    --wp--preset--color--teal-soft: #123631;
    --wp--preset--color--gold-soft: #3a2e10;
    --wol-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
  .wp-element-button, .wp-block-button__link { color: #062b27; }
}

body { overflow-x: hidden; }
a { text-underline-offset: .15em; }
/* Buttons inside the hand-drawn sections (core sets these only on real Buttons blocks) */
.wol-hero .wp-block-buttons, .wol-cta .wp-block-buttons, .wol-android .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--teal); border: 2px solid currentColor; }
.wol-wrap { max-width: 1160px; margin-inline: auto; padding-inline: 20px; }

/* ---------- header ---------- */
.wol-header { position: relative; z-index: 3; }
.wol-header .wol-wrap { display: flex; align-items: center; gap: 1rem; padding-block: 14px; }
.wol-brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.wol-brand img { width: 42px; height: 42px; border-radius: 22%; box-shadow: 0 2px 8px rgba(15, 118, 110, .3); }
.wol-brand b { font-family: var(--wp--preset--font-family--fraunces); font-size: 1.25rem; line-height: 1; display: block; }
.wol-brand small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: .2rem; }
.wol-nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; font-weight: 700; }
.wol-nav a { color: inherit; text-decoration: none; }
.wol-nav a:hover { color: var(--wp--preset--color--teal); }
.wol-nav .wol-pill { background: var(--wp--preset--color--teal); color: #fff; padding: .5em 1.1em; border-radius: 999px; font-family: var(--wp--preset--font-family--fredoka); }
.wol-nav .wol-pill:hover { color: #fff; filter: brightness(1.08); }
@media (max-width: 640px) { .wol-nav a:not(.wol-pill) { display: none; } .wol-brand small { display: none; } }

/* ---------- hero: a sky with a sun, clouds and Gracie ---------- */
.wol-hero { position: relative; overflow: hidden; margin-top: -70px; padding: 130px 0 120px;
  background: linear-gradient(180deg, #bae6fd 0%, #e0f2fe 45%, #fbf8f3 100%); color: #1f2937; }
@media (prefers-color-scheme: dark) { .wol-hero { background: linear-gradient(180deg, #0c4a6e 0%, #134e4a 55%, #14161a 100%); color: #eceae6; } }
.wol-hero .wol-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; }
@media (max-width: 820px) { .wol-hero .wol-wrap { grid-template-columns: 1fr; text-align: center; } .wol-hero .wp-block-buttons { justify-content: center; } }
.wol-eyebrow { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--wp--preset--color--teal); margin: 0; }
.wol-title { font-size: clamp(3rem, 9vw, 5.6rem) !important; line-height: .95 !important; margin: .2em 0 .1em !important; letter-spacing: -.02em; }
.wol-tag { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--wp--preset--color--teal); margin: 0 0 .6em; }
.wol-lead { font-size: 1.15rem; max-width: 34em; }
@media (max-width: 820px) { .wol-lead { margin-inline: auto; } }
.wol-sun { position: absolute; top: 90px; right: 8%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, #fde68a 0 45%, #fbbf24 60%, rgba(251, 191, 36, 0) 72%); }
.wol-cloud { position: absolute; width: 180px; height: 60px; background: #fff; border-radius: 60px; opacity: .9; }
.wol-cloud::before, .wol-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.wol-cloud::before { width: 80px; height: 80px; top: -40px; left: 28px; }
.wol-cloud::after { width: 60px; height: 60px; top: -26px; left: 90px; }
@media (prefers-color-scheme: dark) { .wol-cloud, .wol-cloud::before, .wol-cloud::after { background: #334155; } }
.wol-cloud.c1 { top: 150px; left: -40px; transform: scale(.8); }
.wol-cloud.c2 { top: 330px; right: -50px; transform: scale(.6); opacity: .7; }
.wol-cloud.c3 { bottom: 90px; left: 38%; transform: scale(.45); opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .wol-cloud.c1 { animation: wol-drift 38s linear infinite alternate; }
  .wol-cloud.c2 { animation: wol-drift 46s linear infinite alternate-reverse; }
}
@keyframes wol-drift { from { translate: 0 0; } to { translate: 60px 0; } }

.wol-gracie { position: relative; display: grid; place-items: center; }
.wol-gracie svg { width: min(320px, 70vw); height: auto; filter: drop-shadow(0 14px 18px rgba(15, 118, 110, .25)); }
.wol-bubble { position: absolute; top: 4%; left: 0; background: #fff; color: #1f2937; font-family: var(--wp--preset--font-family--fredoka);
  font-weight: 600; padding: .55em 1em; border-radius: 18px; box-shadow: var(--wol-shadow); transform: rotate(-4deg); }
.wol-bubble::after { content: ""; position: absolute; bottom: -9px; right: 26px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
@media (max-width: 820px) { .wol-bubble { left: 50%; transform: translateX(-120%) rotate(-4deg); } }
@media (prefers-reduced-motion: no-preference) {
  .wol-gracie svg { animation: wol-bob 3.4s ease-in-out infinite; }
  .wol-wing { transform-origin: 62px 118px; animation: wol-flap 1.7s ease-in-out infinite; }
  .wol-feather { animation: wol-fall 9s ease-in-out infinite; }
}
@keyframes wol-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes wol-flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes wol-fall { 0% { transform: translate(0, -20px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-40px, 160px) rotate(40deg); opacity: 0; } }
.wol-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; color: var(--wp--preset--color--cream); }

/* ---------- sections and cards ---------- */
.wol-section { padding-block: clamp(3rem, 7vw, 5.5rem) !important; }
.wol-section > .wol-wrap > .wp-block-heading:first-child, .wol-h2 { text-align: center; margin-bottom: .2em; }
.wol-sub { text-align: center; color: var(--wp--preset--color--muted); font-size: 1.1rem; max-width: 40em; margin: 0 auto 2.2rem !important; }
.wol-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.1rem; }
.wol-card { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wol-r);
  padding: 1.4rem 1.4rem 1.2rem !important; box-shadow: var(--wol-shadow); transition: transform .2s ease; margin: 0 !important; }
.wol-card:hover { transform: translateY(-4px) rotate(-.4deg); }
.wol-card h3 { margin: .35em 0 .3em; font-size: 1.25rem; }
.wol-card p { margin: 0; }
.wol-emoji { font-size: 2.2rem; line-height: 1; margin: 0 !important; display: inline-grid; place-items: center; width: 64px; height: 64px;
  border-radius: 18px; background: var(--wp--preset--color--teal-soft); }
.wol-card:nth-child(3n+2) .wol-emoji { background: var(--wp--preset--color--gold-soft); }
.wol-card:nth-child(3n) .wol-emoji { background: #fce7f3; }
@media (prefers-color-scheme: dark) { .wol-card:nth-child(3n) .wol-emoji { background: #3b1730; } }
.wol-tint { background: var(--wp--preset--color--teal-soft); }

/* Egg to Eagle */
.wol-path { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; max-width: 980px; counter-reset: s; }
@media (max-width: 760px) { .wol-path { grid-template-columns: repeat(4, 1fr); } }
.wol-path li { text-align: center; background: var(--wp--preset--color--card); border-radius: 18px; padding: .9rem .3rem .7rem; box-shadow: var(--wol-shadow); }
.wol-path .b { display: block; font-size: 2.3rem; line-height: 1.1; }
.wol-path b { display: block; font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; margin-top: .2rem; }
.wol-path small { color: var(--wp--preset--color--muted); font-weight: 700; }
.wol-path li:last-child { background: linear-gradient(160deg, #fef3c7, #fde68a); color: #1f2937; }
.wol-path li:last-child small { color: #92400e; }
.fthr { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; background: center / contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5C14 3.6 8.4 7.6 6.5 13.6L5 18.5l1.4.4.9-2.6c4.4-.3 8.5-2.6 10.8-6.3l-3.3.4 3.9-2.2c.8-1.4 1.4-3 1.8-4.7z' fill='%23f59e0b'/%3E%3Cpath d='M3.5 21.5 13 9.5' stroke='%23b45309' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wol-verse { text-align: center; font-family: var(--wp--preset--font-family--fraunces); font-size: 1.35rem; font-style: italic; margin-top: 2rem !important; }
.wol-verse cite { display: block; font-style: normal; font-family: var(--wp--preset--font-family--nunito); font-size: .9rem; font-weight: 800; color: var(--wp--preset--color--teal); margin-top: .3rem; }

/* parents + call to action */
.wol-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.wol-check li { padding-left: 2.1rem; position: relative; font-size: 1.05rem; }
.wol-check li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--wp--preset--color--teal); color: #fff; font-weight: 800; font-size: .85rem; }
.wol-cta { text-align: center; border-radius: 32px; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem !important; color: #fff;
  background: radial-gradient(circle at 85% 15%, #fbbf24 0 40px, transparent 41px), linear-gradient(135deg, #14b8a6, #0f766e 60%, #115e59); }
.wol-cta h2, .wol-cta p { color: #fff; }
.wol-cta .wp-block-buttons { justify-content: center; }
.wol-cta .wp-block-button__link { background: #fff !important; color: #0f766e !important; }
.wol-cta .is-style-outline .wp-block-button__link { background: transparent !important; color: #fff !important; border-color: #fff !important; }

/* ---------- footer ---------- */
.wol-footer { border-top: 1px solid var(--wp--preset--color--line); margin-top: 3rem; }
.wol-footer .wol-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; color: var(--wp--preset--color--muted); font-size: .95rem; }
.wol-footer nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.wol-footer a { color: inherit; font-weight: 700; }

/* ordinary pages (privacy policy, terms) */
.wol-page { padding-block: 2.5rem 1rem; }
.wol-page .wp-block-post-title { font-size: clamp(2rem, 5vw, 3rem); }

/* Android app download */
.wol-android { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.8rem !important; }
.wol-android .wol-emoji { flex: none; width: 84px; height: 84px; font-size: 2.8rem; }
.wol-android h2 { margin: 0 0 .3em; }
.wol-android:hover { transform: none; }
@media (max-width: 600px) { .wol-android { flex-direction: column; } }
.wol-howto { margin-top: 1rem; }
.wol-howto summary { cursor: pointer; font-weight: 800; color: var(--wp--preset--color--teal); }
.wol-howto .small { font-size: .9rem; color: var(--wp--preset--color--muted); }
#android.wol-section { padding-bottom: 0 !important; }