/*
Theme Name: G-Mac Digital Garden v6
Theme URI: https://g-mac.uk
Author: Gareth Mac
Author URI: https://g-mac.uk
Description: A calm, reading-focused WordPress block theme for g-mac.uk. Warm paper tones, ambient light animation, seasonal awareness. Built for Full Site Editing.
Version: 6.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-mac-digital-garden-v6
Tags: full-site-editing, block-theme
Tested up to: 6.7
Requires PHP: 7.4

Copyright (C) 2026 Gareth Mac
*/


/* ============================================================
   SEASONAL CUSTOM PROPERTIES
   Applied by js/custom.js based on current date (or manual override).
   The ambient light system reads from these instead of hardcoded values,
   so the garden shifts subtly with the year.
   ============================================================ */

:root {
  --season-bounce-light: #d3dae3; /* default = winter */
  --season-leaf-image: url('./assets/images/leaves-winter.png');
  --season-morning: #9fb3bf;
  --season-evening: #fccc83;
  --season-dusk: #db7a2a;
  --season-dawn: #16132b;
}

body.season-spring {
  --season-bounce-light: #c8d5b9;
  --season-leaf-image: url('./assets/images/leaves-spring.png');
  --season-morning: #b8cbb5;
  --season-evening: #f5c9a0;
  --season-dusk: #c4895a;
  --season-dawn: #1a2030;
}

body.season-summer {
  --season-bounce-light: #d3b87a;
  --season-leaf-image: url('./assets/images/leaves-summer.png');
  --season-morning: #a8c090;
  --season-evening: #f0b860;
  --season-dusk: #d4783a;
  --season-dawn: #141828;
}

body.season-autumn {
  --season-bounce-light: #c4713a;
  --season-leaf-image: url('./assets/images/leaves-autumn.png');
  --season-morning: #b09070;
  --season-evening: #e8904a;
  --season-dusk: #c05830;
  --season-dawn: #180f10;
}

body.season-winter {
  --season-bounce-light: #9fb3bf;
  --season-leaf-image: url('./assets/images/leaves-winter.png');
  --season-morning: #9fb3bf;
  --season-evening: #fccc83;
  --season-dusk: #db7a2a;
  --season-dawn: #16132b;
}


/* ============================================================
   LINKS
   ============================================================ */

a {
  text-decoration: underline;
  transition: color 0.5s ease;
}

a:hover {
  color: var(--wp--preset--color--rust);
  text-decoration: underline;
}


/* ============================================================
   BODY & ANIMATION SYSTEM
   The body background animates between time-of-day colours on
   toggle. .animation-ready is added briefly by JS, then removed
   so the animation doesn't loop indefinitely.
   ============================================================ */

body {
  --light: var(--wp--preset--color--day);
  --dark: var(--wp--preset--color--night);
  --timing-fn: cubic-bezier(0.455, 0.190, 0.000, 0.985);

  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: var(--wp--preset--color--warm-white);

  animation-duration: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

body.animation-ready {
  animation-play-state: running;
  animation-duration: 1s;
  animation-name: sunrise;
}

body.animation-ready.dark {
  animation-duration: 1.7s;
  animation-name: sunset;
}

body.dark {
  --light: var(--wp--preset--color--night);
  --dark: var(--wp--preset--color--day);
  --wp--preset--color--shadow: var(--wp--preset--color--black);
  --wp--preset--color--bounce-light: var(--wp--preset--color--dawn);
  --wp--preset--color--warm-white: #1A1917;
  --wp--preset--color--ink: #F7F4EF;
}


/* ============================================================
   KEYFRAME ANIMATIONS — SUNRISE & SUNSET
   ============================================================ */

@keyframes sunrise {
  0%   { background-color: var(--wp--preset--color--night); }
  10%  { background-color: var(--wp--preset--color--dawn); }
  35%  { background-color: var(--season-morning); }
  100% { background-color: var(--wp--preset--color--day); }
}

@keyframes sunset {
  0%   { background-color: var(--wp--preset--color--day); }
  30%  { background-color: var(--season-evening); }
  60%  { background-color: var(--season-dusk); }
  90%  { background-color: var(--season-dawn); }
  100% { background-color: var(--wp--preset--color--night); }
}


/* ============================================================
   DAPPLED LIGHT CONTAINER
   The full ambient overlay system. All child elements are
   injected into #dappled-light by js/custom.js.
   pointer-events: none — it's purely visual, never blocks clicks.
   ============================================================ */

#dappled-light {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}


/* ============================================================
   PROGRESSIVE BLUR
   Four overlapping divs with increasing blur amounts, masked so
   the blur is heavier toward the bottom-right corner. Creates
   depth without a literal drop shadow.
   ============================================================ */

#progressive-blur {
  position: absolute;
  height: 100%;
  width: 100%;
}

