/* ============================================================
   BAD IDEA INSTITUTE — Main Stylesheet
   ============================================================
   Load order:
   1. Meyer Reset (linked in HTML before this file)
   2. This file

   Sections:
   1.  CSS Custom Properties
   2.  Web Fonts
   3.  Global / Base
   4.  Typography
   5.  Layout
   6.  Texture Asset Classes
       6a. Background textures
       6b. Divider lines
       6c. Inline marks
   7.  Header & Navigation (inner pages)
   8.  Landing Page Header (index.html only)
   9.  Footer
   10. Page-specific
   11. Utility classes
   12. Media queries
   ============================================================ */


/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */

:root {
    --white-smoke:       #F5F5F5;
    --onyx:              #141414;
    --smart-blue:        #466DB8;
    --fern:              #58883C;
    --scarlet-rush:      #D84546;
    --toffee-brown:      #8E5D29;
    --tuscan-sun:        #F4C431;
    --radioactive-grass: #1BE215;
    --amethyst:          #AC51CC;

    --size-xs:   0.75rem;
    --size-sm:   0.875rem;
    --size-base: 1rem;
    --size-md:   1.25rem;
    --size-lg:   1.5rem;
    --size-xl:   2rem;
    --size-2xl:  2.5rem;
    --size-3xl:  3.5rem;

    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  3rem;
    --space-xl:  5rem;

    --max-width:  1100px;
    --nav-height: 60px;
}


/* ------------------------------------------------------------
   2. WEB FONTS
   ------------------------------------------------------------ */

@font-face {
    font-family: 'Super Bugly';
    src: url('fonts/Super Bugly.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ------------------------------------------------------------
   3. GLOBAL / BASE
   ------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--white-smoke);
    background-image: url('images/background-dotted-white.png');
    background-repeat: repeat;
    background-size: 200px 200px; /* tiles the image at a fixed size;
                                     reduce to make dots smaller/denser,
                                     increase to make them larger/sparser */
    color: var(--onyx);
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--smart-blue);
    text-decoration: underline;
}

a:hover  { color: var(--scarlet-rush); }
a:visited { color: var(--amethyst); }


/* ------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display SC', serif;
    line-height: 1.2;
    color: var(--onyx);
}

h1 { font-size: var(--size-3xl); }
h2 { font-size: var(--size-2xl); }
h3 { font-size: var(--size-xl);  }
h4 { font-size: var(--size-lg);  }
h5 { font-size: var(--size-md);  }
h6 { font-size: var(--size-base);}

p {
    font-family: 'Playfair Display', serif;
    font-size: var(--size-base);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.accent {
    font-family: 'Super Bugly', cursive;
    font-size: var(--size-lg);
}

.label {
    font-family: 'Playfair Display SC', serif;
    font-size: var(--size-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

blockquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    padding-left: var(--space-sm);
    margin: var(--space-md) 0;
    color: var(--toffee-brown);
}


/* ------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------ */

.page-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

main {
    padding: var(--space-lg) 0;
    min-height: calc(100vh - var(--nav-height) - 80px);
}

