/* ============================================
   GR KLINIKA — The7 Theme Overrides
   Loaded AFTER The7's CSS to customize
   The7's native elements to match GR design.

   This file handles:
   1. Hiding The7 elements we replace with custom GR markup
   2. Restyling The7-native selectors (#content, .fancy-header, etc.)
   3. WPBakery row/column layout resets
   ============================================ */

/* ============================================
   Hide The7 Elements We Replace
   ============================================ */

/* Loader & pre-render overlays
   Use `body #load` to beat The7's inline `body #load { display: block }` specificity */
body #load,
#load,
.loader-removed,
.wf-loading-before-site {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* The7 mobile header (we use .gr-mobile-menu) */
.dt-mobile-header,
.mobile-header-bar {
    display: none !important;
}

/* The7 desktop header (we use .gr-header) */
/* IMPORTANT: DO NOT add .phantom-sticky here.
   The7 adds it as a body CLASS when sticky header is enabled,
   so `.phantom-sticky { display:none }` would hide the entire <body>. */
.masthead,
.branding,
.header-bar {
    display: none !important;
}

/* The7 fancy header — SHOW on inner pages, HIDE on homepage */
/* Homepage has its own hero section; inner pages use fancy-title for title + breadcrumbs */
.home #fancy-header,
.home .fancy-header {
    display: none !important;
}

/* Hide The7's default page-title bar (not the fancy header) */
.page-title,
.entry-header {
    display: none !important;
}

/* The7 footer (we use .gr-footer) */
.footer .wf-wrap,
#footer,
#bottom-bar {
    display: none !important;
}

/* ============================================
   Body
   ============================================ */
body {
    font-family: 'Open Sans', sans-serif !important;
    color: #2c2c2c;
    line-height: 1.6;
    background: #ffffff;
    margin: 0;
    padding-top: 90px; /* space for fixed GR header */
}

/* ============================================
   The7 Fancy Title  →  GR Page Hero
   Restyle The7's fancy header to match GR cream hero bar
   ============================================ */
#fancy-header,
.fancy-header {
    background-color: #f5f0eb !important;
    padding: 3rem 2rem !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    border: none !important;
    min-height: auto !important;
}

.fancy-title-head h1.fancy-title,
#fancy-header h1.fancy-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   The7 Breadcrumbs
   ============================================ */
.breadcrumbs,
.fancy-header .breadcrumbs {
    font-size: 0.9rem !important;
    color: #666666 !important;
}

.breadcrumbs a {
    color: #b49258 !important;
    text-decoration: none !important;
}

.breadcrumbs a:hover {
    text-decoration: underline !important;
}

/* ============================================
   The7 Content Area
   ============================================ */
#content,
.content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem 4rem !important;
}

/* ============================================
   The7 Typography Overrides
   ============================================ */
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6,
.content h1, .content h2, .content h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #2c2c2c !important;
    font-weight: 400 !important;
}

#content h2 { font-size: 2.2rem !important; }
#content h3 { font-size: 1.6rem !important; font-weight: 500 !important; }
#content h4 { font-size: 1.3rem !important; font-weight: 500 !important; }

#content p {
    color: #666666 !important;
    line-height: 1.8 !important;
}

#content a {
    color: #b49258 !important;
}

#content a:hover {
    color: #a88b4a !important;
}

/* ============================================
   Image Sizing in Content
   ============================================ */
#content .wpb_text_column img,
#content .vc_column_text img {
    max-width: 600px !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto 1.5rem;
    border-radius: 12px;
}

/* ============================================
   Lists in Content
   ============================================ */
#content ul {
    list-style: none !important;
    padding-left: 1.5rem !important;
}

#content ul li {
    position: relative !important;
    padding-left: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    color: #666666 !important;
}

#content ul li::before {
    content: "\25A0" !important;
    color: #b49258 !important;
    font-size: 0.6em !important;
    position: absolute;
    left: 0;
}

/* ============================================
   WPBakery Row / Column Layout Resets
   ============================================ */
.wpb_row,
.vc_row {
    margin-bottom: 0 !important;
}

.vc_row[data-vc-full-width] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove WPBakery custom spacing (inline styles) */
.vc_column-inner {
    padding-top: 0 !important;
}

/* ============================================
   The7 Sidebar / Layout Overrides
   Force single-column full-width layout
   ============================================ */
#main,
.main {
    width: 100% !important;
    float: none !important;
}

.sidebar-content,
.sidebar {
    display: none !important;
}

/* ============================================
   The7 Page & Post Wrappers
   ============================================ */
.page-inner,
.wf-wrap {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* ============================================
   The7 Link & Hover Colours
   ============================================ */
a,
.dt-skin-primary-text {
    color: #b49258;
}

a:hover {
    color: #a88b4a;
}

/* ============================================
   The7 Pagination
   ============================================ */
.paginator,
.page-links,
.dt-pagination {
    text-align: center !important;
    margin: 3rem 0 !important;
}

.paginator a,
.page-links a,
.dt-pagination a {
    display: inline-block !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    color: #2c2c2c !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.paginator a:hover,
.page-links a:hover,
.dt-pagination a:hover {
    border-color: #c9a96e !important;
    color: #b49258 !important;
}

.paginator .act,
.page-links > span,
.dt-pagination .current {
    background: #c9a96e !important;
    color: #ffffff !important;
    border-color: #c9a96e !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
}

/* ============================================
   The7 Form Elements
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-family: 'Open Sans', sans-serif !important;
    transition: border-color 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: #c9a96e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15) !important;
}

/* Submit buttons */
input[type="submit"],
button[type="submit"] {
    background: #c9a96e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0.875rem 2rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background: #a88b4a !important;
}

/* ============================================
   The7 Blockquotes
   ============================================ */
blockquote,
.wp-block-quote {
    border-left: 3px solid #c9a96e !important;
    padding: 1.5rem 2rem !important;
    margin: 2rem 0 !important;
    background: #faf8f5 !important;
    font-style: italic !important;
    color: #666666 !important;
}

blockquote p {
    margin-bottom: 0 !important;
}

/* ============================================
   The7 Tables (native, non-TablePress)
   ============================================ */
#content table:not(.tablepress) {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
}

#content table:not(.tablepress) th {
    background: #faf8f5 !important;
    color: #2c2c2c !important;
    font-weight: 600 !important;
    padding: 1rem 1.25rem !important;
    text-align: left !important;
    border-bottom: 2px solid #c9a96e !important;
}

#content table:not(.tablepress) td {
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #666666 !important;
}

#content table:not(.tablepress) tr:hover td {
    background: #faf8f5 !important;
}

/* ============================================
   Responsive — Mobile Overrides
   ============================================ */
@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    #content,
    .content {
        padding: 0 1rem 3rem !important;
    }

    .fancy-title-head h1.fancy-title,
    #fancy-header h1.fancy-title {
        font-size: 1.8rem !important;
    }

    #content h2 { font-size: 1.6rem !important; }
    #content h3 { font-size: 1.3rem !important; }
}