@charset "utf-8";
/* Global style */
@import url(https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=Nunito:wght@400;700&display=swap);
/* Base accessible: 1rem = 16px */
html {
    font-family: "Crimson Pro", serif;
    font-size: 100%;     /* 16px per defecte */
}

/* body */
body {
    font-family: "Crimson Pro", serif;
    font-size: 1rem;     /* 16px */
    line-height: 1.5;    /* 24px */
}

/* Text gran alternatiu (bold de 14pt = 19px) */
strong, b {
    font-size: 1.1875rem;/* 19px */
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #376b81;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}
a:hover, a:focus, a:active {
    text-decoration: underline;
}

p {
    margin: 0 0 0.8rem;
}

ul.inline li.node-readmore {
    margin-left: 0;
    padding-left: 0
}
.node-readmore a {
    background: #376b81;
    border-radius: 4px;
    color: #fff;
    padding: 5px 10px;
}
.comment-add a{
    background: #999;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
}
article h4.label{
    color:#333
}
em {
    font-style: italic;
}
.navbar-toggle .icon-bar {
    background: #376b81;
}
ol {
    margin-bottom: 10px;
    padding-bottom: 15px;
}
blockquote {
    clear: both;
    display: block;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 30px;
}
/*heading*/
h1, h2, h3, h4, h5 {
    font-weight: 700;
    color: #dd8700;
    margin-top: 0;
    margin-bottom: 20px;
    font-family: 'Nunito', sans-serif;
}
h1 {
    font-size: 1.75rem;
}
h2 {
    font-size: 1.50rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 1rem;
}

ul li {
    line-height: 30px;
    font-weight: 400
}
ul li a {
    color: #376b81
}
ul li a:hover {
    text-decoration: underline
}
#main {
    padding: 30px 0;
    min-height: 750px;
}
/**/
.comment-wrapper {
    margin-bottom: 15px;
}
.comment-wrapper h2 {
    font-weight: 700;
    margin-top: 20px;
}
.comment-wrapper h3 {
    margin: 0;
    font-weight: 600
}
.comment-wrapper p {
    font-size: 16px;
    color: #333;
    font-weight: 400
}
.comment-wrapper h3 a {
    color: #333
}
.comment-wrapper > article, .comment-wrapper .indented {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}
.comment-wrapper .indented {
    padding-left: 100px;
    border: 0
}
.comment-wrapper .indented article {
    background: #eee;
    padding: 15px;
    border-radius: 4px;
}
.comment-wrapper .indented article footer article {
    display: none
}
p.submitted {
    font-size: 13px;
    color: #999
}
p.submitted a {
    font-weight: 600;
}
.comment-wrapper .new {
    background: goldenrod;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    padding: 0 10px;
}
.comment-wrapper .links.inline li {
    padding: 0;
    margin-right: 7px;
    font-size: 14px;
    color: #999
}
.comment-wrapper .links.inline a {
    display: inline-block;
    background: #376b81;
    color: #fff;
    font-size: 14px;
    padding: 0 10px;
    border-radius: 4px;
}
/*Tabs*/
.tabs.primary {
    border-bottom: 1px solid #ccc;
}
.tabs.primary a {
    background-color: #ccc;
    color: #fff;
    padding: 10px 20px;
    font-weight: 400
}
.tabs.primary a:hover {
    background-color: #24282d
}
.tabs.primary a.is-active {
    background-color: #376b81
}

.breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0.8em
}

.breadcrumb.nav {
    margin: 0
}

.fila-capcalera-1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin:0;
    padding: 0;
    width: 80%;
    float: right;
}

.fila-capcalera-1 p {
    margin: 0;
    padding: 0;
}

#block-elraco-collabora {
    margin: 0;
    background-color: #376b81;
    border-radius: 10px;
    padding: 1px 8px;
}

#block-elraco-collabora a {
    color: #ffffff;
    text-transform: uppercase;
}

#block-elraco-commutadordellenguatextdinterficie ul.links {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}

#block-elraco-commutadordellenguatextdinterficie ul li a.language-link.is-active,
#block-elraco-commutadordellenguatextdinterficie ul li a.language-link.focus {
    color: #376b81;
    text-decoration: underline;
}

