/*
Theme Name: My Astra
Theme URI:  https://unbounddiscovery.com
Author:     hyperclock
Author URI: https://unbounddiscovery.com
Template:   astra
Version:    1.0
License:    GNU General Public License v2 or later
*/

/*
 * UNBOUND DISCOVERY — Astra child-theme starter
 * Midnight blue, warm brass, parchment-white. No external fonts or scripts.
 *
 * INSTALL
 * Append this CSS below your existing child-theme style.css header. Preserve
 * the header and existing child-theme setup. The stylesheet must be enqueued.
 * Alternatively paste into Appearance > Customize > Additional CSS.
 * Use one location, not both. This file is CSS, not an installable theme ZIP.
 *
 * HOME PAGE / GUTENBERG
 * Use Astra's full-width page layout with no sidebar. Disable the homepage
 * title and transparent header. Use a full-width Cover block for the hero.
 * In each block's Advanced > Additional CSS class(es), enter without a dot:
 * Cover: ud-hero
 * Paragraph above H1: ud-eyebrow
 * H1: ud-hero-title
 * Supporting paragraph: ud-hero-lead
 * Buttons block: ud-hero-actions
 * Second Button: use the core Outline style (is-style-outline).
 * Put hero text/buttons directly inside the Cover; no extra colored background.
 * Set Cover content position to center left. Choose a focal point toward the
 * right-hand landmark. Remove manually assigned heights/font sizes/colors if
 * they override these styles. This CSS supplies its own responsive overlay.
 *
 * Three Columns block: ud-pillars
 * Each Column: ud-pillar plus ud-history / ud-science / ud-myth
 * Inside a Query Loop Post Template, wrap each post's content in a Group with
 * class ud-story-card; give its inner text Group class ud-card-body.
 * Generic section Group: ud-section
 * Latest-stories Group: give HTML anchor stories for a #stories button link.
 *
 * SUGGESTED HERO COPY
 * Eyebrow: HISTORY / SCIENCE / MYTH
 * H1: Follow the evidence. Explore the unknown.
 * Lead: Ancient mysteries, unexplained phenomena and enduring legends—
 * investigated through historical records, scientific research and folklore.
 * Primary button: Explore the Stories  [link: #stories]
 * Secondary button: Watch on YouTube  [use your actual channel URL]
 *
 * QWEN IMAGE 2.1 HERO PROMPT
 * Cinematic editorial landscape for an evidence-led documentary website named
 * Unbound Discovery, ultrawide 21:9 composition. An imagined remote rocky
 * coastline at blue hour, a rugged headland and a modest weathered stone arch
 * positioned entirely within the right third, subtle geological detail,
 * distant mountains fading into atmospheric mist, calm dark ocean reflecting
 * a faint warm amber glow near the horizon, sparse realistic stars appearing
 * in a deep midnight-blue sky. Thoughtful, mysterious, grounded and inviting;
 * natural materials, restrained contrast, fine photographic texture. Keep
 * the left 55 percent very dark, smooth and visually quiet, with only soft
 * gradients of navy sky and mist for a large white headline. Keep all distinct
 * landmarks in the right third and away from the extreme edges. Restrained
 * palette: midnight navy #0B111B, slate blue #152131, warm brass #D7B477.
 * No people. No lettering. An imagined landscape, not a named archaeological
 * site or a claimed documentary photograph. Website background composition.
 *
 * NEGATIVE PROMPT (if your interface supports a separate negative field)
 * text, letters, words, logo, watermark, people, faces, silhouettes, spacecraft,
 * aliens, monsters, dragons, floating islands, glowing runes, fantasy castle,
 * recognizable archaeological monument, portal, neon, excessive lens flare,
 * oversized moon, multiple moons, crowded composition, collage, bright left
 * side, central focal subject, oversaturation, cartoon, blurry stone textures
 *
 * Generate around 2560x1100 if supported; otherwise use the nearest landscape
 * size and crop. Upload as WebP/AVIF after compression. In the Cover block,
 * treat purely atmospheric imagery as decorative (empty alt text). Caption
 * it as illustrative artwork if discussing its origin. Do not bake text in.
 *
 * Integration note: starter CSS has not been tested on your installed site.
 * Astra settings, plugins and inline block styles can change the result.
 */

