/*
Theme Name: Feather-90s
Text Domain: feather90s
Version: 1.3.1
Requires at least: 6.6
Requires PHP: 7.4
Description: Feather-light retro block theme with retro styles, align-wide support, and full template set.
Author: Roope
*/

/* -------------------------------------------------------
   Global layout
------------------------------------------------------- */
:root { --page-pad: 2rem; } /* keep in sync with body/.wp-site-blocks padding */

body, .wp-site-blocks { padding: 2rem; }
html, body { overflow-x: hidden; }

/* Wide containers stay centered */
.wp-block-group.alignwide,
.wp-block-cover.alignwide,
.wp-block-image.alignwide,
.wp-block-columns.alignwide {
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed containers (NOT images by default) */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-columns.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Default: images NEVER bleed full-viewport.
   If an image is alignfull, cap it to wide and center it. */
.wp-block-image.alignfull {
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin-inline: auto;
}

/* Hero-only opt-in for true full-bleed images.
   Wrap your slider/images in a Group set to Align: Full with class "hero-carousel". */
.hero-carousel .wp-block-image.alignfull {
  width: calc(100vw - var(--page-pad) * 2);
  margin-left: calc(50% - 50vw + var(--page-pad));
  margin-right: calc(50% - 50vw + var(--page-pad));
  max-width: none;
}

/* Generic opt-in wrapper if you want to use "full-bleed" elsewhere */
.full-bleed .wp-block-image.alignfull {
  width: calc(100vw - var(--page-pad) * 2);
  margin-left: calc(50% - 50vw + var(--page-pad));
  margin-right: calc(50% - 50vw + var(--page-pad));
  max-width: none;
}

/* Image base */
.wp-block-image { max-width: 100%; height: auto; }
.wp-block-image img { height: auto; }

/* -------------------------------------------------------
   Polaroid style (alignment-aware, no accidental bleed)
------------------------------------------------------- */
/* Polaroid – toned down */
.wp-block-image.is-style-polaroid{
  display:block;
  margin-inline:auto;
  background:#fff;
  padding:10px 10px 18px;        /* thinner frame */
  border:1px solid #111;         /* darker, sharper edge */
  box-shadow:2px 2px 0 #000, 8px 8px 16px rgba(0,0,0,.12);
  transform:rotate(-1deg);       /* subtler tilt */
  transform-origin:center;
  max-width:min(100%, 720px);    /* don’t go jumbo by accident */
}
.wp-block-image.is-style-polaroid img{ display:block; filter:saturate(1.03) contrast(1.03); }

/* when wide/full, keep it straight so layout stays calm */
.wp-block-image.is-style-polaroid.alignwide,
.wp-block-image.is-style-polaroid.alignfull{
  transform:none;
}

/* kill bullets/odd margins some themes inject into figcaptions */
.wp-block-image.is-style-polaroid figcaption{
  margin-top:.5rem;
  text-align:center;
  font-style:italic;
}

/* mobile: no tilt (readability) */
@media (max-width: 640px){
  .wp-block-image.is-style-polaroid{ transform:none; }
}

/* Polaroid: make the FIGURE hug the image, not fill the row */
.wp-block-image.is-style-polaroid{
  width: fit-content;        /* shrink-to-content */
  max-width: 100%;
  margin-left: 0;            /* no auto-stretch */
  margin-right: 0;
}
.wp-block-image.is-style-polaroid.aligncenter{
  margin-left: auto;         /* center when you choose Align center */
  margin-right: auto;
}

/* Ensure the img itself behaves */
.wp-block-image.is-style-polaroid img{
  display: block;
  height: auto;
  max-width: 100%;
}

/* If you ever set alignwide/alignfull on a polaroid, still hug content */
.wp-block-image.is-style-polaroid.alignwide,
.wp-block-image.is-style-polaroid.alignfull{
  width: fit-content;
  max-width: 100%;
}



/* -------------------------------------------------------
   CRT code style
------------------------------------------------------- */
.wp-block-code.is-style-crt,
.wp-block-code.is-style-crt pre {
  background: #001100;
  color: #00ff66;
  text-shadow: 0 0 2px #00ff66;
  border: 1px solid #003300;
}
.wp-block-code.is-style-crt {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,.8);
}
.wp-block-code.is-style-crt::before {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

/* -------------------------------------------------------
   Archives grid
------------------------------------------------------- */
.archive .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.archive .wp-block-post-featured-image a,
.archive .wp-block-post-featured-image { display: block; }
.archive .wp-block-post-featured-image img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; }
@media (max-width:800px){ .archive .wp-block-post-template { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .archive .wp-block-post-template { grid-template-columns: 1fr; } }

/* -------------------------------------------------------
   Win95 Window group style
------------------------------------------------------- */
.wp-block-group.is-style-win95-window {
  position: relative;
  background: #c0c0c0;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #808080, 3px 3px 0 #000;
  padding: 12px;
}
.wp-block-group.is-style-win95-window::before {
  content:""; display:block; height:24px; margin:-12px -12px 8px -12px;
  background: linear-gradient(#000080,#00008b);
  border-bottom: 2px solid #fff;
}
.wp-block-group.is-style-win95-window::after {
  content:""; position:absolute; top:4px; right:6px; width:12px; height:12px;
  background:#c0c0c0; border:1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}

/* -------------------------------------------------------
   BOS Neon Hero (block-safe)
------------------------------------------------------- */
:root{
  --bos-fg:#ffffff;
  --bos-muted:#cfd6df;
  --bos-grid:rgba(255,255,255,.06);
  --bos-glow-a:#00ffff;  /* cyan */
  --bos-glow-b:#6b00ff;  /* violet */
  --bos-glow-c:#ff00aa;  /* magenta */
  --bos-stroke:#021018;  /* dark outline for readability */
}

/* Container */
.bos-hero{
  position: relative;
  isolation: isolate;
  color: var(--bos-fg);
  text-align: center;
  padding: min(22vh, 18rem) 1.25rem min(16vh, 12rem);
  overflow: clip;
  font-family: 'Bebas Neue', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(900px 600px at 20% 30%, #06101a 0%, #000 60%);
}

/* Background neon glow (no extra divs) */
.bos-hero::before{
  content:"";
  position:absolute; inset:-12%;
  pointer-events:none;
  background: conic-gradient(from 0deg, var(--bos-glow-a), var(--bos-glow-b), var(--bos-glow-c), var(--bos-glow-a));
  filter: blur(70px);
  opacity:.32;
  transform: translateZ(0);
  animation: bos-spin 30s linear infinite;
  z-index:-1;
}

/* Subtle grid overlay */
.bos-hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to right, transparent 0 88px, var(--bos-grid) 88px 89px),
    repeating-linear-gradient(to bottom, transparent 0 88px, var(--bos-grid) 88px 89px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,.45), rgba(0,0,0,1) 65%);
          mask-image: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,.45), rgba(0,0,0,1) 65%);
  z-index:-1;
}

