/*
Theme Name: Astra Child
Theme URI: https://gtibcn.com
Description: Child theme Astra – Clean Professional Optimized
Author: Ricard
Template: astra
Version: 1.2
*/


/* ===============================
BASE TYPOGRAPHY
=============================== */

html,body{
overflow-x:hidden;
font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size:17px;
line-height:1.65;
color:#000;
background:#fff;
}

.site{background:#000;}

body.external-page{
background:#fff;
color:#000;
}

body.external-page .site{
background:#fff;
}

/* HERO TITLE */

.home .hero-title{
  line-height: 5;
  max-width: 22ch;
}

/* ===============================
HEADINGS
=============================== */

.entry-content h1{
font-weight:700;
font-size:clamp(34px,4vw,41px);
line-height:1.30;
margin:1.4em 0 .6em;
letter-spacing:-0.6px;
}

.entry-content h2{
font-weight:600;
font-size:clamp(28px,3vw,33px);
line-height:1.25;
margin:1.8em 0 .6em;
letter-spacing:-0.4px;
}

.entry-content h3{
font-weight:600;
font-size:26px;
line-height:1.3;
margin:1.5em 0 .5em;
}

.entry-content h4{
font-weight:600;
font-size:21px;
line-height:1.35;
margin:1.3em 0 .4em;
}

.entry-content h5{
font-weight:600;
font-size:19px;
line-height:1.4;
margin:1.1em 0 .3em;
}

.entry-content p{
font-size:17px;
line-height:1.7;
margin:.6em 0;
}



/* ===============================
SECTION LAYOUT
=============================== */

section{
padding:4rem 0;
position:relative;
}

section + section{
margin-top:20px;
}

.gti-fullwidth{
position:relative;
left:50%;
margin-left:-50vw;
width:100vw;
max-width:100vw;
}

.gti-inner{
max-width:1200px;
margin:auto;
padding:0 24px;
}



/* ===============================
SECTION BACKGROUNDS
=============================== */

.bg-dark{
background:#000;
color:#fff;
}

.bg-light{
background:#fff;
color:#000;
}

.gti-hero,
.gti-why{
padding:6rem 0;
}

.gti-section-light{
padding:5rem 0;
}



/* ===============================
SECTION SEPARATORS
=============================== */

.bg-dark + .bg-light,
.bg-light + .bg-dark{

border-top:1px solid rgba(255,255,255,0.05);

}



/* ===============================
HERO OVERLAY
=============================== */

.gti-hero{
position:relative;
}

.gti-hero::before{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
180deg,
rgba(0,0,0,0.35) 0%,
rgba(0,0,0,0.55) 100%
);

pointer-events:none;

}



/* ===============================
CTA BUTTONS
=============================== */

.gti-cta-primary a,
.gti-cta-secondary a,
.gti-cta-neutral a,
.gti-cta-link a,
.gti-linkedin-btn{

display:inline-block;

padding:14px 28px;

font-size:16px;
font-weight:600;

border-radius:6px;

line-height:1.2;

text-decoration:none!important;

box-shadow:
0 2px 6px rgba(0,0,0,0.06),
0 8px 16px rgba(0,0,0,0.06);

transition:
transform .22s ease,
box-shadow .22s ease,
background-color .22s ease,
color .22s ease;

}



/* PRIMARY */

.gti-cta-primary a {
  background: #fcbe0e;
  color: #000;
  padding: 5px 15px; /* padding vertical 5px, horitzontal 15px */
  text-decoration: none;
  display: inline-block;
  font-size: 0.9rem; /* ajusta la mida del text */
  line-height: 1.3rem; /* alçada de la línia del botó */
  height: 35px; /* alçada fixa del botó */
  border-radius: 4px;
  transition: all 0.3s ease;
  box-sizing: border-box; /* assegura que padding no sume excessiu */
}

.gti-cta-link a:hover {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  transform: translateY(-2px);
}


/* SECONDARY */

.gti-cta-secondary a{
background:#FCBE0E;
color:#000;
}

.gti-cta-secondary a:hover{

background:#000;
color:#FCBE0E;

transform:translateY(-2px);

}



