/*
 * NewsCorp site customizations — design polish.
 * Loaded via the must-use plugin (wp-content/mu-plugins/newscorp-site-customizations.php)
 * so it survives theme AND plugin updates. Edit here, not in the theme.
 * Moved out of the newscorp child theme on 2026-06-20.
 */

/* ============================================================
   NEWSCORP — DESIGN POLISH (added 2026-06-20)
   Visual refinements only. No layout/structure changes.
   To revert, delete everything below this banner.
   ============================================================ */
:root {
    --nc-accent: #b80000;
    --nc-card-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    --nc-card-shadow-hover: 0 14px 30px rgba(0, 0, 0, .14);
    --nc-ease: .28s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 1. Post-card polish (Essential Addons post grid) ---------- */
.eael-post-grid .eael-grid-post-holder-inner {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--nc-card-shadow);
    transition: transform var(--nc-ease), box-shadow var(--nc-ease);
}

.eael-post-grid .eael-grid-post:hover .eael-grid-post-holder-inner {
    transform: translateY(-6px);
    box-shadow: var(--nc-card-shadow-hover);
}

/* image zoom-on-hover (clip inside the rounded card) */
.eael-post-grid .eael-entry-media,
.eael-post-grid .eael-entry-thumbnail {
    overflow: hidden;
}

.eael-post-grid .eael-entry-thumbnail img {
    display: block;
    width: 100%;
    transition: transform .5s ease;
}

/* EAEL centres the ratio image with `scale(1.01) translate(-50%,-50%)`. The
   hover zoom must KEEP that translate, otherwise the image loses its centring
   and jumps out of place. Match EAEL's transform order and just bump the scale. */
.eael-post-grid .eael-grid-post:hover .eael-entry-thumbnail.eael-image-ratio img {
    transform: scale(1.06) translate(-50%, -50%);
}

/* fallback for any non-ratio thumbnails (statically positioned images) */
.eael-post-grid .eael-grid-post:hover .eael-entry-thumbnail:not(.eael-image-ratio) img {
    transform: scale(1.06);
}

/* title: tighter leading + accent colour on card hover.
   Clamp to a maximum of 2 lines with an ellipsis so card titles stay uniform. */
.eael-post-grid .eael-entry-title {
    line-height: 1.34;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eael-post-grid .eael-entry-title a,
.eael-post-grid .eael-grid-post-link {
    transition: color .2s ease;
}

.eael-post-grid .eael-grid-post:hover .eael-entry-title a {
    color: var(--nc-accent);
}

/* meta (author / date): a touch quieter for hierarchy */
.eael-post-grid .eael-entry-meta {
    font-size: 13px;
    opacity: .85;
}

/* equal-height cards — EAEL floats its columns, so cards end at different
   heights depending on title/excerpt length. Switch the grid to flexbox
   (keeping the 25%/50% column widths) so every card in a row stretches to the
   same height, with the text area flexing to keep all card bottoms aligned. */
.eael-post-grid-container .eael-post-grid.eael-post-appender {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.eael-post-grid-container .eael-post-grid .eael-grid-post {
    float: none;
    display: flex;
}

.eael-post-grid .eael-grid-post-holder {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.eael-post-grid .eael-entry-wrapper {
    flex: 1 1 auto;
}

/* ---------- 2. Section headings (page-builder content only) ---------- */
.entry-content .elementor-widget-heading .elementor-heading-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 22px;
}

.entry-content .elementor-widget-heading .elementor-heading-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: var(--nc-accent);
    border-radius: 2px;
}

/* keep centred headings centred */
.entry-content .elementor-widget-heading.elementor-absolute .elementor-heading-title::after,
.entry-content .elementor-heading-title[style*="center"]::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ---------- 3. Header & navigation polish ---------- */
/* site title: subtle hover feedback */
.site-branding .site-title-anchor {
    transition: opacity .2s ease;
}

.site-branding .site-title-anchor:hover {
    opacity: .85;
}

/* top-level menu: smooth colour transition + accent underline on hover/active.
   Uses box-shadow (not ::after) so the parent theme's dropdown carets stay intact. */
.main-navigation .menu-desktop > li.menu-item > a {
    transition: color .2s ease, box-shadow var(--nc-ease);
    box-shadow: inset 0 -2px 0 rgba(184, 0, 0, 0);
}

.main-navigation .menu-desktop > li.menu-item:hover > a,
.main-navigation .menu-desktop > li.current-menu-item > a,
.main-navigation .menu-desktop > li.current-menu-parent > a {
    box-shadow: inset 0 -2px 0 var(--nc-accent);
}

/* search icon: gentle hover */
.search-watch .search-icon {
    transition: color .2s ease, transform .2s ease;
}

.search-watch .search-icon:hover {
    transform: scale(1.08);
}

/* top utility bar: refined spacing/legibility */
.top-header .topbar-date {
    letter-spacing: .2px;
}

/* ---------- 4. Misc polish ---------- */
/* smoother focus ring for the search field */
input.search-field:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(184, 0, 0, .25);
}

