/*
File Name: style.css
Theme Name:  Ginger Lime Studio Theme
Author: Ferran Olivella
Version: 1.0
Author URI: http://ferranolivella.com
Description: Child theme d'Ava, personalitzat per a gingerlimestudio.com
              (derivat d'Almond Consultancy Theme, RT-Themes/stmcan).
License: GNU General Public License
License URI: /Licensing/gpl.txt
Text Domain: gingerlime
Template: ava
*/

/* Montserrat (Google Fonts) — tipografia real de marca, substitueix Gotham
   com a valor per defecte. Les classes .gotham/.gotham_bold es queden més
   avall per si algun contingut ja publicat les fa servir explícitament.
   @import ha d'anar abans de qualsevol altra regla CSS. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/*
Paleta real de marca. Actualitzada el 18/08/2026 amb els valors exactes de
l'esquema de color "Ginger Studio" incrustat als PPTX (theme1.xml) revisats
amb la Ingrid — més vius que els extrets abans a ull de les diapositives:
ginger #FC8E2C (abans #CF7930), gold #FAC123 (abans #F5B916). Lime i grey
ja coincidien exactament. Afegit --brown (accent4 del PPTX, no existia).
El rosa (--pink) NO surt a l'esquema oficial del PPTX — es manté només com
a 3r color pràctic (p.ex. pàgina d'equip amb 3 persones), sense ampliar-ne
l'ús.
*/
:root {
    --ginger: #FC8E2C;
    --ginger-soft: #FDECE3;
    --lime: #4F9013;
    --lime-soft: #EEF6DE;
    --pink: #E81C51;
    --pink-soft: #FCE8EE;
    --gold: #FAC123;
    --brown: #7D5530;
    --gold-soft: #FEF6DD;
    --ink: #111111;
    --grey: #595959;
    --grey-light: #999999;
}

/* FONTS */
.gotham { font-family: 'Gotham', 'Roboto', sans-serif !important; font-weight: 400 !important; }
.gotham_bold { font-family: 'GothamBold', 'Roboto', sans-serif !important; font-weight: 400 !important; }

h1,h2,h3,h4,h5,h6,
a.btn,
.image-content-box .button_.medium.white,
.vc_btn3.vc_btn3-size-md.vc_btn3-style-outline-custom {
    font-family: 'Montserrat', Calibri, Arial, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.bolder { font-weight: 700 !important; }

/* END FONTS */

.default-style .box-style-2:before {
    border: none !important;
}

.image-content-box .button_.medium.white,
.vc_btn3.vc_btn3-size-md.vc_btn3-style-outline-custom {
    background: transparent !important;
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.image-content-box .button_.medium.white:hover,
.vc_btn3.vc_btn3-size-md.vc_btn3-style-outline-custom:hover {
    background-color: #fff !important;
    color: #000;
}


.image-content-box.box-style-2 .text-holder {
    padding: 0 !important;
}

.ls-04 { letter-spacing: 0.4rem; }
.ls-1 { letter-spacing: 1rem; }

.wh-rectangle {
    background-color: #fff;
    padding: 6px 12px;
}    

.border-blk {
    border: 1px solid #000;
}

.bg-black {
    background-color: #000;
}

.four-cols .image-content-box.box-style-2 .text-holder {
    padding: 0 !important;
}

.ml--20 {
    margin-left: -40px !important;
}

.vc-hoverbox-inner h2 {
    color: white !important;
}

/* HIDDEN */
.hidden { display: none !important; }

/* END HIDDEN */

/* GENERICS */
.alignright { text-align: right; }
ul.hire-points { list-style: none; }
ul.hire-points li { margin-top: 20px; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

body { font-size: 18px; }

.default-style.vc_column_container > .vc_column-inner { background-color: transparent !important; }
  
.p-4 { padding: 4rem; }
.ml-lg-3 { margin-left: 30px; }

.label, label {
    white-space: break-spaces;
}

/* END GENERICS */

/* TYPOGRAPHY & FONTS */
.fweight-200 { font-weight: 200 !important; }
.vc_separator.vc_separator_align_center h4{ font-size: 34px !important; color: var(--grey) !important; text-align: center; }

/* 19/08/2026 — text de cos (paràgrafs de WPBakery) encara sortia en gris
   clar #777777 i tipografia Roboto (Montserrat només s'aplicava a
   títols/botons fins ara). S'uniformitza amb la resta de la marca. */
.wpb_wrapper p, .wpb_text_column p {
    color: var(--grey);
    font-family: 'Montserrat', Calibri, Arial, sans-serif;
}

/* END TYPOGRAPHY & FONTS */


/* CARROUSEL OWL */
.owl-item > div {
    margin-right: 20px;
}

/* END CARROUSEL OWL */

/* MENUS */
li#menu-item-4153 {
    background: var(--ginger);
    background: linear-gradient(to right, var(--ginger), var(--gold));
}

li#menu-item-4153:hover {
    background: #fff;   
    border: 1px solid #000;
}

li#menu-item-4153 a span { color: #fff; }
li#menu-item-4153:hover > a span { color: #000; }

/* 18/08/2026 — Ferran va detectar que el pas de colors anterior no es veia
   enlloc: vaig recolorir classes decoratives de la demo original d'Almond
   (.almond-orange, .orange-title, #menu-item-4153, botó del footer) que NO
   s'utilitzen a cap pàgina real de Ginger Lime (verificat en directe amb
   DevTools: 0 elements a home/brand/contact). El menú real només fa servir
   #navigation_bar / #navigation, sense classe d'accent ni estat hover
   propi — per això no es notava res en passar el ratolí. Aquí sí que ataco
   selectors que existeixen de veritat al lloc en producció. */
#navigation_bar li.menu-item > a {
    transition: color 0.2s ease;
}

