/*
Theme Name:   Porto Child  Top Roofing
Template:     porto
Version:      0.4.5
Description:  Stratul de stil Top Roofing peste Porto 4.4.2. v4 20.09.2026: antet alb; bara de contact sus-stnga, alb, WhatsApp verde; submeniurile cad liber.
*/

/* 0. Principii: vezi copia de lucru a temei (comentariul lung, cu caractere speciale, strica minificarea cache-ului). */

:root {
  --tr-accent: #DC5C2C;          /* portocaliul mrcii  butoane, accente, titluri mari */
  --tr-accent-text: #A8421A;     /* portocaliu pentru text mic i legturi (6:1 pe alb) */
  --tr-accent-hover: #8F3815;
  --tr-ink: #343334;             /* textul de baz (12:1) */
  --tr-ink-strong: #232223;      /* titluri */
  --tr-muted: #5E5C5D;           /* text secundar (6,5:1) */
  --tr-ground: #FAF8F5;          /* fondul paginilor */
  --tr-card: #FFFFFF;
  --tr-line: #E6E1DB;
  --tr-dark: #343334;            /* benzi nchise, antetul tabelelor */
  --tr-font-head: "Archivo", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tr-font-text: "Source Sans 3", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tr-s1: 4px;  --tr-s2: 8px;  --tr-s3: 12px; --tr-s4: 16px;
  --tr-s5: 24px; --tr-s6: 32px; --tr-s7: 48px; --tr-s8: 64px;
  --tr-radius: 8px;
  --tr-radius-lg: 14px;
}

/* ==========================================================================
   1. Baz: fond, text, legturi
   ========================================================================== */
body {
  background-color: var(--tr-ground);
  color: var(--tr-ink);
  font-family: var(--tr-font-text);
  font-size: 17px;
  line-height: 1.6;
}
#main, .page-wrapper { background-color: var(--tr-ground); }

#content a:not(.btn):not(.button):not([class*="ubtn"]):not([class*="vc_"]) { color: var(--tr-accent-text); }
#content a:not(.btn):not(.button):not([class*="ubtn"]):not([class*="vc_"]):hover { color: var(--tr-accent-hover); }

/* ==========================================================================
   2. Titluri (doar n coninutul paginii; antetul i widget-urile rmn ale temei)
   ========================================================================== */
#content h1, #content h2, #content h3, #content h4 {
  font-family: var(--tr-font-head);
  color: var(--tr-ink-strong);
  letter-spacing: -0.01em;
  text-transform: none;
}
#content h1 { font-size: 40px; line-height: 1.1; font-weight: 800; margin: 0 0 var(--tr-s5); }
#content h2 { font-size: 30px; line-height: 1.2; font-weight: 700; margin: var(--tr-s7) 0 var(--tr-s4); }
#content h3 { font-size: 22px; line-height: 1.3; font-weight: 700; margin: var(--tr-s6) 0 var(--tr-s3); }
#content h4 { font-size: 18px; line-height: 1.35; font-weight: 700; margin: var(--tr-s5) 0 var(--tr-s2); }

#content .page-content > p,
#content .entry-content > p { max-width: 72ch; }
#content .page-content > ul,
#content .page-content > ol { padding-left: 1.3em; max-width: 72ch; }
#content .page-content > ul > li,
#content .page-content > ol > li { margin: 0 0 var(--tr-s2); }

/* ==========================================================================
   3. Butoane Porto (bootstrap)  primar / secundar
   ========================================================================== */
.btn-primary {
  background-color: var(--tr-accent);
  border-color: var(--tr-accent);
  color: #fff;
  font-family: var(--tr-font-head);
  font-weight: 700;
  border-radius: var(--tr-radius);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--tr-accent-text);
  border-color: var(--tr-accent-text);
  color: #fff;
}
.btn-secondary {
  background-color: var(--tr-dark);
  border-color: var(--tr-dark);
  color: #fff;
  font-family: var(--tr-font-head);
  font-weight: 700;
  border-radius: var(--tr-radius);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--tr-ink-strong);
  border-color: var(--tr-ink-strong);
  color: #fff;
}
.btn-lg { padding: 14px 26px; font-size: 17px; }