#block-elraco-formularidecerca form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

#edit-keys {
    width: 160px;
    border-radius: 2rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid #ccc;
}

#edit-submit {
    background-color: #376b81;
    color: white;
    border: none;
    border-radius: 2rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 40px;
}

#edit-submit:hover {
    background-color: #2d566c;
}

@media (max-width: 768px) {
    .fila-capcalera-1 {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
    }

    #edit-keys {
        width: 100%;
        max-width: 100%;
    }
}

/* ───────────────
   2. Branding (FLOATS)
──────────────── */
#block-elraco-marcadellloc {
    clear: both;
    margin-bottom: 20px;
}

.site-logo {
    float: left;
    width: 10%;
}

.site-logo img {
    border-radius: 50px;
    margin-right: 10px;
}
.site-name {
    float: left;
    width: 90%;
    clear: right;
    margin-top: 2rem;
}

.site-slogan {
    color: #dd8700;
}

/* ───────────────
   RESPONSIVE (mòbil)
──────────────── */
@media (max-width: 768px) {
    .branding-bloc {
        text-align: center;
    }
    .branding-bloc .site-logo,
    .branding-bloc .site-name,
    .branding-bloc .site-slogan {
        float: none;
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
    .breadcrumd {
        display: none;
    }


    /* ───────────────
       4. Responsive
    ──────────────── */
    @media (max-width: 768px) {
        .fila-capcalera-1 {
            flex-direction: column;
            align-items: flex-end;
            gap: 0.5rem;
        }

        #edit-keys {
            width: 100%;
            max-width: 100%;
        }
    }

    .flexslider p {
        color: #fff;
    }

    #sitename h2 {
        line-height: 90px;
        margin: 0 0 0 10px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    #sitename h2 a {
        color: #fff;
    }

    #block-btheme-branding {
        float: left
    }

    /*Image*/
    img {
        width: 100%;
        height:auto;
    }
    img.align-left {
        margin-right: 20px;
        margin-bottom: 20px
    }
    img.align-right {
        margin-left: 20px;
        margin-bottom: 20px;
    }
    /*highlighted*/
    #highlighted {
    }

    .region-secondary-menu {
        text-align: right;
        overflow: hidden
    }
    .region-secondary-menu ul.menu {
        text-align: right
    }
    .region-secondary-menu ul.menu li {
        display: inline-block;
        margin-left: 10px;
        font-size: 13px;
    }
    .navbar-header .navbar-collapse {
        padding-right: 0
    }
    /* flexslider */
    .flexslider {
        position: relative;
        z-index: -500; /* Ajuste para asegurar que otros elementos se muestren sobre el slider */
    }
    .flexslider .flex-caption {
        display:none;
        position: absolute;
        font-size: 60px;
        color: #fff;
        top: 0;
        width: 100%;
        left: 0;
        text-align: center
    }
    .flex-control-nav li a {
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50px;
        outline: 0
    }
    .flex-control-nav li a.flex-active {
        background: #376b81
    }
    .flex-control-nav {
        bottom: 20px
    }
    .flex-direction-nav a::before {
        font-size: 34px
    }

}
/*Sidebar*/
.sidebar > .region .block {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0px 0px 1px #afafaf;
    margin-bottom: 20px;
}
.sidebar > .region .views-element-container {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0px 0px 1px #afafaf;
    margin-bottom: 20px;
}
.sidebar > .region .views-element-container .views-row{
    border-bottom:1px dotted #999;
    padding-bottom:10px;
    margin-bottom:10px
}
.sidebar > .region .views-element-container .views-row a{
    color:#333;
    font-weight:400;
    font-size:14px
}
.sidebar > .region .views-element-container .views-row a:hover{
    text-decoration:underline
}
/*flexslider*/
.flexslider {
    overflow: hidden
}
/*FORM*/
form {
    margin-bottom: 20px;
}
form .form-item .description {
    margin-top: 6px;
    color: #999;
    font-size: 11px
}
a#edit-help-link {
    display: inline-block;
    margin-top: 20px;
}
#edit-preview {
    background: #666
}
.container-inline div, .container-inline label {
    display: block
}
input.button {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    background: #376b81;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 0 0;
    border: 0;
    min-width: 140px;
    margin: 0;
}
input.button:hover {
    background: #000
}
label {
    display: block
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 6px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    border-radius: 4px;
    padding-left: 20px;
    width: 100%
}
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="password"]:focus, textarea:focus {
    border: 1px solid #d0a523
}
section#main {
    min-height: 600px;
}
/* Sidebar menu */
.sidebar ul.menu {
    margin: 0;
    padding: 0
}
.sidebar nav {
    margin-bottom: 20px
}
#block-btheme-powered {
    font-size: 11px;
}
/* footer*/
#footer-saran {
    display: none;
}
/*footer.site-footer {
    background: #376b81 !important;
    color: #dd8700;
    padding: 20px 0;
}*/