.section       { margin-bottom: var(--space-xl); }
.two-col       { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.three-col     { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.relative      { position: relative; }


/* ------------------------------------------------------------
   6. TEXTURE ASSET CLASSES
   ------------------------------------------------------------ */

/* --- 6a. Background textures --- */
.bg-dotted { background-image: url('images/background-dotted-white.png'); background-repeat: repeat; background-size: 200px 200px; }
.bg-grid   { background-image: url('images/background-grid-white.png');   background-repeat: repeat; background-size: 200px 200px; }
.bg-lined  { background-image: url('images/background-lined-white.png');  background-repeat: repeat; background-size: 200px 200px; }

/* --- 6b. Divider lines ---
   Usage: <div class="divider line-wavy yellow" aria-hidden="true"></div> */

.divider {
    width: 100%;
    height: 50px;           /* tall enough to show full stroke without clipping */
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
    margin: var(--space-sm) 0;
    overflow: visible;
}

.line-curved   { background-image: var(--line-src-curved); }
.line-straight { background-image: var(--line-src-straight); }
.line-wavy     { background-image: var(--line-src-wavy); }

.blue         { --line-src-curved: url('images/line-curved-blue.png');         --line-src-straight: url('images/line-straight-blue.png');         --line-src-wavy: url('images/line-wavy-blue.png'); }
.green        { --line-src-curved: url('images/line-curved-green.png');        --line-src-straight: url('images/line-straight-green.png');        --line-src-wavy: url('images/line-wavy-green.png'); }
.red          { --line-src-curved: url('images/line-curved-red.png');          --line-src-straight: url('images/line-straight-red.png');          --line-src-wavy: url('images/line-wavy-red.png'); }
.yellow       { --line-src-curved: url('images/line-curved-yellow.png');       --line-src-straight: url('images/line-straight-yellow.png');       --line-src-wavy: url('images/line-wavy-yellow.png'); }
.brown        { --line-src-curved: url('images/line-curved-brown.png');        --line-src-straight: url('images/line-straight-brown.png');        --line-src-wavy: url('images/line-wavy-brown.png'); }
.accentgreen  { --line-src-curved: url('images/line-curved-accentgreen.png');  --line-src-straight: url('images/line-straight-accentgreen.png');  --line-src-wavy: url('images/line-wavy-accentgreen.png'); }
.accentpurple { --line-src-curved: url('images/line-curved-accentpurple.png'); --line-src-straight: url('images/line-straight-accentpurple.png'); --line-src-wavy: url('images/line-wavy-accentpurple.png'); }

/* --- 6c. Inline marks --- */
.mark-splat-large  { position: absolute; width: 180px; height: auto; opacity: 0.85; pointer-events: none; z-index: 0; }
.mark-splat-small  { position: absolute; width: 90px;  height: auto; opacity: 0.85; pointer-events: none; z-index: 0; }
.mark-corner-tl    { position: absolute; top: 0; left: 0;   width: 60px; height: auto; pointer-events: none; }
.mark-corner-tr    { position: absolute; top: 0; right: 0;  width: 60px; height: auto; pointer-events: none; transform: scaleX(-1); }
.mark-corner-bl    { position: absolute; bottom: 0; left: 0;  width: 60px; height: auto; pointer-events: none; transform: scaleY(-1); }
.mark-corner-br    { position: absolute; bottom: 0; right: 0; width: 60px; height: auto; pointer-events: none; transform: scale(-1,-1); }
.mark-arrow        { width: 48px; height: auto; display: inline-block; vertical-align: middle; }
.mark-asterisk     { width: 32px; height: auto; display: inline-block; vertical-align: middle; }
.mark-dot          { width: 16px; height: auto; display: inline-block; vertical-align: middle; }
.mark-star         { width: 36px; height: auto; display: inline-block; vertical-align: middle; }
.mark-circle-round { width: 48px; height: auto; display: inline-block; vertical-align: middle; }
.mark-circle-oval  { width: 80px; height: auto; display: inline-block; vertical-align: middle; }
.mark-hero         { max-width: 500px; width: 100%; height: auto; margin: 0 auto; }


/* ------------------------------------------------------------
   7. HEADER & NAVIGATION — INNER PAGES
   Logo flanked by sadako gifs, tagline below, then nav.
   No "Home" in nav — logo/title is the home link.
   ------------------------------------------------------------ */

#site-header {
    background-color: transparent;
    text-align: center;
    padding: var(--space-sm) 0 0 0;
}

/* Flex row: sadako gif | logo text | sadako gif */
#site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

#site-logo a {
    text-decoration: none;
    color: var(--onyx);
    display: inline-block;
}

#site-logo a:hover  { color: var(--scarlet-rush); }
#site-logo a:visited { color: var(--onyx); }

/* The text portion of the logo lockup */
#site-logo-text {
    text-align: center;
}

#site-logo h1 {
    color: var(--onyx);
    font-size: var(--size-xl);
    margin-bottom: var(--space-xs);
}

#site-logo .tagline {
    font-family: 'Super Bugly', cursive;
    font-size: var(--size-md);
    color: var(--toffee-brown);
    margin-bottom: 0;
    letter-spacing: 0.05em;
}

/* Sadako gifs flanking the header title */
.header-sadako {
    width: 60px;
    height: auto;
    flex-shrink: 0;
}

/* Texture rule divider between logo and nav */
#header-rule {
    width: 100%;
    margin: var(--space-xs) 0 0 0;
    /* line image rendered as <img> in HTML for correct aspect ratio */
}

#site-nav {
    background-color: transparent;
    height: var(--nav-height);
    display: flex;
    align-items: center;
}

#site-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    padding: 0 var(--space-md);
}

#site-nav a {
    font-family: 'Playfair Display SC', serif;
    font-size: var(--size-sm);
    letter-spacing: 0.1em;
    color: var(--onyx);
    text-decoration: none;
    padding: var(--space-xs);
    transition: color 0.15s ease;
}

#site-nav a:hover   { color: var(--scarlet-rush); }
#site-nav a:visited { color: var(--onyx); }