:root {
  --ud-bg: #0b111b;
  --ud-panel: #111c2a;
  --ud-panel-light: #172536;
  --ud-text: #d7dfe8;
  --ud-heading: #f4f1e9;
  --ud-muted: #a9b8c9;
  --ud-accent: #d7b477;
  --ud-accent-hover: #efd1a0;
  --ud-science: #8fc9de;
  --ud-myth: #c3b1e3;
  --ud-border: #354456;
  --ud-radius: 14px;
  --ud-width: 1200px;
  --ud-shadow: 0 18px 48px rgb(0 0 0 / 20%);
  --ud-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Astra palette: set matching colors in the Customizer for editor previews. */
body {
  --ast-global-color-0: var(--ud-accent);
  --ast-global-color-1: var(--ud-accent-hover);
  --ast-global-color-2: var(--ud-heading);
  --ast-global-color-3: var(--ud-text);
  --ast-global-color-4: var(--ud-panel);
  --ast-global-color-5: var(--ud-bg);
  --ast-global-color-6: var(--ud-muted);
  --ast-global-color-7: var(--ud-border);
  --ast-global-color-8: var(--ud-panel-light);
  background: var(--ud-bg);
  color: var(--ud-text);
  font-family: var(--ud-font);
  font-size: 17px;
  line-height: 1.75;
}

body #page,
body #content {
  background-color: var(--ud-bg);
  color: var(--ud-text);
}

body :is(h1, h2, h3, h4, h5, h6, .entry-title) {
  color: var(--ud-heading);
  font-family: var(--ud-font);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.entry-content h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.entry-content h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
body a { color: var(--ud-accent); text-underline-offset: 0.2em; }
body a:hover { color: var(--ud-accent-hover); }
.entry-content p a,
.entry-content li a { text-decoration: underline; }
::selection { color: var(--ud-bg); background: var(--ud-accent); }

/* Visible keyboard focus; do not remove this without a replacement. */
body :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--ud-science);
  outline-offset: 4px;
}

/* Astra header and dropdowns. Keep transparent header disabled initially. */
#masthead :is(.ast-primary-header-bar, .ast-above-header-bar, .ast-below-header-bar),
#masthead .ast-mobile-header-content {
  background: var(--ud-bg);
  border-color: var(--ud-border);
}
#masthead .site-title a { color: var(--ud-heading); font-weight: 750; }
#masthead .site-description { color: var(--ud-muted); }
#masthead .main-header-menu .menu-link { color: var(--ud-text); }
#masthead .main-header-menu .menu-link:hover,
#masthead .main-header-menu .current-menu-item > .menu-link,
#masthead .main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--ud-accent);
}
#masthead .main-header-menu .sub-menu {
  background: var(--ud-panel);
  border-color: var(--ud-border);
  box-shadow: var(--ud-shadow);
}
#masthead .menu-toggle {
  color: var(--ud-heading);
  background: var(--ud-panel);
  border-color: var(--ud-border);
  border-radius: 6px;
}

/* Core Buttons: warm brass, readable text, modest rounded corners. */
body .wp-block-button .wp-block-button__link {
  padding: 0.85em 1.45em;
  border: 1px solid var(--ud-accent);
  border-radius: 6px;
  background: var(--ud-accent);
  color: var(--ud-bg);
  font-family: var(--ud-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
body .wp-block-button .wp-block-button__link:hover {
  background: var(--ud-accent-hover);
  border-color: var(--ud-accent-hover);
  color: var(--ud-bg);
}
body .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--ud-heading);
  border-color: var(--ud-muted);
}
body .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--ud-panel-light);
  color: var(--ud-heading);
  border-color: var(--ud-accent);
}

/* Hero: Gutenberg Cover block. Set its background image in WordPress. */
body .entry-content .wp-block-cover.ud-hero {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  min-height: clamp(560px, 78svh, 860px);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  background: var(--ud-bg);
  color: var(--ud-heading);
  overflow: hidden;
}
.wp-block-cover.ud-hero > .wp-block-cover__background { opacity: 0; }
.wp-block-cover.ud-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgb(11 17 27 / 97%) 0%, rgb(11 17 27 / 89%) 42%,
    rgb(11 17 27 / 35%) 74%, rgb(11 17 27 / 12%) 100%),
    linear-gradient(0deg, var(--ud-bg), transparent 35%);
}
.wp-block-cover.ud-hero > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ud-width);
  margin-inline: auto;
  text-align: left;
}
.entry-content .ud-hero .ud-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--ud-accent);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  line-height: 1.8;
  text-transform: uppercase;
}
.entry-content .ud-hero .ud-hero-title {
  max-width: 15ch;
  margin: 0 0 1.5rem;
  color: var(--ud-heading);
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.07;
  letter-spacing: -0.04em;
}
.entry-content .ud-hero .ud-hero-lead {
  max-width: 46ch;
  margin: 0 0 2rem;
  color: var(--ud-text);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}
.ud-hero .ud-hero-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0;
}