footer.region-footer {
    background: repeating-linear-gradient(
        45deg,
        yellow,
        red 10px,
        yellow 20px
        ) !important;
    min-height: 200px;
    outline: 5px dashed black;
}



footer.site-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

footer.site-footer ul a {
    color: #fff;
}

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
}

.site-footer__top .region {
    flex: 1;
    margin-bottom: 20px;
    padding: 0 15px;
    min-width: 200px; /* Asegura un tamaño mínimo para las columnas */
}

@media only screen and (max-width: 767px) {
    .site-footer__top {
        flex-direction: column;
        text-align: center;
    }

    .site-footer__top .region {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
}

#block-elraco-simplenewssubscription {
    margin-top: 1rem;
}

/* cs for dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1000;
    top: 100%; /* Desplaza el menú hacia abajo justo debajo del botón del menú */
    left: 0;
}
.dropdown:hover .dropdown-menu {
    display: block;
}




/*home page content*/
#main div[role="main"] .views-field-title{
    font-size:1.6rem;
    margin-bottom:0px;
    font-weight:600;
    color: #dd8700;
    line-height: 1.8rem
}
#main div[role="main"] .views-field-last-comment-name{
    margin-bottom: 20px;
    margin-top: 10px;
    font-weight:400;
    color:#666;
    font-size:14px;
    background:url(../images/user.png) no-repeat left;
    padding-left:22px;
}
#main div[role="main"] .views-field-created{
    margin-top:20px;
    color:#999;
    font-size:13px;
    font-weight:400;
    margin-bottom:0px;
    background:url(../images/time.png) no-repeat left;
    padding-left:22px;
}
#main div[role="main"]  .views-row{
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid #ccc;
}
.views-field-field-tags{
    margin-top:20px;
    background:url(../images/tag.png) no-repeat left;
    padding-left:22px;
}
.views-field-field-tags .views-label{
    display:inline-block;
    margin-right:10px;
    font-size:14px;
    font-weight:bold
}
.views-field-field-tags .field-content{
    display:inline-block;
}
.views-field-field-tags .field-content a{
    display:inline-block;
    background:#eee;
    font-size:14px;
    border-radius:4px;
    padding:0 10px;
    color:#333
}
.views-field-field-tags .field-content a:hover{
    background:#000;
    color:#fff
}
#main div[role="main"] .views-field-view-node{
    margin:10px 0
}
#main div[role="main"] .views-field-view-node a{
    display:inline-block;
    padding:10px 20px;
    color:#fff;
    background:#376b81;
    border-radius:50px;
    font-size:14px;
    font-weight:bold;
}
#main div[role="main"] .views-field-view-node a:hover{
    background:#000
}