#site-nav a.active {
    color: var(--smart-blue);
    text-decoration: underline;
    text-decoration-color: var(--scarlet-rush);
    text-underline-offset: 4px;
}


/* ------------------------------------------------------------
   8. LANDING PAGE HEADER (index.html only)
   Activated by id="landing" on the <body> tag.
   Layout order: logo image → h1 title → tagline → rule → nav
   Sadako gifs are larger on the landing page.
   ------------------------------------------------------------ */

body#landing #site-header {
    padding: var(--space-xl) 0 0 0;
}

/* Larger sadako on landing */
body#landing .header-sadako {
    width: 100px;
}

/* Logo image centered above title on landing */
body#landing #site-logo {
    flex-direction: column;
    gap: var(--space-xs);
}

/* On landing, sadako gifs sit beside the h1 in a row */
body#landing #site-logo-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

body#landing #site-logo-img {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin: 0 auto var(--space-xs) auto;
    display: block;
}

body#landing #site-logo h1 {
    font-size: var(--size-3xl);
    margin-bottom: var(--space-xs);
}

body#landing #site-logo .tagline {
    font-size: var(--size-xl);
    margin-bottom: var(--space-md);
    display: block;
    text-align: center;
}

body#landing #site-nav ul  { gap: var(--space-lg); }
body#landing #site-nav a   { font-size: var(--size-base); letter-spacing: 0.15em; }

/* Wavy yellow rule on landing */
/* header rule image src is set in HTML per page */


/* ------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------ */

#site-footer {
    background-color: transparent;
    color: var(--onyx);
    text-align: center;
    padding: var(--space-md);
    margin-top: var(--space-xl);
}

#footer-rule {
    width: 100%;
    margin-bottom: var(--space-sm);
    /* rendered as <img> in HTML */
}

#site-footer p {
    font-family: 'Playfair Display SC', serif;
    font-size: var(--size-xs);
    letter-spacing: 0.1em;
    color: var(--onyx);
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   10. PAGE-SPECIFIC
   ------------------------------------------------------------ */

#home-splash {
    text-align: center;
    padding-top: var(--space-lg);
}

/* Collapse main on landing page when it has no visible content */
body#landing main:empty,
body#landing #home-splash:empty {
    display: none;
}

body#landing main {
    min-height: 0;
    padding: 0;
}

#about-content h2 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
}
#about-content h2:first-child { margin-top: 0; }

.project-card {
    position: relative;
    border: 2px solid var(--onyx);
    padding: var(--space-sm);
    overflow: hidden;
}


/* ------------------------------------------------------------
   11. UTILITY CLASSES
   ------------------------------------------------------------ */

.centered { text-align: center; }
.left     { text-align: left;   }
.right    { text-align: right;  }

.color-blue   { color: var(--smart-blue);        }
.color-green  { color: var(--fern);              }
.color-red    { color: var(--scarlet-rush);      }
.color-brown  { color: var(--toffee-brown);      }
.color-yellow { color: var(--tuscan-sun);        }
.color-lime   { color: var(--radioactive-grass); }
.color-purple { color: var(--amethyst);          }

.bg-onyx  { background-color: var(--onyx);         color: var(--white-smoke); }
.bg-blue  { background-color: var(--smart-blue);   color: var(--white-smoke); }
.bg-green { background-color: var(--fern);         color: var(--white-smoke); }
.bg-red   { background-color: var(--scarlet-rush); color: var(--white-smoke); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}


/* ------------------------------------------------------------
   12. MEDIA QUERIES
   ------------------------------------------------------------ */

@media (min-width: 768px)  { :root { --size-3xl: 4rem; } }
@media (min-width: 1100px) { :root { --size-3xl: 5rem; } }

@media (max-width: 767px) {
    #site-nav ul  { gap: var(--space-sm); }
    #site-nav a   { font-size: var(--size-xs); letter-spacing: 0.05em; }
    #site-logo h1 { font-size: var(--size-2xl); }
    .header-sadako { width: 40px; }

    body#landing #site-logo h1     { font-size: var(--size-2xl); }
    body#landing #site-logo .tagline { font-size: var(--size-lg); }
    body#landing .header-sadako    { width: 60px; }

    .two-col, .three-col { grid-template-columns: 1fr; }
    .page-wrapper { padding: 0 var(--space-sm); }
    .mark-splat-large { width: 120px; }
    .mark-hero        { max-width: 320px; }
}

@media (max-width: 479px) {
    #site-nav { height: auto; padding: var(--space-xs) 0; }
    #site-nav ul { flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-xs); height: auto; }
}