/* Title row (flames + text) */
.bos-hero .logo-row { display:flex; align-items:center; justify-content:center; gap:.45em; white-space:nowrap; flex-wrap:nowrap; }

/* Readable outline + neon glow */
.bos-hero .bos-title{
  margin:0; text-transform:uppercase; letter-spacing:.08em;
  font-size: clamp(2.2rem, 9vw, 4.2rem);
  -webkit-text-stroke: 2px var(--bos-stroke);
  text-stroke: 2px var(--bos-stroke);
  color: var(--bos-fg);
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 0 5px var(--bos-glow-a),
    0 0 10px var(--bos-glow-a),
    0 0 22px var(--bos-glow-a),
    0 0 40px var(--bos-glow-b),
    0 0 70px var(--bos-glow-b);
  animation: bos-flicker 2.5s infinite alternate, bos-glow 6s linear infinite;
}
.bos-hero .flame { font-size: clamp(1.8rem, 8vw, 3rem); filter: drop-shadow(0 0 10px rgba(255,100,0,.85)); animation: bos-flicker 2.5s infinite alternate; }

/* Editable subtitle */
.bos-hero .bos-subtitle{
  margin:.5rem 0 1.2rem;
  color: var(--bos-muted);
  letter-spacing:.02em;
  font-size: clamp(1rem, 3.8vw, 1.2rem);
  text-shadow: 0 0 5px rgba(0,153,255,.5);
}

