@charset "UTF-8";

/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* keep sizes the same, even with borders */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

/* basics */
html, body {
  background-color: white;
  color:            black;

  font-family:      'Fira Sans', sans-serif;
  font-size:        18px;

  transition:       background-color 0.3s ease, color 0.3s ease;
}
strong {
  font-weight: 700;
}
em {
  font-style: italic;
}
code {
  background-color: rgba(0,0,0,0.05);
  padding:          0.1em 0.3em;
  border-radius:    3px;
  font-family:      monospace;
  font-size:        0.9em;
}
body.dark-mode code {
  background-color: rgba(255,255,255,0.1);
}

/* dark mode styles */
body.dark-mode,
html:has(body.dark-mode),
html.dark-mode-loading,
html.dark-mode-loading body {
  background-color: #1a1a1a;
  color:            #e0e0e0;
}
html.dark-mode-loading #titleBar {
  background-color: #1a1a1a;
  border-bottom-color: #444;
}
body.dark-mode a, body.dark-mode a:link, body.dark-mode a:visited {
  color: #e0e0e0;
}
body.dark-mode a:active, body.dark-mode a:hover {
  color:            #e0e0e0 !important;
  background-color: rgba(100,100,255, 0.3);
}
body.dark-mode #searchBox {
  background-color: #2a2a2a;
  color:            #e0e0e0;
  border-color:     #444;
}
body.dark-mode #searchBox:focus {
  border-color: #666;
}
body.dark-mode #searchBox::placeholder {
  color: #666;
}
body.dark-mode #heroimage img {
  border-color: #444;
}
body.dark-mode hr {
  border-top-color: #444;
}
body.dark-mode #title {
  border-bottom-color: #444;
}
body.dark-mode #footer a, body.dark-mode #footer a:link, body.dark-mode #footer a:visited {
  color: #666;
}
body.dark-mode :target {
  background-color: rgba(100,100,255, 0.2);
}

/* title bar */
#titleBar {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  height:           50px;
  background-color: white;
  border-bottom:    1px solid rgb(200,200,200);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 15px;
  z-index:          1000;
  transition:       background-color 0.3s ease, border-color 0.3s ease;
}
body.dark-mode #titleBar {
  background-color: #1a1a1a;
  border-bottom-color: #444;
}
#homeButton {
  display:         flex;
  align-items:     center;
  gap:             8px;
  font-size:       16px;
  font-weight:     700;
  text-decoration: none;
  color:           black;
  transition:      color 0.2s ease;
}
#homeButton:hover {
  color: rgb(100,100,100);
  background-color: transparent !important;
}
body.dark-mode #homeButton {
  color: #e0e0e0;
}
body.dark-mode #homeButton:hover {
  color: #fff;
}
#homeButton svg {
  width:  20px;
  height: 20px;
}
#wrapper.recipe {
  margin-top: 60px;
}

/* dark mode toggle button */
#darkModeToggle {
  position:         static;
  width:            35px;
  height:           35px;
  border-radius:    50%;
  border:           2px solid rgb(200,200,200);
  background-color: white;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       all 0.3s ease;
}
#darkModeToggle:hover {
  transform:    scale(1.1);
  border-color: rgb(100,100,100);
}
#darkModeToggle img {
  width:  20px;
  height: 20px;
}
#darkModeToggle .moon {
  display: none;
}
body.dark-mode #darkModeToggle {
  background-color: #3a3a3a;
  border-color:     #666;
}
body.dark-mode #darkModeToggle .sun {
  display: none;
}
body.dark-mode #darkModeToggle .moon {
  display: block;
}
.index #darkModeToggle {
  position:         fixed;
  top:              20px;
  right:            20px;
  width:            50px;
  height:           50px;
}
.index #darkModeToggle img {
  width:  30px;
  height: 30px;
}

/* images full width */
/* h/t @mpember for the pr suggestion */
#heroimage img {
  width:  100%;
  border: 1px solid rgb(200,200,200);
}

/* section dividers */
section {
  margin-bottom: 2em;
}

/* recipe title */
h1 {
  font-size:      2.5em;
  font-weight:    900;
  text-transform: uppercase;
  margin-top:     1em;
}
#mainTitle {
  text-align: center;
}

/* section headers */
h2 {
  font-size:      1.5em;
  font-weight:    700;
  text-transform: uppercase;

  margin-bottom:  0.6em;
}
#info h2 {
  display: none;
}

/* all other text */
p, ul, ol {
  font-size:   1em;
  line-height: 1.3em;
}
p::first-letter, #ingredients li::first-letter, #steps li::first-letter, #notes li::first-letter, #time::first-letter, #makes::first-letter {
  text-transform: uppercase;
}
#ingredients p, #steps p, #notes p, #basedon p {
  font-weight: 700;
  margin:      1.1em 0 0.6em 0;
}
#toc li {
  text-transform: capitalize;
}