/* ==========================================================================
   4. Tabele de preuri  doar tabelele HTML simple (fr clas)
   ========================================================================== */
#content .page-content table:not([class]) {
  width: 100%;
  border-collapse: collapse;
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  margin: var(--tr-s4) 0 var(--tr-s5);
  font-variant-numeric: tabular-nums;
}
#content .page-content table:not([class]) th {
  background: var(--tr-dark);
  color: #fff;
  font-family: var(--tr-font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
}
#content .page-content table:not([class]) td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tr-line);
  vertical-align: top;
}
#content .page-content table:not([class]) tbody tr:nth-child(even) td { background: #FBFAF8; }
#content .page-content table:not([class]) td strong { color: var(--tr-ink-strong); }
@media (max-width: 767px) {
  #content .page-content table:not([class]) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #content .page-content table:not([class]) th,
  #content .page-content table:not([class]) td { padding: 10px 12px; white-space: nowrap; }
}

/* ==========================================================================
   5. Antet  bara de sus, logo, meniul principal, butonul Cere ofert
   v2 (KOO-MASTER 19.09.2026 23:5x): CSS-ul generat de opiunile Porto
   (#porto-generated-css-output, #wp-custom-css) se ncarc DUP acest fiier i
   foreaz antetul portocaliu #ef5210 cu meniu alb; de aceea selectorii de mai
   jos au specificitate mai mare (body #header ) i !important DOAR unde Porto
   folosete !important (hover/activ pe meniu).
   inta [C 19.09]: bara de sus portocalie  bara principal alb  meniu gri-nchis 
   portocaliu doar pe activ/hover i pe butonul Cere ofert (li.tr-cta, din Meniuri).
   ========================================================================== */
/* v4: pe DESKTOP bara de contact rmne SUS, alb, stnga, WhatsApp verde; pe TELEFON sus, portocalie. (v3 o mutase sub meniu  acoperea submeniurile, retras [C 00:4x]) */
@media (max-width: 991px) {
  body #header .header-top { background: var(--tr-accent); border-bottom: 0; }
  body #header .header-top,
  body #header .header-top a,
  body #header .header-top .nav-top > li > a,
  body #header .header-top .nav-top > li > a > i { color: #fff; font-size: 14px; }
  body #header .header-top a:hover { color: #FFE3D6; }
}
@media (min-width: 992px) {
  /* v4 [C 20.09 00:4x tot deasupra, doar f rocada: pui sus stnga]: bara de contact rmne SUS (submeniurile trebuie s cad liber),
     alb, elementele n stnga, text nchis, WhatsApp verde. Fr flex/order (v3 punea rndul sub meniu i acoperea submeniurile). */
  body #header .header-top { background: #fff; border-bottom: 1px solid var(--tr-line); }
  body #header .header-top .nav-top > li > a { color: var(--tr-ink); font-size: 14px; font-weight: 600; }
  body #header .header-top .nav-top > li > a:hover { color: var(--tr-accent-text); }
  body #header .header-top .nav-top > li.whatsapp > a,
  body #header .header-top a[href*="wa.me"],
  body #header .header-top a[href*="whatsapp"] { color: #128C7E !important; font-weight: 700; }
  body #header .header-top .nav-top > li.whatsapp > a i { color: #25D366 !important; }
}

