/*
Theme Name: Barefoot UK
Theme URI: https://barefootwine.co.uk
Author: Barefoot Wine
Author URI: https://barefootwine.co.uk
Description: Custom WordPress theme for Barefoot UK website, migrated from Drupal
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barefoot-uk
*/

/* Banner Section - matches Drupal exactly */

.banner::before,
.banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background-repeat: repeat-x;
    background-position: 50% 0;
    z-index: 2;
}

.banner::before {
    top: 0;
    height: 22px;
    background-image: url('img/bgs/bg-white01-t.png');
}

.banner::after {
    bottom: 0;
    height: 22px;
    background-.mb-100 {
: url('img/bgs/bg-white01-b.png');
    background-size: auto 22px;
}

.banner .title {
    z-index: 3;
    position: relative;
}

.banner h1 {
    margin: 0 0 22px 19px;
    font-size: 56px;
}

@media (min-width: 768px) {
    .banner h1 {
        font-size: 96px;
        max-width: 767px;
        margin: 21px 0 4px -100px;
    }
}

/* Main Node Template Styling - matches Drupal */
.main.node-tpl {
    max-width: 1200px;
    margin: 0 auto;
}

.container.content.user-content {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* User Content Styling */
.user-content {
    line-height: 1.54;
}

.user-content h1,
.user-content h2,
.user-content h3,
.user-content h4,
.user-content h5,
.user-content h6 {
    font-family: 'Gotham', sans-serif;
    text-transform: uppercase;
    color: #3e3a53;
}

@media (min-width: 768px) {
    .user-content h2 {
        font-size: 1.5rem;
    }
    
    .user-content h3 {
        font-size: 1.25rem;
    }
}

.user-content img {
    max-width: 100% !important;
    height: auto !important;
}

.mt-100 {
    margin-top: 100px;
}

/* Banner h2 styling - matches Drupal */
.banner h2 {
    margin: 0 0 22px;
    text-align: left;
    font-size: 2.69rem;
    line-height: 0.84;
    max-width: 90%;
}

@media (min-width: 768px) {
    .banner h2 {
        font-size: 5.75rem;
        margin: 21px 0 22px -127px;
        max-width: unset;
    }
}

.content-block .heading h2.text-pink {
    color: #e91e63;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.isotope {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.isotope .lg {
    grid-column: span 2;
}

.img-wrap {
    overflow: hidden;
    border-radius: 8px;
}

.img-wrap img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.img-wrap:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .two-column {
        column-count: 1;
    }
    
    .isotope .lg {
        grid-column: span 1;
    }
}

/* Readmore functionality */
.read-more-js[data-readmore] {
    transition: height 750ms;
    overflow: hidden;
}

.read-more-link {
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #e91e63;
    text-decoration: none;
    font-weight: bold;
}

.read-more-link:hover {
    text-decoration: underline;
}

.entry-header {
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 20px;
}

.entry-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
}

.entry-meta {
    color: #666;
    font-size: 0.9em;
}

.entry-meta span {
    margin-right: 15px;
}

.entry-content {
    font-size: 1.1em;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content h2, .entry-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #333;
}

.entry-footer {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 30px;
}

.tag-links {
    color: #666;
}

.tag-links a {
    color: #0073aa;
    text-decoration: none;
}

.tag-links a:hover {
    text-decoration: underline;
}

/* Post Navigation */
.post-navigation {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.nav-links {
    display: flex;
    justify-content: space-between;
}

.nav-subtitle {
    display: block;
    font-size: 0.8em;
    color: #666;
    text-transform: uppercase;
}

.nav-title {
    display: block;
    font-weight: bold;
    color: #0073aa;
}

/* Responsive */
@media (max-width: 768px) {
    .single-post {
        padding: 20px 15px;
    }
    
    .entry-title {
        font-size: 2em;
    }
    
    .nav-links {
        flex-direction: column;
        gap: 20px;
    }
}

/* Slick Slider Dots - Match Production Styling */
.slider-list .slick-dots li button::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #d8d8d8;
    border-radius: 50%;
    display: block;
}

.slider-list .slick-dots li.slick-active button::before {
    background-color: #ffb000;
}

.slider-list .slick-dots li button:hover::before {
    background-color: #ffb000;
}

.slider-list .slick-dots li {
    margin: 0 3px;
}