/* CTA button (uses core Button) */
.bos-hero .wp-block-button__link{
  border-radius: 999px;
  background: #00f0ff;
  color: #001018;
  box-shadow: 0 10px 22px rgba(0,240,255,.35);
  padding: .9rem 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bos-hero .wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,240,255,.5);
  background: #41f5ff;
}

/* Animations */
@keyframes bos-spin { to { transform: rotate(360deg); } }
@keyframes bos-flicker { 0%,18%,22%,25%,53%,57%,100%{opacity:1;} 20%,24%,55%{opacity:.25;} }
@keyframes bos-glow {
  0%   { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 22px #00ffff, 0 0 40px #0088ff, 0 0 70px #0088ff; }
  33%  { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 5px #9d00ff, 0 0 10px #9d00ff, 0 0 22px #9d00ff, 0 0 40px #6b00ff, 0 0 70px #6b00ff; }
  66%  { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 5px #ff00aa, 0 0 10px #ff00aa, 0 0 22px #ff00aa, 0 0 40px #ff0080, 0 0 70px #ff0080; }
  100% { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 22px #00ffff, 0 0 40px #0088ff, 0 0 70px #0088ff; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bos-hero::before, .bos-hero .bos-title, .bos-hero .flame { animation: none !important; }
}

/* -------------------------------------------------------
   Blog page: bevel '90s category buttons
------------------------------------------------------- */

/* Kill indent/markers and lay out row with breathing room */
ul.wp-block-categories-list {
  margin: 0 !important;
  padding: 0 !important;
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  list-style: none !important;

  display: flex !important;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem; /* row-gap / column-gap */
  align-items: center;
}
ul.wp-block-categories-list li { list-style: none !important; }
ul.wp-block-categories-list li::marker { content: "" !important; }

/* Beveled rectangular 90s buttons (apply class "bevel-90s" in block Advanced) */
ul.wp-block-categories-list.bevel-90s a{
  display: inline-block;
  padding: .35rem .6rem;
  background: #eee;
  border: 1px solid #333;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 #bbb,
    1px 1px 0 #000;
  text-decoration: none;
  line-height: 1;
}
ul.wp-block-categories-list.bevel-90s a:hover { background: #fff; }
ul.wp-block-categories-list.bevel-90s a:active{
  box-shadow:
    inset 1px 1px 0 #000,
    inset 0 1px 0 #fff;
  position: relative; top: 1px; left: 1px;
}

/* Active category = pressed look (on category archives) */
ul.wp-block-categories-list.bevel-90s a[aria-current="page"]{
  background: #ddd;
  box-shadow:
    inset 1px 1px 0 #000,
    inset 0 1px 0 #fff;
  position: relative; top: 1px; left: 1px;
}

/* Mobile tap targets */
@media (max-width: 640px){
  ul.wp-block-categories-list.bevel-90s a{ padding: .45rem .8rem; }
}

/* Feather-90s — Editor styles (Site/Post editor)
   Mirrors front-end behavior so alignments & pills match in the canvas. */

:root { --page-pad: 2rem; }

/* ============== ALIGNMENT LOGIC (editor) ============== */

/* Wide stays centered (Editor already constrains widths,
   but this keeps classes visually consistent inside containers). */
.editor-styles-wrapper .wp-block-group.alignwide,
.editor-styles-wrapper .wp-block-cover.alignwide,
.editor-styles-wrapper .wp-block-image.alignwide,
.editor-styles-wrapper .wp-block-columns.alignwide {
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}

/* Default: images with alignfull are CAPped (no bleed) */
.editor-styles-wrapper .wp-block-image.alignfull {
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin-inline: auto;
}

/* Hero-only opt-in for true bleed (within the editor iframe).
   Wrap the slider in a Group (Align: Full) with class "hero-carousel". */
.editor-styles-wrapper .hero-carousel .wp-block-image.alignfull {
  width: calc(100vw - var(--page-pad) * 2); /* 100vw of the editor iframe */
  margin-left: calc(50% - 50vw + var(--page-pad));
  margin-right: calc(50% - 50vw + var(--page-pad));
  max-width: none;
}

/* Optional: same opt-in alias with .full-bleed */
.editor-styles-wrapper .full-bleed .wp-block-image.alignfull {
  width: calc(100vw - var(--page-pad) * 2);
  margin-left: calc(50% - 50vw + var(--page-pad));
  margin-right: calc(50% - 50vw + var(--page-pad));
  max-width: none;
}

/* Safety: make sure resized images still scale inside the canvas */
.editor-styles-wrapper .wp-block-image img {
  height: auto;
}

/* ============== BLOG CATEGORY BUTTONS (editor) ============== */

/* Kill bullets/indent and lay out row with gaps */
.editor-styles-wrapper ul.wp-block-categories-list {
  margin: 0 !important;
  padding: 0 !important;
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  list-style: none !important;

  display: flex !important;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  align-items: center;
}
.editor-styles-wrapper ul.wp-block-categories-list li { list-style: none !important; }
.editor-styles-wrapper ul.wp-block-categories-list li::marker { content: "" !important; }

/* Beveled 90s look when you add class "bevel-90s" to the block */
.editor-styles-wrapper ul.wp-block-categories-list.bevel-90s a{
  display: inline-block;
  padding: .35rem .6rem;
  background: #eee;
  border: 1px solid #333;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 #bbb,
    1px 1px 0 #000;
  text-decoration: none;
  line-height: 1;
}
.editor-styles-wrapper ul.wp-block-categories-list.bevel-90s a:hover { background: #fff; }
.editor-styles-wrapper ul.wp-block-categories-list.bevel-90s a[aria-current="page"]{
  background:#ddd;
  box-shadow:
    inset 1px 1px 0 #000,
    inset 0 1px 0 #fff;
  position: relative; top: 1px; left: 1px;
}

/* Mobile tap targets within the editor preview */
@media (max-width: 640px){
  .editor-styles-wrapper ul.wp-block-categories-list.bevel-90s a{
    padding: .45rem .8rem;
  }
}

/* === Polaroid: corner + edge shadow (no texture) === */
/* Works with your existing .is-style-polaroid rules */
:root{
  --polaroid-shadow-strength: .55; /* overall darkness 0–1 */
  --polaroid-shadow-blur: 8px;     /* softness of the blur */
}

/* make sure figure is the positioning context */
.wp-block-image.is-style-polaroid{ position:relative; z-index:0; }

/* 1) Edge shadow along the bottom (lifted paper look) */
.wp-block-image.is-style-polaroid::before{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-2px; height:18px;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 70% at 0% 100%, rgba(0,0,0,.28), transparent 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(0,0,0,.28), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.22), transparent 70%);
  filter: blur(var(--polaroid-shadow-blur));
  opacity: var(--polaroid-shadow-strength);
}

/* 2) Corner “curl” shadow on the bottom-right */
.wp-block-image.is-style-polaroid::after{
  content:"";
  position:absolute;
  right:8px; bottom:8px; width:90px; height:90px;
  pointer-events:none; z-index:0;
  background:
    conic-gradient(from 225deg at 100% 100%,
      rgba(0,0,0,.35) 0 25%,
      rgba(0,0,0,.18) 35%,
      transparent 60%);
  filter: blur(calc(var(--polaroid-shadow-blur) + 2px));
  opacity: var(--polaroid-shadow-strength);
}

/* keep image/caption above the shadows */
.wp-block-image.is-style-polaroid > *{ position:relative; z-index:1; }

/* Optional: align center still works with your fit-content rules */
.wp-block-image.is-style-polaroid.aligncenter{ margin-inline:auto; }