/* Porto pune #ef5210 prin `.fixed-header #header .header-main` (specificitate 1,2,0)  selectorii de mai jos: 1,2,1 / 1,3,1 */
body #header .header-main,
body .fixed-header #header .header-main,
body .fixed-header #header .header-main.sticky { background: #fff; border-bottom: 1px solid var(--tr-line); }
@media (max-width: 991px) { body .fixed-header #header .header-main { background: rgba(255,255,255,0.96); } }

body #header .header-main #main-menu .mega-menu > li.menu-item > a {
  font-family: var(--tr-font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tr-ink) !important;
  background: transparent !important;
}
/* v4.1 [C 20.09 00:4x cnd o pagin din meniu e activ e scris cu alb pe fond alb]: toate strile activ/deschis/curent"
   pe care le pun WordPress sau Porto (current-menu-item, current-menu-ancestor, current_page_item, active, open, hover)
    text portocaliu-nchis pe fond transparent; i pe <span>-ul din link, dac Porto l albete. */
body #header .header-main #main-menu .mega-menu > li.menu-item.active > a,
body #header .header-main #main-menu .mega-menu > li.menu-item.open > a,
body #header .header-main #main-menu .mega-menu > li.current-menu-item > a,
body #header .header-main #main-menu .mega-menu > li.current-menu-ancestor > a,
body #header .header-main #main-menu .mega-menu > li.current-menu-parent > a,
body #header .header-main #main-menu .mega-menu > li.current_page_item > a,
body #header .header-main #main-menu .mega-menu > li.current_page_ancestor > a,
body #header .header-main #main-menu .mega-menu > li.menu-item > a:hover,
body #header .header-main #main-menu .mega-menu > li.menu-item:hover > a,
body #header .header-main #main-menu .mega-menu > li.menu-item.has-sub:hover > a {
  color: var(--tr-accent-text) !important;
  background: transparent !important;
}
body #header .header-main #main-menu .mega-menu > li.menu-item > a > span,
body #header .header-main #main-menu .mega-menu > li.menu-item > a:hover > span,
body #header .header-main #main-menu .mega-menu > li.active > a > span,
body #header .header-main #main-menu .mega-menu > li.current-menu-item > a > span { color: inherit !important; background: transparent !important; }
/* antetul lipicios (Porto l recoloreaz separat) */
body #header div.header-main.sticky #main-menu .mega-menu > li.menu-item > a { color: var(--tr-ink) !important; background: transparent !important; }
body #header div.header-main.sticky #main-menu .mega-menu > li.menu-item > a:hover,
body #header div.header-main.sticky #main-menu .mega-menu > li.menu-item.active > a { color: var(--tr-accent-text) !important; background: transparent !important; }
/* iconiele sociale din antet (Porto le face albe pe portocaliu) */
body #header .header-main .share-links a { color: var(--tr-muted) !important; }

/* butonul Cere ofert = element de meniu cu clasa CSS tr-cta (se pune din Aspect  Meniuri) */
body #header .header-main #main-menu .mega-menu > li.tr-cta > a,
body #header div.header-main.sticky #main-menu .mega-menu > li.tr-cta > a {
  background: var(--tr-accent) !important;
  color: #fff !important;
  border-radius: var(--tr-radius);
  padding: 10px 18px;
  margin-left: var(--tr-s3);
}
body #header .header-main #main-menu .mega-menu > li.tr-cta > a:hover,
body #header div.header-main.sticky #main-menu .mega-menu > li.tr-cta > a:hover { background: var(--tr-accent-text) !important; color: #fff !important; }

/* meniul de pe telefon (Porto #nav-panel) */
#nav-panel .mobile-menu > li > a, #nav-panel .accordion-menu > li > a { font-family: var(--tr-font-head); font-weight: 600; color: var(--tr-ink); }
#nav-panel .accordion-menu li.menu-item.active > a { background-color: var(--tr-accent); color: #fff; }
#nav-panel .mobile-menu > li.tr-cta > a, #nav-panel .accordion-menu > li.tr-cta > a { color: var(--tr-accent-text); }

/* ==========================================================================
   6. Footer
   ========================================================================== */