article .node__submitted{
    margin-bottom: 20px;
    margin-top: 10px;
    font-weight:400;
    color:#666;
    font-size:14px;
    background:url(../images/user.png) no-repeat left;
    padding-left:22px;
}
article .field--name-field-tags{
    margin-top:20px;
    color:#999;
    font-size:13px;
    font-weight:400;
    margin-bottom:0px;
    background:url(../images/tag.png) no-repeat left;
    padding-left:22px;
}
article .field--name-field-tags .field__label{
    display:inline-block;
    margin-right:10px;
    font-size:14px;
    font-weight:bold
}
article .field--name-field-tags .field__items{
    display:inline-block;
}
article .field--name-field-tags .field__items a{
    display:inline-block;
    background:#eee;
    font-size:14px;
    border-radius:4px;
    padding:0 10px;
    color:#333
}
article .field--name-field-tags .field__items a:hover{
    background:#333;
    color:#fff
}
article .field--name-field-image{
    margin-bottom:20px
}

/* Responsividad para pantallas pequeñas */
@media only screen and (max-width: 767px) {
    .region-header nav.navigation {
        z-index: inherit;
        float: none;
        text-align: center;
        margin-top: 10px;
    }
    .navbar-header .navbar-collapse {
        position: absolute;
        top: 38px;
        right: 0px;
        float: none;
        text-align: center;
    }
    .navbar-nav{
        margin: 0;
        float: none;
        margin: 0 auto;
    }
    .region-header nav.navigation li {
        margin-left: 0;
        margin-bottom: 5px;
        display: block;
    }
    .site-logo {
        margin-right: 0;
        width: 80px; /* Ajuste para pantallas pequeñas */
    }
    .site-name {
        font-size: 20px; /* Ajuste de tamaño para pantallas pequeñas */
        margin-top: 5px; /* Reducción del margen superior */
        padding-top: 25px;
    }
    .site-slogan {
        font-size: 14px; /* Ajuste del tamaño del eslogan */
        color: #dd8700;
        margin-top: 5px; /* Reducción del margen superior */
    }
    .site-footer__top .region {
        width: 100%; /* Ajuste para que cada columna ocupe todo el ancho en pantallas pequeñas */
        text-align: center;
        margin-bottom: 20px;
    }
    .flexslider {
        z-index: 1;
    }
}

.foto-bio {
    border-radius: 50%;
    margin-bottom: 30px;
}

.linkedin-bio {
    margin-top: 25px;
}

#block-elraco-lopd a, #block-elraco-lopd p {
    color: #ffffff !important;
    font-size: 1rem;
}

/*Header Navigation*/
.navbar {
    font-family: 'Nunito', sans-serif !important;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 0px;
    z-index: 0;
}

.nav>li>a:hover, .nav>li>a:focus, .nav .is-active {
    text-decoration: underline;
    background: none;
}

.site-footer {
    background-color: #376b81;
    padding-top: 2rem;
}

.site-footer h2 {
    color: #ffffff;
    text-transform: uppercase;
}

.site-footer a {
    color: #ffffff;
}

.site-footer p {
    margin: 0;
}

#block-elraco-collabora-2 {
    background-color: #dd8700;
    border-radius: 10px;
    width: fit-content;
    padding: 3px 8px;
    margin: 5rem 1rem;
}

#block-elraco-collabora-2 a {
    text-transform: uppercase;
}

.site-footer label {
    color: #dd8700;
}
.site-footer .button {
    background-color: #dd8700;
}

.site-footer .description {
    display: none;
}

.region-footer-first li {
    float: none;
}

.region-footer-first li a {
    padding: 0;
    margin: 0.5rem 0;
    text-transform: uppercase;
}

#header {
    background-color: #f2f3e6;

}

.comment-form .filter-wrapper,
.comment-form #edit-previer {
    display: none;
}

.flex-caption {
    visibility: none;
    font-size: 0;
    height: 0;
    line-height: 0;
}

ul.menu a {
    text-transform: uppercase;
    color: #ffffff;
}

ul.menu a:focus,
ul.menu a:hover,
ul.menu a.is-active {
    text-decoration: underline;
    color: #ffffff;
}

.node img,
.view img {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
}

article .field-nom-i-cognoms {
    font-weight: 600;
}

article .submitted {
    margin-bottom: 2rem;
}

.simplenews-subscriber-form {
    margin-top: 1.5em;
}

.ko-fi {
    margin:2em 0;
    text-align:center;
}

.ko-fi img {
    aspect-ratio: unset;
    width: unset;
    object-fit: unset;
}