/* 
Styling in this file is used for building out specific pages when the 
more modular styling in utilities.css doesn't suffice. 
Generally, designs here are more hierarchical (starting from a single namespace
class and using element selectors) or just meant to be read in the context of a single page.

I'm moving things here as part of my january 2026 refactor.
*/ 

/** --------------------------------------------------------------
Blindness resource guide sections (main)

USED: blindness resource guide sections
DOM: main > layout-content > region-content > 
    block-system-main-block > article > node__content >
    field--name-body

PATTERN:
DIV--.toc-side 
  DIV--.twothirds-text-image
    P--
    P--IMG--
  DIV--.toc-with-heading
    H2--
    UL--
-----------------------------------------------------------------*/

@media (min-width: 768px) {
    .toc-side { 
        display:grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: repeat(3,1fr); }
    .twothirds-text-image { 
        grid-column: 1/3;
        display:flex;
        flex-direction:column; }    
    .toc-with-heading { 
        grid-column-start: 3;
        grid-row-start:1;
    }
}
.twothirds-text-image img {
    max-width:100%;
}
.toc-with-heading {
    background-color:var(--color-whiteteal);
    padding:0;
    margin:1em;
}
.toc-with-heading h2 {
    background-color:var(--color-paleteal);
    padding:0.5em;
}
.toc-with-heading ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
.toc-with-heading ul li {
    padding-left:0.5em;   
    padding-right:0.5em;
    margin:0;
    margin-bottom:0 !important;
}
.toc-with-heading ul li a {
    margin-bottom:0 !important;
    padding:0.5em;
    margin:0;
    display:block;
    text-decoration:none;
    color:var(--color-darkteal);
}
.toc-with-heading ul li a:hover,
.toc-with-heading ul li a:focus {
    background-color:var(--color-paleteal);
    text-decoration:underline;
    color:#000;
}


/* --------
This is header stuff that's here because when I cut/paste it into
style.css, it breaks the layout. I have no idea why. It doesn't
make sense to me why being in a different file would matter. 
Alas, programming. 
----------*/
@media (min-width: 992px){
     .block-logo {
        position:relative;
        margin:0;
        grid-column-start:4;
        grid-row:span 3; 
        justify-self:center;
        align-self:end;
    }
    .block-logo img {
        height:200px;
    }
    .block-civic-accessibility-toolbar {
        margin-bottom:-1.5em;
    }   
}

@media (max-width:767px) {
    .layout-content {
        background:#eee;
    }
    .block-views-blocknews-block-3 {
        padding: 0 0.5em;
    }
}

@media (min-width: 768px), print {
    .region-header {
        margin: 0;
        width:auto;
        padding:0;
        display:grid;
        grid-template-columns: repeat(11,1fr);
        /*grid-template-rows:1fr, auto;*/
    }
    
    .block-logo {
        position:relative;
        margin:2em 0 0 0;
        grid-column:5/8;
        justify-self:center;
        align-self:end;
    }
    .block-logo img {
        height:200px;
    }
    
    .block-civic-accessibility-toolbar {
        grid-column:3/5;
        grid-row:2/3;
        justify-self:start;
        align-self:end;
        text-align:left;
        display:flex;
        flex-direction:column;
        margin:0;
    }
    .color-contrast, 
    .text-sizing {
        display:block;
    }
    
    .block-search {
        grid-column:3/5;
        grid-row:3/4;
        align-self:end;
        justify-self:start;
        margin:0 !important;
        display:inline-block;
    }
    
    .block-donate {
        grid-column:9/10;
        align-self:start;
        justify-self:center;
        display:inline-block;
    }
}

.donatebtn {
    justify-self:start;
    align-self:center;

    @media (min-width: 768px) {
        grid-row: 2/4;
        grid-column:8/10;
        font-size:3em;
    }
    
    a {
        background:linear-gradient(100deg,var(--color-whiteteal),var(--color-logoteal));
        color:var(--color-blackteal);
        border-radius:0.5em;
        border:solid 2px var(--color-logoteal);
        @media (min-width:768px) {
            
        }
    }
    
    a:hover,
    a:focus {
        background:linear-gradient(100deg,var(--color-darkteal),var(--color-blackteal));
        color:white;
        transition:0.1s;
        border:solid 2px black;
    }
}

