/* Decorated picture frames (<x-photo-frame>, App\Support\Frames).
   The brand red below is swapped for the theme colour automatically, like every other stylesheet. */

/* zero specificity: each section's own class (width, height, position) always wins */
:where(.gs-frame) { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }

.gs-frame .fr-blank { fill: #e9eaee; }
.gs-frame .fr-dark { fill: var(--gs-frame-dark, #2a2a30); }
.gs-frame .fr-ink { fill: var(--gs-frame-ink, #111117); }
.gs-frame .fr-ink-line { fill: none; stroke: var(--gs-frame-ink, #111117); stroke-width: 2.2; }
.gs-frame .fr-paper { fill: #ffffff; }
.gs-frame .fr-badge-box { fill: #111117; }

/* a thin edge of the same colour so the red pieces sit cleanly over the photo */
.gs-frame .fr-red { fill: #d71111; stroke: #d71111; stroke-width: 1.5; stroke-linejoin: round; }
.gs-frame .fr-red.fr-flat { stroke: none; }
.gs-frame .fr-red-deep { fill: #b90e0e; stroke: #b90e0e; stroke-width: 1.5; stroke-linejoin: round; }
.gs-frame .fr-red-hi { filter: brightness(1.1) saturate(1.25); }
.gs-frame .fr-red-line { fill: none; stroke: #d71111; stroke-width: 4; }

.gs-frame .fr-badge-num { fill: #d71111; font-size: 40px; font-weight: 800; font-family: inherit; }
.gs-frame .fr-badge-txt { fill: #ffffff; font-size: 19px; font-weight: 700; font-family: inherit; }

/* home hero: the frame fills the slider box; slides fade like before */
.gs-hero__media .gs-frame { width: 100%; height: 100%; }
.gs-frame .gs-hero__slide { opacity: 0; transition: opacity .7s ease; }
.gs-frame .gs-hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gs-frame .gs-hero__slide { transition: none; } }

/* dark themes: lines and stripes that were black become light so they stay visible */
html[data-theme="black"] { --gs-frame-ink: #e5e7eb; --gs-frame-dark: #3a3a44; }