/* NEUTRAL */

.gti-cta-neutral a{
background:#fff;
color:#000;
}

.gti-cta-neutral a:hover{
background:#000;
color:#FCBE0E!important;
border:1px solid #FCBE0E;
transform:translateY(-2px);
}



/* LINK */

.gti-cta-link a{
background:#000;
color:#FCBE0E;

}

.gti-cta-link a:hover{

background:#fff;
color:#000;
border:1px solid #000;

transform:translateY(-2px);

}

/* Botó CTA molt específic, amb text correctament horitzontal */
.gti-cta-blink a.primary {
  display: flex !important;              /* Flex centrat */
  align-items: center !important;        /* Centrat vertical */
  justify-content: center !important;    /* Centrat horitzontal */
  white-space: nowrap !important;        /* No trenqui el text */
  text-align: center !important;         /* Centrat text */
  padding: 10px 15px !important;         /* Amplada còmoda */
  font-size: 1.0rem !important;            /* Text llegible */
  height: 45px !important;               /* Alçada del botó */
  background: #fcbe0e !important;        /* Fons groc */
  color: #000 !important;                /* Text negre */
  border-radius: 6px !important;
  text-decoration: none !important;
  border: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  flex-direction: row !important;        /* Força text en fila horitzontal */
}

/* Hover del botó */
.gti-cta-blink a.primary:hover {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  transform: translateY(-2px) !important;
}


/* LINKEDIN */

.gti-linkedin-btn{
background:#fff;
color:#000;
border:1px solid #000;
}

.gti-linkedin-btn:hover{

background:#000;
color:#FCBE0E!important;

transform:translateY(-2px);

}



/* ===============================
HEADER
=============================== */

#masthead,
.ast-primary-header-bar{

background:#000!important;
color:#fff;

transition:box-shadow .25s ease;

}

.ast-builder-menu-1 .menu-link{

color:#fff!important;
font-size:14px;   /* prova 14px o 13px */
letter-spacing:0.02em;

transition:color .2s ease,opacity .2s ease;

}

.ast-builder-menu-1 .menu-link:hover{

color:#FCBE0E!important;
opacity:0.85;

}



/* Sticky */
#masthead.gti-sticky {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background: rgba(0,0,0,0.85)!important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari */
    box-shadow:
        0 6px 20px rgba(255,255,255,0.45),
        0 2px 6px rgba(255,255,255,0.08);
}

/* Forcem que el fill del header sigui transparent en sticky */
#masthead.gti-sticky .ast-primary-header-bar {
    background: transparent !important;
}



/* ===============================
   LANGUAGE SWITCHER – Desktop i Mobile
=============================== */

/* DESKTOP – mostrar nom complet */
@media(min-width:922px){
    #ast-hf-menu-2 > li.lang-item a {
        display:inline-block;
        text-indent:0;
        padding:6px 14px;       /* separació entre noms */
        margin-right:8px;        /* espai addicional entre items */
        font-size:14px;
        font-weight:700;
        letter-spacing:0.5px;
        color:#FCBE0E !important; /* inactius grocs */
        background:none;
        border-radius:0;
        text-decoration:none;
    }

    #ast-hf-menu-2 > li.lang-item.current-lang a {
        color:#a77e6a !important; /* actiu marró */
    }

    #ast-hf-menu-2 > li.lang-item a:hover {
        color:#fff !important;
    }
}

/* MOBILE – botons amb sigles */
@media(max-width:921px){

    /* CONTENIDOR */
    #ast-hf-menu-2{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
        margin-top:20px;
        padding:15px 0;
    }

    /* ITEMS */
    #ast-hf-menu-2 li{
        list-style:none;
        width:100%;
        text-align:center;
    }

    /* LINKS */
    #ast-hf-menu-2 li a{
        display:block;
        width:100%;

        font-size:16px;
        font-weight:600;

        padding:10px 0;

        color:#000 !important;
        background:transparent !important;

        text-decoration:none;
        letter-spacing:0.3px;
    }

    /* HOVER */
    #ast-hf-menu-2 li a:hover{
        color:#FCBE0E !important;
    }

    /* ACTIU */
    #ast-hf-menu-2 li.current-lang a{
        color:#FCBE0E !important;
        font-weight:700;
    }

}


