/* corporateofficesllc.{com,ws,net} specific css overrides */

:root {  /* CSS Variables */
   /*--pwk-win-bkgrnd-clr: rgb(23, 48, 83);  */
   --pwk-win-bkgrnd-clr: rgb(0, 0, 0); 
   --pwk-hdr-bkgrnd: rgba(48, 48, 48, .90);
   --pwk-title-clr: rgb(123, 114, 224);
   --pwk-cntrl-clr: rgb(0, 0, 0);
   --pwk-btn-sel-bkgrnd-clr: rgb(14, 196, 178);

   /* The About/Contact/More panel laid over the image. Alpha is the only knob
      that matters here -- raise it to dim the photo further behind the text.
   */
   --co-overlay-bkgrnd-clr: rgba(0, 0, 0, .55);
   --co-overlay-txt-clr: rgb(255, 255, 255);
}

/* This site has no pwk header bar, so collapse pwkApp.css's body grid down to a
   single content row. Without this the grid built in corpOffices.js auto-places
   into the 3.5rem header spacer row and overflows it.
*/
body {
   grid-template-rows: 1fr;
   grid-template-areas: "content";
   height: auto;
   min-height: 100vh;
   min-height: 100dvh;   /* phones: excludes the browser chrome, unlike 100vh */
}


/* Buttons -------------------------------------------------------------------

   Order matters below: these rules are all specificity (0,2,0) or better, so
   within this file the later one wins a tie. focus, then hover, then selected.
*/

/* pwkApp.css turns a focused button blue, which clashes here and would stick to
   whichever button was clicked last. Keep it black; the ring below shows focus.
*/
.pwk-button:focus {
    background-color: var(--pwk-cntrl-clr);
}

.pwk-button:focus-visible {          /* keyboard focus only, not after a click */
    outline: .125rem solid var(--pwk-btn-sel-bkgrnd-clr);
    outline-offset: .125rem;
}

/* (hover: hover) is a capability query, not a viewport one -- it asks whether the
   device has a real pointer, and never needs re-evaluating on resize. Without it
   a phone tap leaves the green stuck on until you tap somewhere else.
*/
@media (hover: hover) {
    .pwk-button:hover {
        background-color: var(--pwk-btn-sel-bkgrnd-clr);
    }
}

/* The selected button is green, and stays green under the pointer and on focus. */
.pwk-button.co-btn-sel,
.pwk-button.co-btn-sel:hover,
.pwk-button.co-btn-sel:focus {
    background-color: var(--pwk-btn-sel-bkgrnd-clr);
}