#footer { background: #232223; color: #D9D5D1; }
#footer .footer-main { padding-top: var(--tr-s7); padding-bottom: var(--tr-s6); }
#footer .widget-title {
  font-family: var(--tr-font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
#footer a { color: #F2EFEB; }
#footer a:hover { color: #F2A27F; }
#footer .footer-bottom { background: #1A191A; color: #B9B5B1; font-size: 14px; }

/* ==========================================================================
   7. Componente pentru paginile noi (prefix .tr-)  prima pagin static
   ========================================================================== */
.tr-hero {
  background: var(--tr-dark);
  color: #fff;
  border-radius: var(--tr-radius-lg);
  padding: var(--tr-s8) var(--tr-s7);
  margin: 0 0 var(--tr-s7);
}
#content .tr-hero h1 { color: #fff; font-size: 48px; margin: 0 0 var(--tr-s4); }
.tr-hero p { color: #E9E6E3; font-size: 19px; max-width: 60ch; }
.tr-hero .tr-actions { display: flex; flex-wrap: wrap; gap: var(--tr-s3); margin-top: var(--tr-s5); }

.tr-grid { display: grid; gap: var(--tr-s5); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--tr-s5) 0; }
.tr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-card {
  display: flex; flex-direction: column; gap: var(--tr-s3);
  background: var(--tr-card);
  border-radius: var(--tr-radius-lg);
  border-top: 5px solid var(--tr-accent);
  padding: var(--tr-s5);
  color: var(--tr-ink);
  text-decoration: none;
}
#content a.tr-card, #content a.tr-card:hover { color: var(--tr-ink); }
.tr-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tr-radius); }
.tr-card .tr-card__title { font-family: var(--tr-font-head); font-weight: 700; font-size: 21px; color: var(--tr-ink-strong); }
.tr-card .tr-card__more { font-family: var(--tr-font-head); font-weight: 700; color: var(--tr-accent-text); }

.tr-steps { counter-reset: tr-step; list-style: none; padding: 0; display: grid; gap: var(--tr-s4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-steps > li { counter-increment: tr-step; background: var(--tr-card); border-radius: var(--tr-radius); padding: var(--tr-s5); }
.tr-steps > li::before { content: counter(tr-step); display: block; font-family: var(--tr-font-head); font-weight: 800; font-size: 32px; color: var(--tr-accent); line-height: 1; margin-bottom: var(--tr-s2); }

.tr-note { border-left: 4px solid var(--tr-accent); background: #F4F0EB; padding: var(--tr-s3) var(--tr-s4); margin: var(--tr-s4) 0; }
.tr-band { background: #EDE9E4; border-radius: var(--tr-radius-lg); padding: var(--tr-s6); margin: var(--tr-s7) 0; }
.tr-request { background: var(--tr-card); border: 2px solid var(--tr-accent); border-radius: var(--tr-radius-lg); padding: var(--tr-s6); margin: var(--tr-s7) 0; }
.tr-small { font-size: 14px; color: var(--tr-muted); }

@media (max-width: 991px) {
  .tr-grid, .tr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  #content h1 { font-size: 30px; }
  #content h2 { font-size: 24px; }
  #content h3 { font-size: 20px; }
  .tr-hero { padding: var(--tr-s6) var(--tr-s5); }
  #content .tr-hero h1 { font-size: 32px; }
  .tr-grid, .tr-grid--2, .tr-steps { grid-template-columns: minmax(0, 1fr); }
}

/* meniul principal: elementul selectat in portocaliu (08.10.2026) */
body #header .header-main #main-menu .mega-menu > li.menu-item.active > a,
body #header .header-main #main-menu .mega-menu > li.menu-item.current-menu-ancestor > a,
body #header div.header-main.sticky #main-menu .mega-menu > li.menu-item.active > a { color: #DC5C2C !important; background: transparent !important; }

/* logo-ul nu mai acopera meniul: imaginea mare a logo-ului (overlay) avea 265px si statea peste primul element de meniu (08.10.2026) */
@media (min-width: 992px) {
  #header.logo-overlay-header .overlay-logo img { max-width: 140px !important; height: auto !important; }
}