/*
 * hollenback.net - adapted from the Hollenback phpwiki theme (MonoBook-derived)
 */

/* --- Layout ------------------------------------------------------------ */

#column-content {
    width: 100%;
    float: right;
    margin: 0 0 .6em -12.2em;
    padding: 0;
}
#content {
    margin: 61px 0 0 12.2em;
    padding: 1em 1em 1.5em 1em;
    background-color: white;
    border: 1px solid #aaaaaa;
    border-right: none;
    line-height: 1.4em;
    position: relative;
    z-index: 2;
}
#column-one { padding-top: 61px; }

/* --- Base styles ------------------------------------------------------- */

body {
    font: 90% sans-serif;
    background-color: #ffffff;
    color: black;
    margin: 0;
    padding: 0;
}
#global-wrapper {
    font-size: 115%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.visualClear { clear: both; }

table { font-size: 100%; color: black; }

a { text-decoration: none; color: #004ba6; background-image: none; }
a:visited { color: #5a3696; }
a:active { color: #004ba6; }
a:hover { text-decoration: underline; }
/* underline links in prose so they're distinguishable by more than color */
#bodyContent a { text-decoration: underline; }
#bodyContent .prevnext a,
#bodyContent .flickr-feed a { text-decoration: none; }

img { border: 0; }
#content img { max-width: min(100%, 720px); height: auto; }
#bodyContent p > img { display: block; }

p { margin: .4em 0 .5em 0; line-height: 1.4em; }

hr {
    height: 1px;
    color: #aaa;
    background-color: #aaa;
    border: 0;
    margin: .2em 0 .2em 0;
}

h1, h2, h3, h4, h5, h6 {
    color: black;
    background-image: none;
    font-weight: bold;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    border-bottom: 1px solid #aaa;
}
h1 { font-size: 188%; }
h2 { font-size: 150%; }
h3, h4, h5, h6 { border-bottom: none; font-weight: bold; }
h3 { font-size: 132%; }
h4 { font-size: 116%; }
h5 { font-size: 100%; }
h6 { font-size: 80%; }

ul {
    line-height: 1.4em;
    list-style-type: square;
    margin: 0.3em 0 0 1.5em;
    padding: 0;
    list-style-image: url("/images/bullet.png");
}
ol { line-height: 1.4em; margin: 0.3em 0 0 3.2em; padding: 0; list-style-image: none; }
li { margin-bottom: 0.1em; }
dt { font-size: 115%; margin-bottom: .5em; }
dl { margin-top: .2em; margin-bottom: .5em; }
dd { line-height: 1.4em; margin-left: 2em; margin-bottom: .1em; }

code { background-color: #f9f9f9; }
pre {
    padding: 1em;
    border: 1px dashed #2f6fab;
    color: black;
    background-color: #f9f9f9;
    line-height: 1.1em;
    overflow-x: auto;
}

blockquote {
    border-left: 3px solid #aaa;
    padding-left: 1em;
    margin-left: 1em;
    color: #555;
}

/* --- Header ------------------------------------------------------------ */

#p-logo {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 42px;
    width: 100%;
    overflow: visible;
    background-color: #005A99;
}
#p-logo a,
#p-logo a:hover {
    display: block;
    height: 42px;
    background-repeat: no-repeat;
    background-position: 35% 50%;
    text-decoration: none;
}
span.logo {
    z-index: 1;
    position: absolute;
    white-space: nowrap;
    left: 18px;
    top: 3px;
    color: #ffffff;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 24pt;
    font-weight: bolder;
    text-decoration: none;
    vertical-align: middle;
}
#img-logo-right {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 40px;
}

/* --- Content area ------------------------------------------------------- */

#bodyContent h1, #bodyContent h2 { margin-bottom: .6em; }
#bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: .3em; }
.firstHeading { margin-bottom: 0.1em; line-height: 1.2em; }

#catlinks {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    padding: 5px;
    margin-top: 1em;
    clear: both;
}

/* external link icons */
#bodyContent a[href^="mailto:"] {
    background-image: url("/images/mail_icon.png");
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 18px;
}
#bodyContent a.external,
#bodyContent a[href^="http://"],
#bodyContent a[href^="https://"] {
    background-image: url("/images/url.png");
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 13px;
}
/* suppress icon for internal-looking links */
#bodyContent a[href^="/"] {
    background-image: none;
    padding-right: 0;
}

/* image floats */
div.floatright, table.floatright {
    clear: right;
    float: right;
    position: relative;
    margin: 0 0 .5em .5em;
    border: 0;
}
div.floatleft, table.floatleft {
    float: left;
    position: relative;
    margin: 0 .5em .5em 0;
    border: 0;
}

/* --- Sidebar portlets --------------------------------------------------- */

.portlet {
    border: none;
    margin: 0 0 .5em;
    padding: 0;
    float: none;
    width: 11.6em;
    overflow: hidden;
}
.portlet-heading {
    background-color: transparent;
    padding: 0em 1em 0em 0.5em;
    display: inline;
    font-size: 91%;
    font-weight: bold;
    white-space: nowrap;
    border-bottom: none;
    margin: 0;
}
.pBody {
    font-size: 95%;
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: 0 .8em .3em .5em;
}
.portlet ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/images/bullet.png");
    font-size: 95%;
}
.portlet li { padding: 0; margin: 0; }
.portlet li a { min-height: 24px; display: inline-flex; align-items: center; }
.portlet h1, .portlet h2, .portlet h3, .portlet h4 { margin: 0; padding: 0; }