#progressive-blur > div {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  backdrop-filter: blur(var(--blur-amount));
  mask-image: linear-gradient(252deg, transparent, transparent var(--stop1), black var(--stop2), black);
}

#progressive-blur > div:nth-child(1) {
  --blur-amount: 6px;
  --stop1: 0%;
  --stop2: 0%;
}

#progressive-blur > div:nth-child(2) {
  --blur-amount: 12px;
  --stop1: 40%;
  --stop2: 80%;
}

#progressive-blur > div:nth-child(3) {
  --blur-amount: 48px;
  --stop1: 40%;
  --stop2: 70%;
}

#progressive-blur > div:nth-child(4) {
  --blur-amount: 96px;
  --stop1: 70%;
  --stop2: 80%;
}


/* ============================================================
   GLOW & BOUNCE LIGHT
   Two gradient overlays that simulate ambient light coming from
   the upper-right. Both use --season-bounce-light so they shift
   subtly across seasons (warmer in summer, cooler in winter).
   ============================================================ */

#glow {
  position: absolute;
  background: linear-gradient(309deg, var(--season-bounce-light), var(--season-bounce-light) 20%, transparent);
  transition: background 1.0s var(--timing-fn);
  height: 100%;
  width: 100%;
  opacity: 0.5;
}

#glow-bounce {
  content: "";
  position: absolute;
  background: linear-gradient(355deg, var(--season-bounce-light) 0%, transparent 30%, transparent 100%);
  transition: background 1.0s var(--timing-fn);
  opacity: 0.5;
  height: 100%;
  width: 100%;
  bottom: 0;
}


/* ============================================================
   PERSPECTIVE (WINDOW FRAME SHADOW)
   A faint diagonal shadow suggesting a window frame above and
   to the right. Shifts angle in dark mode, as if the light source
   has changed.
   ============================================================ */

.perspective {
  position: absolute;
  transition: transform 1.7s var(--timing-fn), opacity 4s ease;
  top: -30vh;
  right: 0;
  width: 80vw;
  height: 130vh;
  opacity: 0.07;
  background-blend-mode: darken;
  transform-origin: top right;
  transform-style: preserve-3d;
  transform: matrix3d(
    0.7500, -0.0625, 0.0000, 0.0008,
    0.0000,  1.0000, 0.0000, 0.0000,
    0.0000,  0.0000, 1.0000, 0.0000,
    0.0000,  0.0000, 0.0000, 1.0000
  );
}

.dark .perspective {
  opacity: 0.3;
  transform: matrix3d(
    0.8333,  0.0833, 0.0000, 0.0003,
    0.0000,  1.0000, 0.0000, 0.0000,
    0.0000,  0.0000, 1.0000, 0.0000,
    0.0000,  0.0000, 0.0000, 1.0000
  );
}


/* ============================================================
   LEAVES
   A large decorative image element, bottom-right. Animates on
   a slow billow loop to suggest a breeze. The image source is
   controlled by --season-leaf-image so it can change with the season.
   Falls back gracefully to no image if the asset doesn't exist yet.
   ============================================================ */

