/*
Theme Name: Publivoce
Theme URI: https://www.publivoce.it/
Author: Publivoce S.r.l.
Author URI: https://www.publivoce.it/
Description: Tema WordPress personalizzato per Publivoce S.r.l. - Realizzazione spot audio pubblicitari, jingle, doppiaggi e video aziendali. Tema leggero, responsive e ottimizzato per WPBakery Page Builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: publivoce
Tags: custom-logo, custom-menu, featured-images, translation-ready, responsive-layout, blog
*/

/* ============================================================
   1. VARIABILI CSS (custom properties)
   ============================================================ */
:root {
    /* Colori brand */
    --pv-primary:        #995958;
    --pv-primary-dark:   #7f4545;
    --pv-primary-light:  #c08484;
    --pv-secondary:      #333333;
    --pv-text:           #555555;
    --pv-text-light:     #777777;
    --pv-bg:             #ffffff;
    --pv-bg-alt:         #f4f4f4;
    --pv-border:         #cccccc;
    --pv-white:          #ffffff;
    --pv-black:          #000000;

    /* Tipografia */
    --pv-font-body:      'Raleway', Helvetica, Arial, sans-serif;
    --pv-font-heading:   'Montserrat', Helvetica, Arial, sans-serif;
    --pv-font-accent:    'Playfair Display', Georgia, serif;

    /* Dimensioni */
    --pv-container:      1200px;
    --pv-radius:         4px;
    --pv-transition:     all 0.3s ease;

    /* Spaziature */
    --pv-space-xs:       8px;
    --pv-space-sm:       16px;
    --pv-space-md:       24px;
    --pv-space-lg:       48px;
    --pv-space-xl:       72px;
}

/* ============================================================
   2. RESET E BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--pv-font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.7;
    color: var(--pv-text);
    background-color: var(--pv-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--pv-primary);
    text-decoration: none;
    transition: var(--pv-transition);
}

a:hover,
a:focus {
    color: var(--pv-primary-dark);
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    margin: 0 0 1em;
    padding: 0 0 0 1.5em;
}

/* ============================================================
   3. TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.7em;
    font-family: var(--pv-font-heading);
    font-weight: 400;
    line-height: 1.3;
    color: var(--pv-secondary);
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 14px; }

p {
    margin: 0 0 1em;
}

strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid var(--pv-primary);
    background-color: var(--pv-bg-alt);
    font-family: var(--pv-font-accent);
    font-style: italic;
    color: var(--pv-text);
}

code, pre {
    font-family: 'Courier New', monospace;
    background-color: var(--pv-bg-alt);
    padding: 2px 6px;
    border-radius: var(--pv-radius);
    font-size: 0.9em;
}

/* ============================================================
   4. LAYOUT / CONTAINER
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--pv-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.fullwidth {
    width: 100%;
    padding: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* Griglia Bootstrap-like minimale */
.col-md-12, .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-6,  .col-sm-6  { flex: 0 0 50%;  max-width: 50%; }
.col-md-4,  .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-md-3,  .col-sm-3  { flex: 0 0 25%;  max-width: 25%; }
.col-md-8,  .col-sm-8  { flex: 0 0 66.6666%; max-width: 66.6666%; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.margin-bottom-30  { margin-bottom: 30px; }
.margin-bottom-50  { margin-bottom: 50px; }
.margin-bottom-75  { margin-bottom: 75px; }
.margin-bottom-80  { margin-bottom: 80px; }
.margin-bottom-100 { margin-bottom: 100px; }
.margin-top-20     { margin-top: 20px; line-height: 1.3; }
.margin-top-75     { margin-top: 75px; }
.margin-top-80     { margin-top: 80px; }

.displaynone     { display: none; }
.center          { margin: 0 auto; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ============================================================
   5. HEADER
   ============================================================ */
#header {
    background-color: var(--pv-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 999;
}

.header-nav-above {
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.header-logo img,
.custom-logo {
    max-height: 100px;
    width: auto;
    margin: 0 auto;
    display: block;
}

.header-nav-wrapper {
    padding: 0;
    background-color: var(--pv-white);
}

.header-nav-wrapper .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Menu principale */
.main-menu,
.x-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.main-menu li {
    position: relative;
}

.main-menu > li > a {
    display: block;
    padding: 18px 16px;
    font-family: var(--pv-font-heading);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pv-secondary);
    transition: var(--pv-transition);
}

.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a,
.main-menu > li.current_page_item > a {
    color: var(--pv-primary);
}

/* Sottomenu */
.main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--pv-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--pv-transition);
    z-index: 100;
}

.main-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-menu .sub-menu li a {
    display: block;
    padding: 8px 18px;
    font-size: 12px;
    color: var(--pv-text);
    text-transform: none;
    letter-spacing: normal;
}

.main-menu .sub-menu li a:hover {
    background-color: var(--pv-bg-alt);
    color: var(--pv-primary);
}