/* ===============================
   MOBILE FIX
=============================== */

.ast-header-break-point #ast-hf-menu-2{
margin-top:10px;
justify-content:center;
}

.ast-header-break-point #ast-hf-menu-2>li>a::before{
font-size:14px!important;
padding:6px 10px;
}



/* ===============================
CARDS
=============================== */

.gti-card{

border-radius:6px;

transition:
transform .28s ease,
box-shadow .28s ease;

}



/* LIGHT */

.bg-light .gti-card{

box-shadow:
0 2px 6px rgba(0,0,0,0.08),
0 8px 18px rgba(0,0,0,0.05);

}

.bg-light .gti-card:hover{

transform:translateY(-4px);

box-shadow:
0 6px 16px rgba(0,0,0,0.12),
0 18px 40px rgba(0,0,0,0.10);

}



/* DARK */

.bg-dark .gti-card{

border:1px solid rgba(255,255,255,0.06);

box-shadow:
0 6px 16px rgba(255,255,255,0.28),
0 18px 48px rgba(255,255,255,0.18);

}

.bg-dark .gti-card:hover{

transform:translateY(-4px);

box-shadow:
0 10px 26px rgba(255,255,255,0.40),
0 28px 70px rgba(255,255,255,0.28);

}



/* ===============================
LINK MICROINTERACTION
=============================== */

.entry-content a{

transition:color .2s ease,opacity .2s ease;

}

.entry-content a:hover{

opacity:0.85;

}



/* ===============================
FOOTER
=============================== */

.site-primary-footer-wrap{

background:#000!important;

color:#abb4c0;

border-top:1px solid rgba(255,255,255,0.06);

box-shadow:0 -8px 40px rgba(255,255,255,0.04);

}

.site-primary-footer-wrap a{

color:#FCBE0E;
text-decoration:none;

}

.site-primary-footer-wrap a:hover{

color:#a77e6a;

}



/* Footer layout */

.gti-footer-left-content{

display:flex;
flex-wrap:wrap;

gap:40px;

align-items:flex-start;

}

.gti-footer-contact{

margin:5px 0;

}

.gti-footer-contact a{
display:block;
}



/* Sitemap title */

#astra-footer-menu::before{

content:"Sitemap";

display:block;

color:#fff;

font-size:14px;
font-weight:600;

text-transform:uppercase;

letter-spacing:1px;

margin-bottom:18px;

text-align:center;

}

html:lang(ca) #astra-footer-menu::before{content:"Mapa del lloc";}
html:lang(es) #astra-footer-menu::before{content:"Mapa del sitio";}



/* ===============================
UTILITIES
=============================== */

.highlight-yellow{

color:#FCBE0E;
font-weight:600;

letter-spacing:0.2px;

}

.highlight-green{

color:#7ba751;
font-weight:600;

letter-spacing:0.2px;

}



/* ===============================
FORMS
=============================== */

.fluentform{

font-family:'Open Sans',sans-serif;
font-size:17px;

line-height:1.65;

color:#000;

}

.fluentform input,
.fluentform textarea{

width:100%;

padding:14px 12px;

font-size:15px;

border:1px solid #ccc;

border-radius:6px;

margin-bottom:22px;

transition:all .25s ease;

}

.fluentform input:focus,
.fluentform textarea:focus{

border-color:#a77e6a;

outline:none;

box-shadow:0 0 0 2px rgba(167,126,106,0.2);

}

.fluentform button.ff-btn{

background:#FCBE0E;

color:#000;

border:none;

padding:14px 34px;

font-size:15px;

font-weight:600;

border-radius:6px;

cursor:pointer;

transition:all .25s ease;

}

.fluentform button.ff-btn:hover{

background:#000;
color:#fff;

transform:translateY(-2px);

}

/* ===============================
   FAQ – GTI·BCN ARTICLE INTEGRATION
=============================== */

