/* Basic */
h1{
    font-size:24px;
}

/* The Bootstrap CDN CSS sets html{font-size:10px}, which shrinks the
   Drupal admin toolbar's rem-based sizing to ~62% of normal. Restore
   the root font-size only when the toolbar is actually present, so
   anonymous visitors see no change. */
html:has(#toolbar-administration){
    font-size:100%;
}

/* Prominent front-end edit button (see hanna_preprocess_node()) — only
   ever rendered for users who already passed the node's own 'update'
   access check, so no extra visibility rules needed here. */
.hanna-edit-button{
    display: inline-block;
    margin: 10px 0 20px;
    padding: 8px 18px;
    background: #171717;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-radius: 3px;
    transition: background .2s ease-in;
}
.hanna-edit-button:hover{
    background: #0074bd;
    color: #fff;
    text-decoration: none;
}


.page-header{
    border:none;
}

.page-node-type-page img{
    max-width:100%;
    height:auto;
}



/* Navigation */
.navbar-default{
    background: none;
    border: none;
}
.logo img{
    width:110px;
}

.field p{
    text-align:justify;
}

body {
    font-family:'Muli', sans-serif;
}

/*Navigation fixes*/

.navbar-default .navbar-nav > .active > a{
    background-color:transparent;
}

.navbar-default .navbar-nav > .active > a:hover{
    background-color:transparent;
}

.nav > li:last-child > a{
    padding-right:0;
}

/*Mobile screen*/
.navbar-default .navbar-nav > li > a{
    text-indent:20px;
}
@media screen and (min-width: 768px){
.navbar.container {
    max-width: 750px;
}
.navbar-default .navbar-nav > li > a{
    text-indent:0;
}
}

@media screen and (min-width: 992px){
.navbar.container {
    max-width: 970px;
}
.navbar-default .navbar-nav > li > a{
    text-indent:0;
}
}

@media screen and (min-width: 1200px){
.navbar.container {
    max-width: 1170px;
}
.navbar-default .navbar-nav > li > a{
    text-indent:0;
}
}


/* Projects */

/* Project cover images */
#block-views-block-projects-project-block .project-list{
    padding-left:0;
    list-style:none;
}
#block-views-block-projects-project-block .project-list li{
    margin-bottom:30px;
}
.project-container{
    position:relative;
    display: block;
    overflow: hidden;
}

.project-overlay{
    position: absolute;
    background-color: black;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transition: .5s ease;
}
@media screen and (min-width: 768px){
.project-overlay{
    opacity: 0;
}
}
.project-container:hover .project-overlay{
    opacity:0.8;
}
.project-container img{
    transition: all 0.2s linear;
   width:100%;
}
.project-container:hover img{
transform: scale(1.066);
}
/* Matches the square crop every real cover image renders at (project_thumbnail
   is a 1:1 focal-point crop) — a mismatched aspect ratio here made this tile
   shorter than its row-mates, and since #block-views-block-projects-project-block
   .project-list is Bootstrap 3's float-based (not flexbox) grid, a short tile
   lets the next row's item float up into the gap, staggering the whole grid. */
.project-container img.project-cover-missing{
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f5f5f5;
}
.project-text{
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Project details */
/* Project description */

.project .field--name-body{
    margin-bottom:25px;
}

/* Project images */
/* Every tile keeps the same fixed height regardless of its column width,
   which is what makes the row read as clean tiles. The image itself is
   cropped to fill that box with object-fit instead of the old fixed
   scale-transform guesses, so it works correctly for any uploaded ratio.
   object-position defaults to center and is overridden per image inline
   when a focal point has been set. */
.project-image{
    position: relative;
    height: 310px;
    overflow: hidden;
    margin-bottom: 15px;
}

.project-image .img-responsive{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal-position, 50% 50%);
}

.paragraph--type--project-image-pr, .paragraph--type--project-image-pr .field--name-field-project-picture{
    position:relative;
    height:100%;
    overflow:hidden;
}

/* Blog */
.blog-list{
    list-style:none;
}
.blog-list .row{
    margin-bottom:60px;
}
@media screen and (min-width: 768px){
.blog-list .views-field-title {
   margin:25px -275px;
}
.blog-list li:nth-child(2n) .views-field-title {
   margin:25px 275px;
}
.blog-list li:nth-child(2n) .views-field-field-blog-article-cover{
    float:right;
}
}
.blog-list .views-field-title a{
    display:block;
    width:520px;
    padding:10px 20px;
    color:white;
    background-color:black;
    text-transform:uppercase;
    -webkit-transition: all 2s ease-in;
    transition: all .2s ease-in;
}
.blog-list .views-field-title a:hover{
    text-decoration:none;
    background-color:#171717;
}

.blog-list .summary{
    font-size:18px;
    text-align:justify;
}

.blog-list .linkto a{
    text-transform:uppercase;
    color:rgb(51,51,51);
    text-decoration:underline;
    font-size:18px;
}
.blog-list .linkto a:hover{
    text-decoration:none;
}

/* Blog landing*/

.page-node-type-blog .page-header{
    margin-bottom:0;
    text-align:center;
}

.blog img {
    padding-right:10px;
}
.blog .author{
    text-align:center;
    padding-bottom:25px;
}

/*LightGallery*/
.lg-backdrop{
    background-color:#373a36 !important;
}
.lg-outer .lg-thumb-outer, .lg-outer .lg-toogle-thumb{
    background-color:#414440 !important;
}
.lg-toolbar{
    background-color:rgba(80, 80, 80, 0.45) !important;
}
.lg-actions .lg-next, .lg-actions .lg-prev{
    background-color:rgba(84, 79, 79, 0.45) !important;
}

/* Footer */

/* Social menu */
.menu--social-menu{
    margin: 0 auto;
    display: table;
}
.menu--social-menu li{
    float:left;
}
.menu--social-menu a{
    color:#777;
}
.nav.menu--social-menu a:hover{
    color:#333;
    background-color:transparent;
}
/* Debug panel */
.debug{
  background-color:yellow;
  margin-bottom:20px;
}