/* Freccetta per i menu a tendina (stile menu originale) */
.main-menu .menu-item-has-children > a::after {
    content: " \2304"; /* Oppure puoi usare un'icona/freccia personalizzata */
    font-size: 10px;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
    transition: var(--pv-transition);
}

/* Opzionale: rotazione della freccetta quando ci si passa sopra con il mouse */
.main-menu .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Ricerca header */
.search-type-standard {
    display: flex;
    align-items: center;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    overflow: hidden;
}

.search-type-standard input[type="text"] {
    border: none;
    padding: 8px 12px;
    font-size: 12px;
    outline: none;
    background: transparent;
    width: 180px;
}

.search-type-standard button {
    border: none;
    background: var(--pv-primary);
    color: var(--pv-white);
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--pv-transition);
}

.search-type-standard button:hover {
    background: var(--pv-primary-dark);
}

/* ============================================================
   6. HEADER MOBILE
   ============================================================ */
#header-mobile {
    display: none;
    background-color: var(--pv-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.header-mobile-before {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.header-mobile-before img {
    max-height: 60px;
    margin: 0 auto;
}

.header-mobile-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.toggle-icon-wrapper {
    cursor: pointer;
    padding: 10px;
}

.toggle-icon {
    display: block;
    width: 26px;
    height: 2px;
    background-color: var(--pv-secondary);
    position: relative;
    transition: var(--pv-transition);
}

.toggle-icon::before,
.toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 26px;
    height: 2px;
    background-color: var(--pv-secondary);
    transition: var(--pv-transition);
}

.toggle-icon::before { top: -8px; }
.toggle-icon::after  { top: 8px; }

#nav-menu-mobile {
    display: none;
    padding: 12px 15px;
    border-top: 1px solid #eee;
}

#nav-menu-mobile.active {
    display: block;
}

.nav-menu-mobile {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu-mobile li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: var(--pv-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-menu-mobile li a:hover {
    color: var(--pv-primary);
}

.search-form-menu-mobile {
    display: flex;
    margin-bottom: 12px;
}

.search-form-menu-mobile input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--pv-border);
    border-right: none;
    outline: none;
}

.search-form-menu-mobile button {
    border: 1px solid var(--pv-border);
    background: var(--pv-primary);
    color: var(--pv-white);
    padding: 8px 14px;
    cursor: pointer;
}

/* ============================================================
   7. CONTENUTO PRINCIPALE
   ============================================================ */
#wrapper-content {
    min-height: 400px;
}

.site-content-page {
    padding: 0;
}

.page-content {
    padding: 40px 0;
}

.entry-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--pv-text);
}

.entry-title {
    font-family: var(--pv-font-heading);
    color: var(--pv-secondary);
}

/* Post */
.post-item {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.post-thumbnail img {
    border-radius: var(--pv-radius);
    margin-bottom: 20px;
}

/* ============================================================
   8. SERVIZI (dal tema originale)
   ============================================================ */
.servizi {
    max-width: 33%;
    margin: 0 auto;
    text-align: center;
}

.servizi img {
    margin: 0 auto;
}

.barrelaterali {
    border-left: 1px solid var(--pv-border);
}

.barralatdx {
    border-right: 1px solid var(--pv-border);
    border-left: 1px solid var(--pv-border);
}

.imgcirc {
    max-width: 70%;
    margin: 0 auto;
}

.textcirc {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--pv-secondary);
}

.textcirc2 {
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    padding-right: 26px;
    padding-left: 26px;
    color: var(--pv-text);
}

.glifi {
    vertical-align: middle;
    margin-top: -5px;
}

.capitesto {
    text-align: center;
    color: var(--pv-primary);
    font-size: 16px;
    line-height: 1.5;
}

.sottotitoli {
    line-height: 1.7;
    text-align: justify;
    margin-top: 18px;
}

.backf4f4f4 {
    background-color: var(--pv-bg-alt);
}

#clients {
    background-color: var(--pv-bg-alt);
}

/* ============================================================
   9. BOTTONI
   ============================================================ */
.buttoncontinua {
    display: inline-block;
    border: 1px solid var(--pv-primary);
    background-color: transparent;
    color: var(--pv-primary);
    min-width: 170px;
    padding: 13px 20px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 15px;
    cursor: pointer;
    transition: var(--pv-transition);
}

.buttoncontinua:hover {
    background-color: var(--pv-primary);
    color: var(--pv-white);
}

#buttoninvia {
    background-color: var(--pv-primary);
    color: var(--pv-white);
    border: none;
    padding: 12px 30px;
    cursor: pointer;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 11px;
    border-radius: var(--pv-radius);
    transition: var(--pv-transition);
}

#buttoninvia:hover {
    background-color: var(--pv-primary-dark);
}

/* ============================================================
   10. FORM
   ============================================================ */