.gti-faq {
    background: #f7f7f7;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0 24px; /* padding lateral igual que la resta de seccions */
}

.gti-faq h2 {
    font-size: clamp(28px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #000;
    text-align: left;
}

.gti-faq h3 {
    font-size: clamp(18px, 2.2vw, 20px);
    font-weight: 600;
    margin: 16px 0 8px;
    line-height: 1.35;
    color: #243a4a; /* lletra una mica més fosc que el paràgraf */
    position: relative;
    padding-left: 24px; /* espai per a icon */
}

.gti-faq h3::before {
    content: "❖"; /* icon decoratiu */
    position: absolute;
    left: 0;
    top: 0;
    color: #FCBE0E;
    font-size: 1rem;
    line-height: 1.35;
}

.gti-faq p {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 14px;
    color: #000;
}

/* Opcional: destacar FAQ amb fons i border-radius */
.gti-faq-container {
    background: #000;
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ===============================
   RESPONSIVE – MOBILE
=============================== */
@media (max-width: 921px) {
    .gti-faq {
        padding: 0 16px;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .gti-faq h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .gti-faq h3 {
        font-size: 16px;
        padding-left: 20px;
        margin: 12px 0 6px;
    }

    .gti-faq h3::before {
        font-size: 0.9rem;
        left: 0;
    }

    .gti-faq p {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .gti-faq-container {
        padding: 16px;
        border-radius: 6px;
    }
}

/* ===============================
RESPONSIVE
=============================== */

@media(max-width:921px){

.ast-above-header,
.ast-above-header-wrap{

display:none!important;

height:0!important;

padding:0!important;

margin:0!important;

overflow:hidden!important;

}

.ast-header-break-point .site-header,
.ast-header-break-point .ast-primary-header-bar{

padding-top:0!important;

}

.gti-footer-left-content{

flex-direction:column;

align-items:center;

gap:15px;

margin-bottom:20px;

text-align:center;

}

.ast-builder-footer-grid-container{

grid-template-columns:1fr;

text-align:center;

}

.gti-footer-right{

margin-bottom:20px;

text-align:center;

}

}

/* =====================================
   CORRECCIONS RESPONSIVE I VISIBILITAT
===================================== */

/* Language Switcher – més visible */
#ast-hf-menu-2>li.current-lang>a::before{
    opacity:0.7 !important;  /* més visible que abans */
}

/* Formulari de contacte → eliminar línia fina entre form i footer */
.gti-section-light:last-of-type {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Menú hamburguesa – assegurar padding i display uniforme */
@media(max-width:921px){
    .ast-builder-header .main-header-menu,
    .ast-builder-header .menu-toggle{
        display:flex !important;
        align-items:center !important;
    }
    .ast-builder-header .menu-toggle{
        margin-left:0 !important;
    }
}

/* Opcional: si vols que l'idioma no es superposi o tingui contrast correcte */
#ast-hf-menu-2>li>a.menu-link{
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:0.6px !important;
    color:#FCBE0E !important;
}

/* eliminar separador abans footer */
.site-main,
.ast-container{
border-bottom:none!important;
}

/* ===============================
MOBILE SPACING OPTIMIZATION
=============================== */

@media(max-width:921px){

    section{
        padding:2.2rem 0;
    }

    .gti-hero,
    .gti-why{
        padding:3rem 0;
    }

    .gti-section-light{
        padding:2.5rem 0;
    }

    .entry-content h1{
        margin:1em 0 .4em;
    }

    .entry-content h2{
        margin:1.2em 0 .4em;
    }

    .entry-content p{
        margin:.4em 0;
    }
}

@media(max-width:921px){

    #ast-hf-menu-2 li a{
        color:#000 !important;   /* negre fort */
    }

    #ast-hf-menu-2 li.current-lang a{
        color:#000 !important;   /* també negre */
        font-weight:700;
    }

}

html{
scroll-behavior:smooth;
}

/* Category label on single posts */
.gti-post-category {
    display: inline-block;
    margin-right: 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gti-post-category a {
    color: #FCBE0E;
    text-decoration: none;
}

.gti-post-category a:hover {
    text-decoration: underline;
}