#leaves {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: -20px;
  right: -700px;
  width: 1600px;
  height: 1400px;
  background-image: var(--season-leaf-image);
  filter: url(#wind);
  animation: billow 8s ease-in-out infinite;
}


/* ============================================================
   BLINDS & SHUTTERS
   Horizontal and vertical bars that suggest window blinds.
   Their gap and height transition on dark mode toggle, narrowing
   as the "light" dims.
   ============================================================ */

#blinds {
  position: relative;
  width: 100%;
}

#blinds .shutter,
#blinds .bar {
  background-color: var(--wp--preset--color--shadow);
}

#blinds > .shutters {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 60px;
  transition: gap 1.0s var(--timing-fn);
}

.dark #blinds > .shutters {
  gap: 20px;
}

#blinds > .vertical {
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.vertical > .bar {
  width: 5px;
  height: 100%;
}

.shutter {
  width: 100%;
  height: 40px;
  transition: height 1.0s var(--timing-fn);
}

.dark .shutter {
  height: 80px;
}


/* ============================================================
   BILLOW ANIMATION (LEAVES)
   ============================================================ */

@keyframes billow {
  0%   { transform: perspective(400px) rotateX(0deg)  rotateY(0deg)  scale(1); }
  25%  { transform: perspective(400px) rotateX(1deg)  rotateY(2deg)  scale(1.02); }
  50%  { transform: perspective(400px) rotateX(-4deg) rotateY(-2deg) scale(0.97); }
  75%  { transform: perspective(400px) rotateX(1deg)  rotateY(-1deg) scale(1.04); }
  100% { transform: perspective(400px) rotateX(0deg)  rotateY(0deg)  scale(1); }
}


/* ============================================================
   TYPOGRAPHY — FONTS
   Lora is the reading font. Inter handles UI: navigation,
   captions, buttons, meta. Set in theme.json but reinforced here
   for elements WordPress doesn't easily reach.
   ============================================================ */

body {
  font-family: "Lora", Georgia, serif;
  line-height: 1.75;
}

.wp-block-navigation,
.wp-block-navigation a,
.wp-block-site-title,
.wp-block-site-tagline,
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-query-pagination,
button,
input,
select,
textarea,
label {
  font-family: "Inter", system-ui, sans-serif;
}


/* ============================================================
   NAVIGATION — UNDERLINE HOVER EFFECT
   ============================================================ */

.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--wp--preset--color--rust);
  transition: width 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--rust);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
  width: 100%;
}


/* ============================================================
   SUB-MENU
   ============================================================ */

.wp-block-navigation .wp-block-navigation__submenu-container {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  opacity: 0;
  transform: rotateX(-9deg);
  transform-origin: top;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background-color: var(--wp--preset--color--warm-white-2);
  z-index: 10;
}

.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container {
  opacity: 1;
  transform: rotateX(0deg);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  position: relative;
  text-decoration: none;
  display: block;
  padding: 0.5rem 1rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  height: 2px;
  background-color: var(--wp--preset--color--rust);
  transition: width 0.3s ease;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--rust);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after {
  width: 100%;
}


/* ============================================================
   SITE TITLE — UNDERLINE HOVER EFFECT
   ============================================================ */

.wp-block-site-title a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: inherit;
}

.wp-block-site-title a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--wp--preset--color--rust);
  transition: width 0.3s ease;
}

.wp-block-site-title a:hover::after {
  width: 100%;
}


/* ============================================================
   FEATURED IMAGES — GRAYSCALE
   Images desaturate slightly, coming alive on hover. Keeps the
   page feeling like a garden rather than a magazine.
   ============================================================ */

.wp-post-image,
.wp-block-post-featured-image img {
  filter: grayscale(80%);
  transition: filter 0.3s ease;
}

.wp-post-image:hover,
.wp-block-post-featured-image img:hover {
  filter: grayscale(0%);
}