.intext {
    width: 100%;
    padding: 10px 12px;
    margin: 4px 0 12px;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    outline: none;
    transition: var(--pv-transition);
}

.intext:focus {
    border-color: var(--pv-primary);
    box-shadow: 0 0 0 2px rgba(153, 89, 88, 0.15);
}

#cometrovato {
    font-weight: 600;
    margin-top: 10px;
    display: block;
    color: var(--pv-secondary);
}

.optval {
    margin-right: 6px;
}

#checkprivacy {
    margin-right: 8px;
}

#labelprivacy {
    font-size: 13px;
    line-height: 1.4;
}

/* Form contatti 7 */
.wpcf7-form {
    max-width: 100%;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    margin-bottom: 12px;
    outline: none;
}

.wpcf7-form input[type="submit"] {
    background-color: var(--pv-primary);
    color: var(--pv-white);
    border: none;
    padding: 12px 30px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 11px;
    border-radius: var(--pv-radius);
    transition: var(--pv-transition);
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--pv-primary-dark);
}

.wpcf7-response-output {
    margin-top: 15px;
    padding: 12px;
    border-radius: var(--pv-radius);
    background-color: var(--pv-bg-alt);
    font-size: 13px;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.main-footer-wrapper {
    background-color: var(--pv-secondary);
    color: #ccc;
    padding: 40px 0 20px;
    font-size: 13px;
}

.main-footer-wrapper a {
    color: var(--pv-primary-light);
}

.main-footer-wrapper a:hover {
    color: var(--pv-white);
}

.bottom-bar-wrapper {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-bar-text {
    margin: 0 0 15px;
    line-height: 1.7;
    font-size: 12px;
}

.footer-widgets {
    padding-bottom: 30px;
}

.footer-widget {
    margin-bottom: 30px;
}

.footer-widget-title {
    color: var(--pv-white);
    font-size: 16px;
    margin-bottom: 15px;
}

/* ============================================================
   12. BACK TO TOP
   ============================================================ */
.back-top-top-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: none;
}

.back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--pv-primary);
    color: var(--pv-white);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: var(--pv-transition);
}

.back-to-top:hover {
    background-color: var(--pv-primary-dark);
    color: var(--pv-white);
    transform: translateY(-3px);
}

/* ============================================================
   13. WIDGET
   ============================================================ */
.widget {
    margin-bottom: 30px;
}

.widget-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--pv-secondary);
}

/* ============================================================
   14. WORDPRESS CORE CLASSES
   ============================================================ */
.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}

.alignright {
    float: right;
    margin: 0 0 20px 20px;
}

.aligncenter {
    display: block;
    margin: 0 auto 20px;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 20px;
}

.wp-caption-text {
    font-size: 12px;
    font-style: italic;
    color: var(--pv-text-light);
    text-align: center;
    padding: 6px 0;
}

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ============================================================
   15. PAGINAZIONE
   ============================================================ */
.pagination-wrapper {
    text-align: center;
    margin: 40px 0;
}

.pagination-wrapper .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    color: var(--pv-text);
    transition: var(--pv-transition);
}

.pagination-wrapper .page-numbers:hover,
.pagination-wrapper .page-numbers.current {
    background-color: var(--pv-primary);
    color: var(--pv-white);
    border-color: var(--pv-primary);
}

/* ============================================================
   16. ANIMAZIONI
   ============================================================ */
@keyframes pvFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wpb_animate_when_almost_visible {
    opacity: 0;
}

.wpb_animate_when_almost_visible.wpb_start_animation {
    animation: pvFadeIn 0.6s ease forwards;
}

/* ============================================================
   17. MEDIA QUERIES — RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 991px) {

    #header { display: none; }
    #header-mobile { display: block; }

    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h3 { font-size: 21px; }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .barrelaterali,
    .barralatdx {
        border: none;
    }

    .servizi {
        max-width: 100%;
    }

    .col-md-6, .col-sm-6,
    .col-md-4, .col-sm-4,
    .col-md-3, .col-sm-3,
    .col-md-8, .col-sm-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .main-footer-wrapper {
        text-align: center;
    }
}

/* Smartphone */
@media (max-width: 767px) {

    body { font-size: 14px; }

    h1 { font-size: 26px; }
    h2 { font-size: 21px; }
    h3 { font-size: 18px; }

    .page-content { padding: 20px 0; }

    .margin-bottom-100 { margin-bottom: 50px; }
    .margin-bottom-75  { margin-bottom: 40px; }
    .margin-bottom-80  { margin-bottom: 40px; }

    .back-to-top {
        width: 38px;
        height: 38px;
    }
}

/* Small */
@media (max-width: 480px) {

    h1 { font-size: 22px; }
    h2 { font-size: 19px; }

    .textcirc2 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ============================================================
   18. STAMPA
   ============================================================ */
@media print {

    #header,
    #header-mobile,
    .back-top-top-wrap,
    .main-footer-wrapper {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}