/** --------------------------------------------------------
Front page cards (layout-content)

USED: front page
DOM: main > layout-content > region-content > 
    block-system-main-block > article > node__content

PATTERN:
DIV--.field-name-field-initiative-cards
  H2--
  DIV--.initiative-cardset
    
CARD PATTERN: wide with text and image
    DIV--.initiative-card .initiative-card-wide
      H3--
      DIV--.card-split
        P--IMG--
        DIV--
          P--
          DIV--.card-links
            P--A--[...]

CARD PATTERN: text, video, links
    DIV--.initiative-card
      H3--
      P--
      DIV--.card-end-items
        DIV--.fluid-width-video-wrapper (set by embed)
        DIV--.card-links
            P--A--[...]
            
CARD PATTERN: text, inset, links
    DIV--.initiative-card
      H3--
      P--
      DIV--.card-links
        P--A--
        P--
      DIV--.card-end-items
        DIV--.card-links
          P--A--[...]
----------------------------------------------------------**/
.initiative-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    background:white;
    text-align:center;
    padding:1em;
    outline:5px;
    outline-style:solid;
    outline-color:#ddd;
    border-radius:0.2em;
}
.card-inset {
    padding:0.5em;
}
.initiative-card .card-end-items {
    margin-top:auto;
    width:100%;
}
.initiative-card .initiative-button {
    padding:0;
}
.initiative-card .card-links {
    padding-top:1em;
}
.initiative-card:hover,
.initiative-card:focus {
    outline-color:#bbb;
}
.initiative-card a {
    text-decoration:none;
    background:var(--color-whiteteal);
    color:var(--color-darkteal);
    display:block;
    width:100%;
    padding:0;
    border-radius:0.2em;
}
.initiative-card a:focus,
.initiative-card a:hover,
.initiative-card a:active {
    text-decoration:underline;
    background:var(--color-paleteal);
    color:var(--color-blackteal) !important;
}
.card-image {
    max-height:600px;
    margin:0.5em;
    border-radius:0.2em;
}
@media (min-width: 768px){
    .initiative-card a {
        padding:0;
    }
    .initiative-cardset {
        display:grid;
        gap:1em;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:1fr auto;
    }
    .initiative-card .card-links {
        margin: 0 15%;
    }
    .initiative-card-wide {
        grid-column: 1/span 2;
    }
    .card-split {
        display:flex;
        flex-direction:row;
        gap:1em;
    }
}
@media (max-width:767px) {
    .initiative-cardset {
        display:flex;
        gap:2em;
        flex-direction:column;
    }
}
.initiative-card h3 {
    padding-bottom:0.5em;
}
.field--name-field-initiative-cards h2 {
    text-align:center;
    padding-bottom:1em;
    padding-top:2em;
}

/**------------------------------------------------------
Newsletter section (footer)

USED: front page
DOM: main > footer > region-footer

PATTERN: 
DIV--.newsletter-signup
  H2--
  [DIV--contextual]
  DIV--field--name-body
    P--.center
      A--.newsletter-link
      SVG--.ext
---------------------------------------------------------**/
.newsletter-link {
    padding:1em;
    color:var(--color-darkteal) !important;
    font-size:1.2em;
}
.newsletter-signup {
    grid-column: span 8;
    background:white;
    color:black;
    padding-top: 0.5em;
    padding-bottom:4em;
}
.newsletter-signup h2 {
    color:black;
}
#block-newslettersignup > div.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item, 
#block-newslettersignup > div.text-formatted.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > p{
    margin:0;
}
.newsletter-link:hover,
.newsletter-link:focus {
    text-decoration:underline;
    color: #111 !important;
    background: #ccc;
}

/**-------------------------------------------------------------------
Donate page

---------------------------------------------------------------------**/
.donate .promo {
    position:relative;
    width:100%;
    padding:4em 0 0 0;
    font-size:1em;
    margin:0;
}
.donate img {
    padding:0 0 0 1em;
}
.donate h2 {
    text-align: center;
}

.donate .donate-button {
    padding:1.5em 2em;
    background-color:var(--color-paleteal);
    color:black;
    font-weight:normal;
    font-size:1.5em;
    text-decoration:none;
    /*border: 10px solid var(--color-lightteal);*/
    /*background-image:url("../images/globe-transparent.svg");*/
    /*background-repeat:no-repeat;*/
}

@media (min-width: 768px) {
    .donate .donate-button {
        padding:0.8em 1.3em;
        display:inline-block;
        text-align:left;
        background-color:var(--color-paleteal);
        color:black;
        text-decoration:none;
        /*border: 5px solid var(--color-lightteal);*/
        /*background-image:url("../images/globe-transparent.svg");*/
        /*background-repeat:no-repeat;*/
    }
}
.donate .donate-button:hover, 
.donate .donate-button:focus {
    color:black;
    background-color:#ddd;
}