/* screen-reader-only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

#p-navigation { position: relative; z-index: 3; }
#p-navigation .pBody { padding-right: 0; }
#p-navigation a { display: block; }
#p-search .pBody { padding-top: .4em; }
#p-search form { display: flex; align-items: center; gap: .3em; }
#p-search input[type="text"] { flex: 1; min-width: 0; min-height: 24px; }
#p-search input[type="submit"] { min-height: 24px; }
#p-nav1 { position: relative; z-index: 3; }

/* --- Photo shortcode ---------------------------------------------------- */

div.photo {
    margin: 1em 0;
    text-align: center;
}
div.photo img {
    border: 1px solid #ccc;
    max-width: 100%;
}

/* --- PrevNext shortcode ------------------------------------------------- */

div.prevnext {
    margin: 1.5em 0 .5em 0;
    text-align: center;
}
div.prevnext a { margin: 0 .1em; }
div.prevnext img { vertical-align: middle; border: 0; }

/* --- Static comments ---------------------------------------------------- */

#comments { margin-top: 2em; }
#comments h3 { font-size: 132%; }
.comment {
    margin: 1em 0;
    padding: .5em;
    border: 1px solid #ddd;
    background-color: #fafafa;
}
.comment-author { font-weight: bold; margin-right: .5em; }
.comment-date { color: #666; font-size: 90%; }
.comment-body { margin-top: .4em; }

/* --- Category pages ----------------------------------------------------- */

.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25em 2em;
    margin: 1em 0;
}
.category-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 24px;
    display: flex;
    align-items: center;
}
.category-item a {
    display: block;
    min-height: 24px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.page-info { vertical-align: middle; color: #555; font-size: 90%; margin: 0 .4em; }
.page-meta { font-size: 85%; color: #666; margin-bottom: 1em; padding-bottom: .3em; border-bottom: 1px solid #eee; }
/* suppress external link icon on category grid links */
#bodyContent .category-grid a[href^="/"] {
    background-image: none;
    padding-right: 0;
}

/* --- Flickr feed -------------------------------------------------------- */

.flickr-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1em 0;
}
.flickr-feed a {
    display: block;
    margin: 0;
}
.flickr-feed img {
    display: block;
    border: 1px solid #ccc;
    max-width: 240px;
}
/* suppress external link icon inside photo grid */
#bodyContent .flickr-feed a[href^="https://"] {
    background-image: none;
    padding-right: 0;
}

/* --- Page-specific ------------------------------------------------------ */

/* MyMentalBreakdown: float the Flickr embed left so text wraps around it.
   The RawHtml block is now in its own paragraph; target the <p> containing
   the embed before and after Flickr JS runs. */
body.page-mymentalbreakdown #bodyContent > p:first-of-type {
    float: left;
    margin: 0 1.5em 1em 0;
}
body.page-mymentalbreakdown #bodyContent::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Utility ------------------------------------------------------------ */

.center { width: 100%; text-align: center; }
*.center * { margin-left: auto; margin-right: auto; }
.small, .small * { font-size: 94%; }

/* --- Mobile ------------------------------------------------------------- */

#menu-toggle { display: none; }

/* Defensive overflow rules - apply at all widths to prevent horizontal scroll */
#content table { display: block; overflow-x: auto; max-width: 100%; }
#bodyContent pre, #bodyContent code { overflow-x: auto; word-break: normal; }
#bodyContent a { word-break: break-word; }

@media screen and (max-width: 720px) {
  #column-content {
    float: none;
    margin: 0;
    width: 100%;
  }
  #content {
    margin: 55px 0 0 0;
    border-left: none;
    border-right: none;
    padding: .75em;
  }

  /* Hamburger button */
  #menu-toggle {
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding: 2px 6px;
    z-index: 10;
    line-height: 1;
  }
  #img-logo-right { display: none; }

  /* Sidebar: hidden off-screen by default, slides in when open */
  #column-one {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100%;
    background: white;
    border-right: 1px solid #aaa;
    padding: 55px .5em .5em .5em;
    box-sizing: border-box;
    overflow-y: auto;
    transition: left .25s ease;
    z-index: 100;
  }
  #column-one.menu-open {
    left: 0;
  }
  .portlet {
    width: 100%;
    box-sizing: border-box;
  }
  .pBody {
    padding: .3em .5em .3em .5em;
  }

  /* Overlay behind open menu */
  #menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 99;
  }
  #menu-overlay.menu-open { display: block; }

  .category-grid {
    grid-template-columns: 1fr;
  }
  span.logo {
    font-size: 18pt;
    max-width: calc(100% - 60px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }
  pre {
    font-size: 85%;
  }
  h1 { font-size: 140%; }
  h2 { font-size: 120%; }
  h3 { font-size: 110%; }
  .firstHeading { font-size: 130%; }
}