/*
Theme Name: Håkan's Dragons Log
Theme URI: https://dragonslog.hakansoderbom.com/
Author: Håkan Söderbom
Description: A lightweight native WordPress block theme for Dragons Log, visually matched to hakansoderbom.com.
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: hakans-dragons-log
*/

:root {
  --hdl-navy:#12384f;
  --hdl-deep:#0d2d40;
  --hdl-blue:#2f6f8f;
  --hdl-sand:#f3efe7;
  --hdl-paper:#ffffff;
  --hdl-ink:#1f2933;
  --hdl-muted:#667085;
  --hdl-line:#d9e1e7;
  --hdl-accent:#c7822d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{text-underline-offset:.18em}
.hdl-site-nav{position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.15)}
.admin-bar .hdl-site-nav{top:32px}
.hdl-site-nav .wp-block-navigation-item__content{padding:8px 10px;border-radius:6px;text-decoration:none}
.hdl-site-nav .wp-block-navigation-item__content:hover,.hdl-site-nav .current-menu-item>.wp-block-navigation-item__content{background:rgba(255,255,255,.12)}
.hdl-masthead{background:linear-gradient(135deg,var(--hdl-navy),#0e5b78)}
.hdl-kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.hdl-card{background:var(--hdl-paper);border:1px solid var(--hdl-line);border-radius:14px;box-shadow:0 6px 20px rgba(18,56,79,.06);overflow:hidden}
.hdl-card-pad{padding:24px}
.hdl-featured-post .wp-block-post-featured-image img,.hdl-post-card .wp-block-post-featured-image img{display:block;width:100%;object-fit:cover}
.hdl-featured-post .wp-block-post-featured-image img{aspect-ratio:16/9}
.hdl-post-card .wp-block-post-featured-image img{aspect-ratio:3/2}
.hdl-post-meta{color:var(--hdl-muted);font-size:.875rem}
.hdl-post-meta a{color:inherit}
.hdl-sidebar-list .wp-block-post{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--hdl-line)}
.hdl-sidebar-list .wp-block-post:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.hdl-sidebar-list .wp-block-post-title{font-size:1.05rem;line-height:1.3;margin:0 0 4px}
.hdl-sidebar-list .wp-block-post-date{font-size:.8rem;color:var(--hdl-muted)}
.hdl-post-card{height:100%}
.hdl-post-card .wp-block-group{height:100%}
.hdl-article{background:var(--hdl-paper);border:1px solid var(--hdl-line);border-radius:14px;box-shadow:0 6px 20px rgba(18,56,79,.06)}
.hdl-article .wp-block-post-content{font-size:1.075rem}
.hdl-article .wp-block-post-content>p,.hdl-article .wp-block-post-content>ul,.hdl-article .wp-block-post-content>ol{max-width:760px;margin-left:auto;margin-right:auto}
.hdl-article .wp-block-post-content>h2,.hdl-article .wp-block-post-content>h3,.hdl-article .wp-block-post-content>h4{max-width:760px;margin-left:auto;margin-right:auto}
.hdl-article .wp-block-post-content>.wp-block-image,.hdl-article .wp-block-post-content>.wp-block-gallery,.hdl-article .wp-block-post-content>.wp-block-cover{margin-top:2rem;margin-bottom:2rem}
.wp-block-query-pagination{gap:12px}
.wp-block-query-pagination a,.wp-block-query-pagination .current{display:inline-block;padding:8px 12px;border:1px solid var(--hdl-line);border-radius:7px;text-decoration:none;background:#fff}
.wp-block-query-pagination .current{background:var(--hdl-deep);color:#fff}
.hdl-footer a{color:#f3c98b}
.hdl-404-search .wp-block-search__inside-wrapper{border-radius:8px;overflow:hidden}
@media(max-width:782px){
 .admin-bar .hdl-site-nav{top:46px}
 .hdl-site-nav{position:relative;top:auto}
 .hdl-site-nav .wp-block-navigation__responsive-container.is-menu-open{background:var(--hdl-deep);color:#fff;padding:24px}
 .hdl-card-pad{padding:20px}
}


/* Version 1.1: consolidated header and Dragons Log masthead refinements */
.wp-site-blocks > header + .hdl-masthead {
  margin-block-start: 0;
}

/* Match the static site's navigation geometry. */
.hdl-site-nav .wp-block-navigation {
  width: 100% !important;
  max-width: 1088px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hdl-site-nav .wp-block-navigation__container {
  gap: 6px !important;
}

/* Match the static site's 1120px masthead container. */
.hdl-masthead {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-left: 22px !important;
  padding-right: 22px !important;
}
.hdl-masthead > .wp-block-group {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hdl-masthead > .wp-block-group > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.hdl-masthead > .wp-block-group > p:not(.hdl-kicker) {
  max-width: 650px !important;
}

/* Theme-owned decorative dragon, rendered as a real image. */
/* Dragon overlaps the masthead's top and bottom edges */
.hdl-masthead-dragon {
    position: absolute;
    z-index: 3;

    top: -25px;
    bottom: -25px;
    height: calc(100% + 50px);
  
/* modestly sized dragon
    top: -12px;
    bottom: -12px;
    height: calc(100% + 24px);
*/
    right: -20px;
    width: auto;
    
    margin: 0 !important;
    line-height: 0;
    pointer-events: none;
}

.hdl-masthead-dragon img {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0.82; 
}


@media (min-width: 901px) {
  .hdl-masthead.has-dragon > .wp-block-group {
    padding-right: 34% !important;
  }
}

@media (max-width: 900px) {
    .hdl-masthead-dragon {
        top: -8px;
        bottom: -8px;
        right: -34px;
        width: auto;
        height: calc(100% + 16px);
    }

    .hdl-masthead-dragon img {
        opacity: 0.52;
    }
}

/*
@media (max-width: 900px) {
  .hdl-masthead-dragon {
    width: 43vw;
    right: -34px;
  }
  .hdl-masthead-dragon img {
    opacity: .52;
  }
}
*/

@media (max-width: 620px) {
  .hdl-masthead-dragon {
    display: none;
  }
}

.hdl-masthead-resources {
    width: 35%;
    height: auto;

    right: 10%;
    top: 46%;
    bottom: auto;

    transform: translateY(-50%);
}

.hdl-masthead-resources img {
    display: block;
    width: 200%;
    height: auto;
    max-width: none;
    opacity: 0.70; 
}