/* PHILLY custom theme : Non stanfard yellow 
 * jacmgr: all css is loaded in the -header.html layout
 * Empty CSS, because yellow requires a themename.css and themename.png file in
 * this folder  system/themes
 * 
*/
@import "picocss/css/pico.fuchsia.css";
/* don't really need these for the minimal demo of pico */
@import "philly/pico.colors.fuchsia.css";
@import "philly/pico.scheme.classes.css";

/* now added directly right below  in this philly.css as basic starter to get baseline pico.
   but still may use custom site for fully developed site 
*/
/* 
@import "xphilly/jacmgr-site-adjustments.css";  
*/

/* jacmgre site wrapper   
   you could just use the pico class=container as is
   my use case is a standard hrml page already set without containers... controls entire site width
*/
body {
  margin: auto;
  max-width: initial;
}
body{
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 80%;
    width: 100%;
    margin-top: 2rem;
    cpadding: 0 1rem;
}

/* mobile first seems like pico defaulting to horizontal list */
/* html sample text no classes on the nav inline in the document */
/* https://github.com/picocss/pico/discussions/482 */
:root {
    --pico-font-family-sans-serif: Inter, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
    --pico-font-size: 87.5%;
    /* Original: 100% */
    --pico-line-height: 1.4rem;
    /* Original: 1.5 */
    --pico-form-element-spacing-vertical: 0.5rem;
    /* Original: 1rem */
    --pico-form-element-spacing-horizontal: 1.0rem;
    /* Original: 1.25rem */
    --pico-border-radius: 0.375rem;
    /* Original: 0.25rem */
}
@media (min-width: 200px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 106.25% */
    }
	body{
	    max-width: 96%;
	}
}
@media (min-width: 768px) {
    :root {
        --pico-font-size: 87.5%;
        /* Original: 112.5% */
    }
	body{
	    max-width: 90%;
	}
}

@media (min-width: 1024px) {
    :root {
        --pico-font-size: 112.5%;
        /* Original: 118.75%  then 87.5 */
    }
	body{
	    max-width: 80%;
	}
}

@media (min-width: 1280px) {
    :root {
        --pico-font-size: 112.5%;
        /* Original: 125% */
    }
	body{
	    max-width: 60%;
	}
}

@media (min-width: 1536px) {
    :root {
        --pico-font-size: 112.5%;
        /* Original: 131.25% */
    }
	body{
	    max-width: 50%;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --pico-font-weight: 600;
    /* Original: 700 */
}

article {
    border: 1px solid var(--pico-muted-border-color);
    /* Original doesn't have a border */
    border-radius: calc(var(--pico-border-radius) * 2);
    /* Original: var(--pico-border-radius) */
}

article>footer {
    border-radius: calc(var(--pico-border-radius) * 2);
    /* Original: var(--pico-border-radius) */
}
/*  May tweak above when I understand more  */
/* mobile first seems like pico defaulting to horizontal list */
/* html sample text no classes on the nav inline in the document */
/**
 * Nav :: Pico does not permit by default a vertical Nav unless you are wrapping it in a div.
 * jacmgr reverting some features from pico to make the nav act like a normal list for the html text sample page.
 * Wow, needed the "display: list-item;" and NOT "display:block" to get the list type to appear
 *  ..... that setting does not even appear in the pico css ??? 
 */
/* for the nav in html sample test page , can delete theis in pther real sites */
nav.testpage-nav ul {
	display: block;
}
nav.testpage-nav ul li {
/* if leave display out get a block per nested UL , cool... */
	display: list-item;
	list-style: square;
	margin-left: 2rem;
	padding: 0px;
}
nav.testpage-nav ul ul li
{
	list-style: circle;	
}
/* Actual Nav, just some tweak..... for yellow default main menu navigatin layout 
used here for demonstration without a custom theme layout. just use default for demo
*/
.navigation ul,
.navigation ul li
{
display: inline-block;	
}
.navigation ul,
nav
{ 
  float: right;
  margin-top: 0px;
  padding-top: 0px;
}
.navigation ul li,
nav ul li {
  margin-top: 0px;
  padding-top: 0px;
}
.navigation a:hover,
.navigation a:active,
nav a:hover,
nav a.active {
	color: var(--pico-color-scheme-300);
}
.navigation-banner {
	clear: both;
}

/* start of real jacmgr customizations */
/* using basically  same colors across different themes for messages.. */
:root {
/*
	--notice1-bg: #fffbf0;
    --notice2-bg: #fdf0f0;
    --notice3-bg: #f0f8fe;
    --notice1-accent: #fb0;
    --notice2-accent: #d00;
    --notice3-accent: #08e;
*/
	--notice1-bg: var(--pico-color-scheme-50);
    --notice2-bg: var(--pico-color-scheme-50);
    --notice3-bg: var(--pico-color-scheme-50);
    --notice1-accent: #fb0;
    --notice2-accent: #d00;
    --notice3-accent: #08e;

}
/* NOTICES      
*/
:root {
  --notice1-accent: #fb0;
  --notice2-accent: #d00;
  --notice3-accent: #08e;
  --notice1-bg: var(--pico-color-scheme-50);
  --notice2-bg: var(--pico-color-scheme-50);
  --notice3-bg: var(--pico-color-scheme-50);
  --notice1-accent: #fb0;
  --notice2-accent: #d00;
  --notice3-accent: #08e;
}
/* from karlskrona - seek to understand this csss style!!.. nice useful... 
Why limit to article only in karlskrona.. use all 
original must be <div class=notice> <div> <p> text notice </p> </div> </div>
but my legacy pages have <div class=notice> <p> text notice </p> </div> ... ok....
*/
div[class^=notice],
article div[class^=notice] {
  margin: 1em 1em;
  padding: 10px 1em;
  xxbackground-color: var(--pico-modal-overlay-background-color);
  background-color: var(--pico-color-scheme-50);
}
div[class^=notice],
article div[class^=notice] p:last-of-type {
  margin-block-end: 0;
}

.notice1,
article .notice1 {
  border-left: 5px solid var(--notice1-accent);
}
.notice2,
article .notice2 {
  border-left: 5px solid var(--notice2-accent);
}
.notice3,
article .notice3 {
  border-left: 5px solid var(--notice3-accent);
}
.notice4,
.notice5,
.notice6 {
    background-color: var(--notice3-bg);
    border-left: 5px solid var(--notice3-accent);
}

/**
 * Card (<article>)
 * this already in pico css, copied here for future modification. maybe different colors differetnt sections, etc,....
 * would really like to shrink down the cards vertical profile......
 */
article {
  margin-bottom: var(--pico-block-spacing-vertical);
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}
article > header,
article > footer {
  margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
  margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
  padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
  background-color: var(--pico-card-sectioning-background-color);
}
article > header {
  margin-top: calc(var(--pico-block-spacing-vertical) * -1);
  margin-bottom: var(--pico-block-spacing-vertical);
  border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
  border-top-right-radius: var(--pico-border-radius);
  border-top-left-radius: var(--pico-border-radius);
}
article > footer {
  margin-top: var(--pico-block-spacing-vertical);
  margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
  border-top: var(--pico-border-width) solid var(--pico-card-border-color);
  border-bottom-right-radius: var(--pico-border-radius);
  border-bottom-left-radius: var(--pico-border-radius);
}