#navigation_bar li.menu-item > a:hover,
#navigation_bar li.menu-item.current-menu-item > a,
#navigation_bar li.menu-item.current_page_item > a {
    color: var(--ginger) !important;
}

/* .section_title és la classe real dels títols de secció (WE DELIVER,
   WHEN, SOME OF OUR CLIENTS...), repetida a totes les pàgines revisades
   (home, brand...).
   19/08/2026 — Ferran: recentrar els títols (com estaven abans, sense
   seguir el PPT al peu de la lletra) — text centrat, sense tocar mida ni
   pes de lletra. Si alguna secció concreta necessita quedar-se alineada a
   l'esquerra, es pot sobreescriure amb una classe extra a la fila del
   WPBakery, sense tocar aquesta regla general.
   19/08/2026 (2a volta) — Ferran: en lloc d'afegir una ratlla taronja
   nova a sota (que quedava com a segona línia, duplicada), es recolora la
   línia negra que JA existeix de fàbrica: cada secció porta una
   border-bottom negra pròpia a la columna WPBakery que envolta el títol
   (classe generada automàticament tipus .vc_custom_1606728781472, diferent
   per pàgina). :has() permet enganxar-hi sense haver de llistar cada
   classe una per una. */
.section_title {
    display: block;
    text-align: center;
    padding-bottom: 14px;
    color: var(--ginger) !important;
    /* 19/08/2026 — confirmat al PPT de la Home (diapositives 2-17): els
       títols de secció són sistemàticament taronja, frase normal (no tot
       majúscules, ja ho teníem bé). !important necessari perquè WPBakery
       fixa color:#000000 com a estil inline per element — verificat amb
       DevTools als 3 títols reals de la Home. */
}

.vc_column_container:has(.section_title) {
    border-bottom-color: var(--ginger) !important;
    /* !important necessari: ava/uploads/dynamic-style.css (generat pel
       Customizer del tema) sobreescriu border-color amb ".default-style *"
       — guanya per ordre de càrrega si no forcem. Verificat amb DevTools
       el 18-19/08/2026. */
}

#navigation_bar li.menu-item { position: relative; }
#navigation_bar li.menu-item a { display: block; }
#navigation_bar a:after  {
    position: absolute;
    top: 0;
    left: 0;
    
        
    width: 20px;
    height: 10px; /* as the half of the width */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 3px solid #000;
    border-bottom: 0;
    
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* END MENUS */



/* CONTENT BLOCKS, REVERSIBLES */
.vc-hoverbox-wrapper {
    /* min-height: 360px; */
}
.vc-hoverbox-block-inner.vc-hoverbox-front-inner::before {
    /* background: #81298f;
    background: -webkit-linear-gradient(left, #81298f, #EE4036);
    background: -o-linear-gradient(right, #81298f, #ea088c);
    background: -moz-linear-gradient(right, #81298f, #ea088c);
    background: linear-gradient(to right, #EB008B, #EE4036);
    height: 3px;
    width: 80%;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    */
}
/*
.vc-hoverbox-wrapper.vc-hoverbox-align--center, 
.vc-hoverbox-block.vc-hoverbox-front,
.vc-hoverbox-block.vc-hoverbox-back { min-height: 26vw; }

.vc-hoverbox-block-inner.vc-hoverbox-front-inner {
    position: absolute;
    bottom: 0;
    background: #000;
    padding: 20px;
    width: 100%;
}

.vc-hoverbox-block-inner.vc-hoverbox-front-inner h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    line-height: 25px;
}

section#communication-why .vc-hoverbox-block-inner.vc-hoverbox-front-inner h2 {
    text-transform: none;
    color: #fff;
    font-family: sans-serif;
}

section#communication-why .vc-hoverbox-block.vc-hoverbox-back p{
    padding-top:20px;
}

section#communication-why .vc-hoverbox-block-inner.vc-hoverbox-back-inner h2 { 
     background: -webkit-linear-gradient(left, #81298f, #EE4036);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 

    color: #fff;
}
section#communication-why .vc-hoverbox-block-inner.vc-hoverbox-back-inner h2::after {
    width: 40%;
    margin: 5px auto;
    position: absolute;
    content: '';
    bottom: 52%;
    left: 30%;
    background: var(--ginger);
    background: linear-gradient(to right, var(--ginger), var(--gold));
}

*/
.knew-col .vc-hoverbox-block-inner.vc-hoverbox-back-inner { padding-top: 25%; }
.visualize-col .vc-hoverbox-block-inner.vc-hoverbox-back-inner { padding-top: 35%; }
.activate-col .vc-hoverbox-block-inner.vc-hoverbox-back-inner { padding-top: 25%; }


