/* ============================================================
   COWBO STORY TIMES — blog add-on stylesheet
   Load AFTER /style.css:

     <link href="/style.css" rel="stylesheet">
     <link href="/cowbo-story-times.css" rel="stylesheet">

   /style.css brings the background, navbar, and the rainbow
   box. This file adds the story-time extras, plus the
   accessibility helpers (skip link, pausable ticker).
   ============================================================ */

/* ---- static background on this page ----
   The homepage keeps the animated tile; here we use Giphy's
   built-in still frame (same image, _s suffix) so long reads
   don't have motion looping behind the text.
   If you self-host later: download both giphy.gif and
   giphy_s.gif into /images_home/bg/ and point the urls there
   (here and in style.css). */
body {
    background-image: url("https://media.giphy.com/media/zW0n7AIWG4ka4/giphy_s.gif");
}

/* ---- skip link (WCAG 2.4.1) ----------------------------------
   invisible until a keyboard user presses Tab, then it appears
   and jumps them straight past the nav to the story. */
.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 1000;
    padding: 10px 16px;
    background-color: #13092D;
    color: #ED64F5;
    font-weight: bold;
}

/* ---- top of the page ------------------------------------------
   the dark strip runs from the very top of the page down through
   the welcome bar (the counter sits inside it too). */
#topStrip { background-color: #13092D; }

/* the welcome line on story pages is STATIC - no scrolling.
   Taller than the homepage bar, with the text centered in it. */
#topBar {
    height: 110px;
    line-height: 110px;
}

/* steady glow - same look, no pulsing on and off.
   (this overrides the animated .glow in style.css) */
.glow {
    animation: none;
    color: #fff;
    text-shadow: 0 0 30px #fff, 0 0 50px #ff4da6, 0 0 70px #742174;
}

/* remove the gif that orbits behind the main box - it is defined
   in the old style.css (main:before), this cancels it no matter
   which style.css version is loaded */
main::before {
    content: none !important;
    animation: none !important;
    background: none !important;
}

/* ---- the post box -------------------------------------------- */
main.story {
    max-width: 780px;
    width: auto;              /* overrides the width:100% from style.css */
    margin: 24px auto;        /* auto = equal margins both sides */
    padding: 25px;
}

/* rem sizes (instead of px) let visitors who bump up their
   browser's text size actually get bigger text (WCAG 1.4.4) */
main.story article p,
main.story article li {
    font-size: 1.0625rem;          /* ~17px at default settings */
    text-align: left;              /* long stories read better
                                      left-aligned; delete to
                                      center like the homepage */
    line-height: 1.75;
}

/* ---- the story time plaque ----------------------------------- */
.plaque {
    width: fit-content;
    margin: 0 auto 20px;
    padding: 8px 20px;
    border: 2px dashed #ED64F5;    /* site magenta */
    font-family: cursive;
    font-size: 1.125rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ED64F5;
}
.plaque .star { color: #ED64F5; }

/* ---- title + dateline ----------------------------------------- */
main.story h1 {
    font-size: 1.625rem;
    line-height: 1.3;
}

.dateline {
    display: block;
    color: #a49cba;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

/* ---- diamond dividers ------------------------------------------
   the "/ ''" second line is alt text for CSS content: it tells
   screen readers the diamonds are decoration, not words. The
   plain line above it is the fallback for older browsers. */
.divider {
    border: 0;
    text-align: center;
    margin: 28px 0;
}
.divider::before {
    content: '\2726 \00a0\00a0 \2726 \00a0\00a0 \2726';
    content: '\2726 \00a0\00a0 \2726 \00a0\00a0 \2726' / '';
    color: #9696FF;                /* the periwinkle link blue */
    letter-spacing: 4px;
}

/* ---- the three-accounts list ----------------------------------- */
main.story article ul {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.4em;
    text-align: left;
}
main.story article ul li {
    position: relative;
    margin-bottom: 14px;
}
main.story article ul li::before {
    content: '\2726';
    content: '\2726' / '';         /* silent for screen readers */
    position: absolute;
    left: -1.4em;
    color: #ED64F5;                /* site magenta */
}

/* ---- magenta drop cap on the opening paragraph ----------------- */
main.story article > p:first-of-type::first-letter {
    font-size: 2.6em;
    line-height: 0.9;
    float: left;
    padding: 2px 8px 0 0;
    color: #ED64F5;
}

/* ---- emphasis tweaks -------------------------------------------- */
main.story article em { color: #9696FF; }
.holler { letter-spacing: 1px; }

/* ---- the story times listing page -------------------------------- */
.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.post-list li {
    margin-bottom: 22px;
    padding: 14px;
    background-color: #13092D;
    border: 1px solid #ED64F5;
}
.post-list li::before { content: none; }   /* no diamond on post cards */
.post-list .post-title {
    display: block;
    font-size: 1.125rem;
    margin-bottom: 4px;
}
.post-list .post-date {
    display: block;
    color: #a49cba;
    font-size: 0.875rem;
    margin-bottom: 6px;
}
.post-list .post-teaser {
    margin: 0;
    font-size: 1rem;
    text-align: left;
}

/* ---- keyboard focus (WCAG 2.4.7) ---------------------------------
   anyone navigating by keyboard always sees where they are */
a:focus-visible,
.skip-link:focus-visible {
    outline: 2px solid #ED64F5;
    outline-offset: 3px;
}
#navbar li a:focus-visible {
    color: #a49cba;
    text-decoration: underline;    /* focus gets what hover gets */
}



@media only screen and (max-width: 800px) {
    /* margins stay visible on both sides even on small screens */
    main.story { margin: 16px; padding: 15px; }
}