/* ---------- 5. Banner slider arrows (prev / next) ----------
   Slick builds each arrow as <button class="slide-icon slide-prev|slide-next …">
   with the chevron as a Font Awesome glyph on the button itself. */
/* The main-slider column is the positioning context (it tightly wraps the
   full-height slide image). */
.aft-slider-part {
    position: relative;
}

.aft-slider-part .morenews-customizer,
.aft-slider-part .af-widget-carousel {
    position: static;
}

/* The theme pins the arrow container to a tiny 60x25 box at top-right
   (position:absolute, 4-class specificity). Neutralise it with 5 classes so it
   stops being the buttons' offset parent — the buttons then anchor to the
   full-height .aft-slider-part and centre over the image. */
.aft-main-banner-wrapper .aft-main-banner-part .aft-slider-part .af-widget-carousel .af-slick-navcontrols {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    transform: none;
}

.af-slick-navcontrols .slide-icon.slide-prev,
.af-slick-navcontrols .slide-icon.slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    cursor: pointer;
    pointer-events: auto;
    z-index: 6;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* left arrow on the left edge, right arrow on the right edge — both centered */
.af-slick-navcontrols .slide-icon.slide-prev {
    left: 14px;
    right: auto;
}

.af-slick-navcontrols .slide-icon.slide-next {
    right: 14px;
    left: auto;
}

.af-slick-navcontrols .slide-icon.slide-prev::before,
.af-slick-navcontrols .slide-icon.slide-next::before {
    color: inherit;
}

.af-slick-navcontrols .slide-icon.slide-prev:hover,
.af-slick-navcontrols .slide-icon.slide-next:hover,
.af-slick-navcontrols .slide-icon.slide-prev:focus,
.af-slick-navcontrols .slide-icon.slide-next:focus {
    background: var(--nc-accent);
    color: #fff;
    /* keep vertical centering; add a subtle grow */
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 14px rgba(184, 0, 0, .45);
}

/* ---------- 6. Hide empty featured-posts strip below banner ----------
   The demo's "Featured" widget area renders with no posts assigned, leaving
   an empty white band. :has() hides it only while empty — it auto-returns
   if you ever add featured content to it. */
.aft-frontpage-feature-section-wrapper:not(:has(img)):not(:has(.read-img)) {
    display: none;
}

/* ---------- 7. Hide empty category sections on the homepage ----------
   Each homepage category block is an Elementor container holding a heading, an
   Essential Addons post grid, and a "Daugiau" button. When the category has no
   posts the grid renders <p class="no-posts-found">. This hides the whole block
   while it is empty; it reappears automatically once a post is published in that
   category. The child combinator (> …) scopes the match to the section's own
   container, so ancestor containers are not hidden. */
.elementor-element.e-con:has(> .elementor-widget-eael-post-grid .no-posts-found) {
    display: none;
}