.half-circle {
    width: 20px;
    height: 10px; /* as the half of the width */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 3px solid #000;
    border-bottom: 0;
    
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* SECTION: WHEN */
.image-content-box.box-style-2 .text-holder { max-width: 100%; }

/* END SECTION: WHEN */

/* END CONTENT BLOCKS, REVERSIBLES */


/* COLORS */
.almond-gradient,
.content_row.row.sub_page_header.fullwidth,
.almond-gradient-label > div.has-bg-image,
.footer_contents input[type="submit"] {
    background: var(--ginger);
    background: linear-gradient(to right, var(--ginger), var(--gold));
	opacity: 0.7;
}

.type-staff img {
/*    filter: grayscale(100%);*/
}

.almond-gradient.text {
    background: transparent;
    color: var(--grey);
}

.almond-gradient.separator {
    height: 4px;
    margin: 15px auto;
}

.btn.almond-gradient {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    letter-spacing: 0.5em;
    padding: 10px 30px;
    font-weight: 600;
}

.btn.almond-gradient:hover {
    background: #fff;
    color: #000;
}

.almond-grey > h4 { color: var(--grey-light) !important; font-size: 1.4em; }
.vc_separator.vc_separator_align_center.almond-grey h4 { font-size: 20px !important; }

.almond-orange,
.orange-title .text-holder a { color: var(--ginger); }
.almond-pink,
.purple-title .text-holder a { color: var(--pink); }
    

.separator.left { margin: 15px 0; }
.separator.width10 { width: 10%; }
.separator.width30 { width: 30%; }

/* END COLORS */

/* SINGLE POST BLOG */
body.single.single-post .featured_image.featured_media { display: none !important; }

/* END SINGLE POST BLOG */


/* CSS TRICKS */
div.arrow-right.orange:after {
    position: absolute;
    top: 152px;
    right: -12px;
    content: '';
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid var(--ginger);
}

div.arrow-right.purple:after {
    position: absolute;
    top: 152px;
    right: -12px;
    content: '';
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid var(--pink);
}

/* END CSS TRICKS */

/* HEADER */
.custom-navigation.fixed {
    position: fixed;
    z-index: 999;
    top: 20%;
    left: 0;
    width: 100%;
    padding: 20px 0;
    background: transparent !important;
}


/* END HEADER */

/* FOOTER */
#footer .footer_widgets { padding: 40px 0 0; }
.footer-logo { width: 15%; padding: 10px 0; margin-right: 25px; }
#footer-column-2 .footer_widget.widget.widget_contact_info { padding-bottom: 0; }
#footer .footer_widgets img { margin-bottom: 30px; }

a.btn { padding: 10px 15px; text-decoration: none; }
a.btn:hover { text-decoration: none; opacity:0.80; cursor: pointer; }
/* END FOOTER */

/* FORM */
.rt_form input, .rt_form textarea, .security-question, .security-question #math { color: #fff; }
.security-question #math { padding: .6em 10px; }
input.button.submit:hover { background-color: #fff !important; color: #000; }


.rt_form input, 
.rt_form textarea, 
.security-question, 
.security-question #math {
    color: #ccc !important; 
}

.rt_form input[type="tel"], .rt_form input[type="number"],
.rt_form input[type="text"], .rt_form input[type="email"], .rt_form input[type="search"], .rt_form textarea, .rt_form select {
    padding: 12px 0;
    border-width: 0 0 2px 0;
    border-style: solid;
    background-color: transparent;
    line-height: 100%;
    height: 62px;
    border-radius: 0;
}

/* END FORM */




/** RESPONSIVE QUERIES **/
/* On screens that are 800px or less, set the background color to blue */
@media screen and (max-width: 800px) { 
	div.arrow-right.orange:after,
	div.arrow-right.purple:after { display: none; }
	.visualize-col, .pink-col { margin: 7% auto; } 

}


@media screen and (max-width: 450px) {
    .ml-lg-3 {
        margin-left: 0 !important;
    }
    
    #logo {
        max-width: 100%;
    }
    
    .section_title {
        font-size: 22px !important;
        line-height: 24px !important;
            
    }
    
    #main_content img {
        max-height: 100% !important;
    }
    
    #main_content .how-section img { 
        max-width: 50% !important; 
    }
}

@media screen and (max-width: 1024px) {
    .header-center, .header-right nav, .logo-image {
        margin-top: 8px;
    }

}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
    
}

@media screen and (min-width: 768px) {
    .five-columns.vc_row .vc_col-sm-2 {
        float: left;
        width: 20%;
        padding: 0;
        margin-right: 0;
        min-height: 0;
    }
    .five-columns.vc_row .vc_col-sm-2:nth-last-child(2) {
        margin-right: 0;
    }
}

/** END RESPONSIVE QUERIES **/