/* ============================================================
   BUTTONS
   ============================================================ */

button a:hover,
input[type="button"] a:hover,
input[type="submit"] a:hover,
.wp-block-button__link:hover,
.wp-block-button__link:hover a {
  color: var(--wp--preset--color--warm-white);
  text-decoration: none;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}


/* ============================================================
   DAY/NIGHT & SEASON TOGGLE — NAV LINK ACTIVE STATE
   Nav links wired to #gmac-* hashes look like regular nav items.
   JS adds .gmac-season-active to the body to allow active styling
   if needed in future — no component CSS required here.
   ============================================================ */


/* ============================================================
   EPISTEMIC STATUS LABEL
   Displayed on single post pages, just below the post title.
   Rendered via a wp:post-terms block (taxonomy: epistemic_status)
   wrapped in a group block with class .epistemic-status-label.

   Palette reference:
     mid-grey  #767168
     rust      #8B3A2A  (Evergreen only — used sparingly)
   ============================================================ */

.epistemic-status-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--mid-grey);
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

/* Strip default link decoration inside the label */
.epistemic-status-label a {
  text-decoration: none;
  color: inherit;
}

.epistemic-status-label a:hover {
  text-decoration: underline;
}

/*
 * Per-term colour tints.
 * These target the term archive links WordPress outputs inside wp:post-terms.
 * Seedling stays mid-grey (default above).
 * Budding gets a faint warm nudge.
 * Evergreen gets rust — but quietly, so it reads as a signal not a shout.
 *
 * Note: WordPress adds a class like .term-{slug} to the link element.
 * If that class is absent in your version of WP, these rules are safely inert.
 */
.epistemic-status-label .term-budding a {
  color: #9c7a58; /* warm brown — a step warmer than mid-grey */
}

.epistemic-status-label .term-evergreen a {
  color: var(--wp--preset--color--rust);
}


/* ============================================================
   FOOTER — GENERAL
   Reduced font size to de-emphasise footer relative to content.
   ============================================================ */

.gmac-footer-cols,
.gmac-footer-cols .wp-block-navigation,
.gmac-footer-cols .wp-block-navigation a,
.gmac-footer-cols .wp-block-navigation-item__content {
  font-size: 0.8125rem !important;
}

.gmac-footer-cols .wp-block-search__input,
.gmac-footer-cols .wp-block-search__button {
  font-size: 0.8125rem !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}


/* ============================================================
   FOOTER — SOCIAL ICONS
   Custom SVG icons. Each icon has its own colour set inline.
   All hover to rust, consistent with the rest of the theme.
   Tooltips come from the native title attribute — no JS needed.

   Colour key:
     GitHub, Email        → mid-grey  #767168
     walk.swim.chill      → sage      #4d7c5f  (outdoors/nature)
     pembrokeshire.faith  → morning   #9fb3bf  (calm/contemplative)
     new_pathway          → rust      #8B3A2A  (creative/art)
   ============================================================ */

.gmac-social-icons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gmac-social-icon {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.3s ease;
}

.gmac-social-icon:hover {
  color: var(--wp--preset--color--rust) !important;
}


/* ============================================================
   FOOTER — SEASON SWITCHER
   Inline links with a "Season" label. Auto-season is handled
   by custom.js on page load — no active state needed here.
   ============================================================ */

.gmac-season-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.8125rem !important;
}

.gmac-season-switcher span {
  color: var(--wp--preset--color--mid-grey);
  letter-spacing: 0.04em;
}

.gmac-season-switcher .gmac-sep {
  color: var(--wp--preset--color--mid-grey);
  opacity: 0.4;
  letter-spacing: 0;
}

.gmac-season-switcher a {
  color: var(--wp--preset--color--mid-grey);
  text-decoration: none;
  transition: color 0.3s ease;
}

.gmac-season-switcher a:hover {
  color: var(--wp--preset--color--rust);
}