/* Sections and the three editorial pillars. */
.entry-content .ud-section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  scroll-margin-top: 2rem;
}
.entry-content .ud-pillars { gap: 1.5rem; }
.entry-content .ud-pillar {
  --ud-pillar-accent: var(--ud-accent);
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ud-panel);
  border: 1px solid var(--ud-border);
  border-top: 3px solid var(--ud-pillar-accent);
  border-radius: var(--ud-radius);
}
.entry-content .ud-pillar.ud-science { --ud-pillar-accent: var(--ud-science); }
.entry-content .ud-pillar.ud-myth { --ud-pillar-accent: var(--ud-myth); }
.ud-pillar > :first-child { margin-top: 0; }
.ud-pillar > :last-child { margin-bottom: 0; }
.entry-content .ud-pillar h2,
.entry-content .ud-pillar h3 { color: var(--ud-pillar-accent); }

/* Optional Query Loop story cards: image outside the inner text Group. */
.entry-content .ud-story-card {
  height: 100%;
  overflow: hidden;
  background: var(--ud-panel);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  box-shadow: var(--ud-shadow);
}
.ud-story-card .wp-block-post-featured-image { margin: 0; }
.ud-story-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ud-story-card .ud-card-body { padding: 1.5rem; }
.ud-story-card .wp-block-post-title { font-size: 1.4rem; }
.ud-story-card .wp-block-post-title a { color: var(--ud-heading); text-decoration: none; }
.ud-story-card .wp-block-post-title a:hover { color: var(--ud-accent); }
.ud-story-card :is(.wp-block-post-date, .wp-block-post-terms) { font-size: 0.85rem; }

/* Long articles: readable paragraphs while allowing wide figures/video. */
body.ast-separate-container :is(.ast-article-single, .ast-article-post, .comments-area) {
  background: var(--ud-panel);
  color: var(--ud-text);
  border-color: var(--ud-border);
}
body.ast-separate-container .ast-archive-description {
  background: var(--ud-bg);
  color: var(--ud-text);
}
.single-post .entry-content > :is(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: 720px;
  margin-inline: auto;
}
.single-post .entry-content > :is(h2, h3) { margin-top: 2em; }
.entry-content p { margin-bottom: 1.35em; }
.entry-content :is(figcaption, .wp-element-caption),
.entry-meta, .entry-meta a { color: var(--ud-muted); }
.entry-content blockquote {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--ud-accent);
  background: var(--ud-panel-light);
  color: var(--ud-heading);
  font-size: 1.1rem;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content :is(th, td) { border-color: var(--ud-border); }
.entry-content th { background: var(--ud-panel-light); color: var(--ud-heading); }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--ud-panel-light);
}
.entry-content pre { background: var(--ud-panel-light); color: var(--ud-text); }
.entry-content hr { background: var(--ud-border); border: 0; height: 1px; }
.entry-content .wp-block-embed { margin-block: 2rem; }

/* Standard WordPress search/comment fields; plugin-specific forms may differ. */
#content :is(input[type="text"], input[type="email"], input[type="url"],
  input[type="search"], input[type="password"], textarea, select) {
  background: var(--ud-bg);
  color: var(--ud-heading);
  border: 1px solid var(--ud-muted);
  border-radius: 6px;
}
#content :is(input, textarea)::placeholder { color: var(--ud-muted); opacity: 1; }
#content :is(input[type="submit"], .wp-block-search__button) {
  background: var(--ud-accent);
  color: var(--ud-bg);
  border: 1px solid var(--ud-accent);
  border-radius: 6px;
  font-weight: 700;
}

#colophon,
#colophon :is(.site-primary-footer-wrap, .site-above-footer-wrap, .site-below-footer-wrap) {
  background: var(--ud-bg);
  color: var(--ud-muted);
  border-color: var(--ud-border);
}
#colophon a { color: var(--ud-text); }
#colophon a:hover { color: var(--ud-accent); }

/* Mobile: darker overlay over the entire crop; flexible, never fixed height. */
@media (max-width: 781px) {
  body .entry-content .wp-block-cover.ud-hero {
    min-height: 540px;
    padding: 4rem 1.25rem;
  }
  .wp-block-cover.ud-hero::after {
    background: linear-gradient(180deg,
      rgb(11 17 27 / 86%) 0%, rgb(11 17 27 / 93%) 72%, var(--ud-bg) 100%);
  }
  .entry-content .ud-pillars { gap: 1rem; }
}
@media (max-width: 420px) {
  .ud-hero .ud-hero-actions > .wp-block-button { width: 100%; }
  .ud-hero .ud-hero-actions .wp-block-button__link { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  body .wp-block-button .wp-block-button__link { transition: none; }
}