/* list styling */
ol {
  list-style: decimal outside;
}
ol li {
  margin-left: 1.05em;
}
#steps ol li {
  margin-bottom: .8em;
}

#ingredients ul, #notes ul, #help ul, #basedon ul, #toc ul {
  list-style: square outside;
}
#ingredients ul li, #notes ul li, #help ul li, #basedon ul li, #toc ul li {
  margin-left: 1em;
}
#notes ul li {
  margin-bottom: 0.4em;
}

#toc ul {
  margin-top: 1em;
}
#toc li {
  margin-bottom: 1em;

  /* avoid splitting a single item into cols */
  -webkit-column-break-inside: avoid;
  page-break-inside:           avoid;
  break-inside:                avoid-column;
}

#searchBox {
  width:            100%;
  max-width:        500px;
  margin:           0.7em auto 2em auto;
  padding:          0.8em 1em;
  font-family:      'Fira Sans', sans-serif;
  font-size:        1em;
  border:           2px solid rgb(200,200,200);
  border-radius:    4px;
  display:          block;
  outline:          none;
  transition:       border-color 0.2s;
}
#searchBox:focus {
  border-color: rgb(100,100,100);
}
#searchBox::placeholder {
  color: rgb(180,180,180);
}
:target {
  background-color: rgba(255,255,0, 0.25);
}

/* links and letter list highlight */
a, a:link, a:visited {
  color:            black;
  text-decoration:  none;
  background-color: transparent;
}
a:active, a:hover {
  color:            black !important;
  background-color: rgba(255,255,0, 0.5);
}

/* notes links should have an underline */
#notes a {
  text-decoration: underline;
}

/* make sure long urls split at slashes */
#basedon a {
  white-space:    pre-wrap;       /* css-3 */
    white-space:  -moz-pre-wrap;  /* mozilla, since 1999 */
    white-space:  -pre-wrap;      /* opera 4-6 */
    white-space:  -o-pre-wrap;    /* opera 7 */
    word-wrap:    break-word;     /* ie 5.5+ */
}

/* specific sections/objects */
#wrapper {
  width:     90%;
  max-width: 700px;
  margin:    1em auto 4em auto;
}
.paren {
  color:      rgb(170,170,170);
  font-style: italic;
}
#back {
  margin-top:    -0.6em;
  margin-bottom: 0.6em;
  font-style:    normal;
}
#title {
  text-align:     center;
  padding-bottom: 1.3em;
  border-bottom:  1px solid gray;
}
#footer {
  color:      rgb(170,170,170);
  text-align: center;
  width:      80%;
  margin:     0 auto;
}
#footer li {
  margin-bottom: 0.6em;
}
#footer a, #footer a:link, #footer a:visited {
  color: rgb(180,180,180);
}

#back a:hover {
  background: none;
}
#back svg {
  display: none;
  width:   24px;
  color:   rgb(200,200,200);
}
#back svg:hover {
  color: black;
}

svg.linkIcon, #footer svg {
  width:       14px;
  margin-left: 0.3em;
}

#info li {
  margin-left:   4em;
  text-indent:   -2em;
  margin-bottom: 0.6em;
}
#time, #makes {
  display:     inline-block;
  width:       2em;
  font-weight: 700;
}

.externalArrow {
  height: 0.8em;
  margin: 0 0 -0.08em 0.1em;
}
.highlight {
  background-color: rgba(255,255,0, 0.5);
}
hr {
  clear:      both;
  border:     none;
  border-top: 1px solid gray;
}

/* larger screen: ingredients and steps as two columns */
@media screen and (min-width: 820px) {
  #wrapper {
    margin-top: 2em;
  }

  h1 {
    font-size:  3em;
    margin-top: 0;
  }
  h2 {
    font-size: 1.15em;
  }

  #toc ul, #help ul {
    column-count:       2;
    -webkit-column-gap: 4em;
    -moz-column-gap:    4em;
    column-gap:         4em;
  }

  #back {
    margin-bottom: 1.3em;
  }
  #back svg {
    display: block;
  }
  #title {
    text-align:     left;
    padding-bottom: 0;
    border-bottom:  none;
  }
  #ingredients, #steps {
    float: left;
  }
  #ingredients {
    width:         33%;
    padding-right: 2em;
  }
  #ingredients li {
    margin-bottom: 0.4em;
  }
  #steps {
    width: 66%;
  }
}

/* print is not dead */
@media print {
  #title {
    text-align: left !important;
  }
  #back, #help {
    display: none;
  }
}