/* ---------- 8. Card hover icon: site logo (megaphone) instead of the arrow ----------
   EAEL paints a Font Awesome arrow (<i>) in the centre of the image overlay on
   hover. Replace that glyph with the site's megaphone logo. The logo PNG is
   black-on-transparent, so brightness(0) invert(1) recolours it white to sit on
   the dark overlay. */
.eael-post-grid .eael-entry-overlay > i {
    width: 54px;
    height: 54px;
    background: url('card-hover-logo.png') center / contain no-repeat;
    filter: brightness(0) invert(1);
}

.eael-post-grid .eael-entry-overlay > i::before {
    content: "";
    display: none;
}

/* ---------- 9. Single article — reading experience ----------
   Scoped to single posts only. NOTE: the parent theme outputs dynamic/inline
   CSS *after* this stylesheet, so the key declarations use !important to win. */

/* body copy: airier line-height + comfortable text colour */
.single-post .entry-content.read-details {
    line-height: 1.85 !important;
    color: #2b2b2b;
}

.single-post .entry-content.read-details p {
    margin-bottom: 1.5em !important;
}

/* lead paragraph slightly larger for a magazine feel */
.single-post .entry-content.read-details > p:first-of-type {
    font-size: 1.06em;
    color: #1d1d1d;
}

/* subheadings: clear hierarchy + breathing room above each section */
.single-post .entry-content.read-details h2,
.single-post .entry-content.read-details h3,
.single-post .entry-content.read-details h4 {
    margin-top: 1.8em !important;
    margin-bottom: .55em !important;
    line-height: 1.3 !important;
    font-weight: 700;
}

/* featured image: the theme renders it small (≈350px) and left-aligned via a
   width:fit-content container. Make it a full-width, rounded hero instead. */
.single-post .read-img > .post-thumbnail.full-width-image {
    width: 100% !important;
}

.single-post .post-thumbnail.full-width-image img.wp-post-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .14);
}

/* in-content images stay responsive + rounded */
.single-post .entry-content.read-details img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* blockquote: accent bar + soft tint */
.single-post .entry-content.read-details blockquote {
    margin: 1.7em 0 !important;
    padding: .6em 1.3em !important;
    border-left: 4px solid var(--nc-accent) !important;
    background: #faf6f6;
    font-style: italic;
    color: #333;
}

/* lists: readable indentation + spacing */
.single-post .entry-content.read-details ul,
.single-post .entry-content.read-details ol {
    margin: 0 0 1.5em 1.4em !important;
}

.single-post .entry-content.read-details li {
    margin-bottom: .5em;
}

/* body links: keep brand red, add a subtle underline affordance */
.single-post .entry-content.read-details a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(184, 0, 0, .35);
    transition: text-decoration-color .2s ease;
}

.single-post .entry-content.read-details a:hover {
    text-decoration-color: var(--nc-accent);
}


/* ---------- 10. Single-post: breadcrumb + sidebar tidy-ups ----------
   (a) The breadcrumb wrapper renders empty (no breadcrumb output), leaving an
   empty white bar below the nav. Hide it while it has no links; it returns
   automatically if breadcrumbs ever populate. */
.aft-main-breadcrumb-wrapper:not(:has(a)) {
    display: none !important;
}

/* (b) "Naujausi" is a heading-only text widget that rendered as a tall, mostly
   empty card. Make it a compact section title (accent underline) that sits
   directly above the recent-posts list. */
#secondary #block-14 {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

#secondary #block-14 p {
    margin: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--nc-accent);
}

/* (c) Recent-posts (Latest Posts block): consistent full-width rounded
   thumbnails so items line up — fixes the empty gap beside smaller images. */
#secondary .wp-block-latest-posts__featured-image {
    float: none !important;
    width: 100% !important;
    margin: 0 0 8px !important;
}

#secondary .wp-block-latest-posts__featured-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 6px;
}

#secondary .wp-block-latest-posts__list > li {
    margin-bottom: 18px;
}