/*!
 * IDDS Pro — modern / futuristic polish layer (2026).
 *
 * A global premium finish layered on top of idds-magz.css and BEFORE
 * _variants.css, so every domain looks high-end while each keeps its own
 * per-dinas identity (palette + layout + tone). Purely additive: soft layered
 * shadows, glass surfaces, gradient brand accents, tactile hover motion,
 * refined typography and focus states. Bound to the real magz markup.
 */

body.skin-magz {
    --pro-ease: cubic-bezier(.2, .7, .2, 1);
    --pro-shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
    --pro-shadow-2: 0 8px 24px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05);
    --pro-shadow-3: 0 22px 48px rgba(16, 24, 40, .16);
    --pro-grad: linear-gradient(135deg, var(--idds-primary), color-mix(in srgb, var(--idds-primary) 45%, var(--idds-accent)));
    scroll-behavior: smooth;
}
body.skin-magz ::selection { background: color-mix(in srgb, var(--idds-primary) 26%, transparent); }

/* ---- Typography refinement ------------------------------------------------ */
body.skin-magz h1, body.skin-magz h2, body.skin-magz h3 { letter-spacing: -.018em; }
body.skin-magz { text-wrap: pretty; }

/* ---- Glass header (default; per-domain hd-* variants can override) -------- */
body.skin-magz nav.menu {
    backdrop-filter: saturate(1.35) blur(12px);
    -webkit-backdrop-filter: saturate(1.35) blur(12px);
    background: color-mix(in srgb, var(--idds-surface) 86%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--idds-primary) 10%, transparent);
}
body.skin-magz nav.menu.up,
body.skin-magz header.primary.up nav.menu { box-shadow: var(--pro-shadow-2); }
/* Nav links → tactile pills */
body.skin-magz nav.menu .nav-list > li > a {
    border-radius: 10px; transition: background .18s var(--pro-ease), color .18s var(--pro-ease);
}
body.skin-magz nav.menu .nav-list > li > a:hover {
    background: color-mix(in srgb, var(--idds-primary) 10%, transparent);
    color: var(--idds-primary-700);
}

/* ---- Search + primary buttons — solid brand, soft depth (not neon glow) --- */
body.skin-magz .firstbar .search .btn,
body.skin-magz .firstbar .search .input-group-btn .btn,
body.skin-magz .btn-primary {
    background: var(--idds-primary) !important; border: 0 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: filter .18s var(--pro-ease), box-shadow .18s var(--pro-ease);
}
body.skin-magz .btn-primary:hover,
body.skin-magz .firstbar .search .btn:hover { filter: brightness(1.06); box-shadow: 0 4px 12px color-mix(in srgb, var(--idds-primary) 22%, transparent); }
body.skin-magz .firstbar .search .input-group {
    border-radius: 10px; box-shadow: var(--pro-shadow-1);
    transition: box-shadow .2s var(--pro-ease);
}
body.skin-magz .firstbar .search .input-group:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--idds-primary) 14%, transparent), var(--pro-shadow-1);
}

/* ---- Cards → soft depth, restrained lift --------------------------------- */
body.skin-magz .article:not(.main-article) .inner {
    box-shadow: var(--pro-shadow-1);
    transition: transform .28s var(--pro-ease), box-shadow .28s var(--pro-ease), border-color .28s var(--pro-ease);
}
body.skin-magz .article:not(.main-article) .inner:hover {
    transform: translateY(-3px);
    box-shadow: var(--pro-shadow-2);
    border-color: color-mix(in srgb, var(--idds-primary) 22%, transparent);
}
body.skin-magz .article:not(.main-article) .inner figure { overflow: hidden; }
body.skin-magz .article:not(.main-article) .inner figure img {
    transition: transform .5s var(--pro-ease);
}
body.skin-magz .article:not(.main-article) .inner:hover figure img { transform: scale(1.03); }

/* ---- Category → refined uppercase micro-pill ------------------------------ */
body.skin-magz .padding .detail .category a,
body.skin-magz article.featured .details .category a {
    text-transform: uppercase; letter-spacing: .07em; font-size: .66rem; font-weight: 800;
}

/* ---- Featured → cinematic gradient, floating meta ------------------------- */
body.skin-magz article.featured { overflow: hidden; }
body.skin-magz article.featured .overlay {
    background: linear-gradient(to top, rgba(3, 7, 18, .86) 0%, rgba(3, 7, 18, .35) 45%, transparent 78%);
}
body.skin-magz article.featured figure img { transition: transform .7s var(--pro-ease); }
body.skin-magz article.featured:hover figure img { transform: scale(1.05); }

/* ---- Section heading → gradient bar + kicker feel ------------------------- */
body.skin-magz .line.top > div { font-weight: 800; }
body.skin-magz .line.top > div::after {
    background: var(--idds-primary); height: 3px; border-radius: 2px; width: 2.5rem;
}

/* ---- Sidebar blocks → hairline + soft depth ------------------------------- */
body.skin-magz .sidebar .block,
body.skin-magz .sidebar .widget { box-shadow: var(--pro-shadow-1); }

/* ---- Headline ticker → glassy chip --------------------------------------- */
body.skin-magz .headline { box-shadow: var(--pro-shadow-1); }

/* ---- Reveal-on-scroll (progressive; idds.js adds .is-visible) ------------- */
body.skin-magz .idds-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s var(--pro-ease), transform .65s var(--pro-ease);
}
body.skin-magz .idds-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    body.skin-magz .idds-reveal { opacity: 1; transform: none; }
}

/* ---- Accessible focus ring ------------------------------------------------ */
body.skin-magz a:focus-visible,
body.skin-magz .btn:focus-visible,
body.skin-magz button:focus-visible,
body.skin-magz input:focus-visible {
    outline: 2px solid var(--idds-primary); outline-offset: 2px; border-radius: 6px;
}

/* ---- Modern thin scrollbar ------------------------------------------------ */
body.skin-magz * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--idds-primary) 40%, transparent) transparent; }

@media (prefers-reduced-motion: reduce) {
    body.skin-magz * { transition: none !important; scroll-behavior: auto; }
}

/* ==========================================================================
   PROFESSIONAL PORTAL — coloured chrome + content density (all domains)
   Turns the airy/minimal look into a full government-portal feel: coloured
   masthead + navigation, service strip, coloured section & widget headers,
   tighter rhythm. Per-domain hd-*/tn-* variants still layer on top.
   ========================================================================== */

/* ---- Utility masthead → subtle brand tint -------------------------------- */
body.skin-magz .firstbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--idds-primary) 9%, var(--idds-surface)), var(--idds-surface)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--idds-primary) 16%, var(--idds-border)) !important;
}
body.skin-magz .firstbar .gov-ident__badge {
    background: color-mix(in srgb, var(--idds-primary) 94%, #0b1220); color: #fff; border: 0;
    box-shadow: none;
}

/* ---- Primary navigation baseline ---------------------------------------- */
body.skin-magz nav.menu {
    background: var(--idds-primary, #1e3a8a) !important;
    border: 0 !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--idds-primary, #1e3a8a) 22%, transparent);
}
body.skin-magz nav.menu .nav-list > li > a,
body.skin-magz nav.menu ul.float-end > li > a,
body.skin-magz nav.menu .nav-list > li > a i,
body.skin-magz nav.menu ul.float-end > li > a i,
body.skin-magz nav.menu ul.float-end > li > a svg,
body.skin-magz nav.menu .arrow-right,
body.skin-magz nav.menu .arrow-left,
body.skin-magz nav.menu .mobile-toggle a { color: #fff !important; }
body.skin-magz nav.menu .nav-list > li > a { font-weight: 600; }
body.skin-magz nav.menu .nav-list > li > a:hover,
body.skin-magz nav.menu ul.float-end > li > a:hover {
    background: rgba(255, 255, 255, .18) !important; color: #fff !important;
}
body.skin-magz nav.menu .nav-list > li.active > a { background: rgba(255, 255, 255, .22) !important; }
/* Dropdowns stay light for readability */
body.skin-magz nav.menu .dropdown-menu { background: var(--idds-surface); }
body.skin-magz nav.menu .dropdown-menu li a,
body.skin-magz nav.menu .dropdown-menu li a i { color: var(--idds-text) !important; }
body.skin-magz nav.menu .dropdown-menu li a:hover {
    background: var(--idds-primary-50) !important; color: var(--idds-primary-700) !important;
}

/* ---- Header back in normal flow ------------------------------------------- */
/* The legacy theme fixes header.primary to the viewport and compensates with
   hard-coded padding (124/185/240px) on every section — which breaks as soon
   as the header height changes (our redesign, per-domain hl-* variants).
   `display: contents` lifts .firstbar + nav.menu into the body flow, so the
   sticky nav (idds-magz) keeps working and no pixel compensation is needed. */
body.skin-magz header.primary { display: contents; }
body.skin-magz section.top { padding-top: 1.6rem !important; }

/* ---- Denser rhythm: pull content up, kill dead top space ----------------- */
html { scroll-padding-top: 88px; }
body.skin-magz section.home.top { padding-top: 1.4rem !important; }
body.skin-magz .container-content { padding-top: 1.1rem; }
body.skin-magz .home .container-content > .container-md { padding-top: 0; }
/* Keep the first section heading clear of the sticky nav */
body.skin-magz .portal-strip .line.top { margin-top: .5rem; margin-bottom: 1.1rem; }
body.skin-magz .portal-strip .line.top > div { font-size: 1.42rem; }
/* Variants without a masthead (brand lives inside the nav) need extra air,
   otherwise the first heading crashes into the sticky menu. */
body.skin-magz.hl-inline section.home.top { padding-top: 2.1rem !important; }
body.skin-magz.hl-inline .portal-strip .line.top { margin-top: 0; }
/* The first block after the nav must never be pulled under it */
body.skin-magz section.home.top > .container-md:first-child,
body.skin-magz section.home.top > .container-content:first-child { margin-top: 0; }

/* ---- Coloured, prominent section headings -------------------------------- */
body.skin-magz .line.top > div,
body.skin-magz .title-col {
    font-size: 1.32rem; text-transform: none;
}
body.skin-magz .line.top > div { color: var(--idds-primary-700, var(--idds-primary)); }
body.skin-magz .line.top > div::after { height: 4px; }

/* ---- Sidebar widget headers → coloured accent bar ------------------------ */
body.skin-magz .sidebar .block .title,
body.skin-magz .sidebar .widget-title,
body.skin-magz .sidebar .block h3,
body.skin-magz .sidebar h3 {
    position: relative; padding-bottom: .55rem; margin-bottom: .9rem;
    border-bottom: 2px solid color-mix(in srgb, var(--idds-primary) 22%, var(--idds-border));
    color: var(--idds-primary-700, var(--idds-primary));
}
body.skin-magz .sidebar .block .title::after,
body.skin-magz .sidebar .widget-title::after,
body.skin-magz .sidebar .block h3::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 46px; height: 2px; background: var(--pro-grad);
}
/* Give sidebar blocks a subtle coloured top edge for structure */
body.skin-magz .sidebar .block,
body.skin-magz .sidebar .widget { border-top: 3px solid color-mix(in srgb, var(--idds-primary) 55%, var(--idds-accent)); }

/* ==========================================================================
   PORTAL SERVICE STRIP  (_portal-strip.blade.php)
   ========================================================================== */
body.skin-magz .portal-strip { margin: 1.4rem 0 1.75rem; }
body.skin-magz .portal-services {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem;
}
@media (max-width: 992px) { body.skin-magz .portal-services { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { body.skin-magz .portal-services { grid-template-columns: repeat(2, 1fr); } }

/* Elegant service tiles: one brand family, no rainbow fills */
body.skin-magz .portal-services__item {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
    padding: 1.05rem 1rem 2.15rem; border-radius: 14px; min-height: 118px;
    color: var(--idds-text) !important; font-weight: 700; text-decoration: none;
    background: var(--idds-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--idds-primary) 14%, var(--idds-border, #e5e9f0));
    border-top: 3px solid var(--idds-primary);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
    transition: transform .22s var(--pro-ease), box-shadow .22s var(--pro-ease), border-color .22s ease;
}
body.skin-magz .portal-services__item:nth-child(3n+2),
body.skin-magz .portal-services__item:nth-child(3n+3) {
    background: var(--idds-surface, #fff);
}
body.skin-magz .portal-services__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, .08);
    border-color: color-mix(in srgb, var(--idds-primary) 28%, var(--idds-border, #e5e9f0));
    color: var(--idds-text) !important;
}
body.skin-magz .portal-services__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px; font-size: 1.1rem;
    color: var(--idds-primary);
    background: color-mix(in srgb, var(--idds-primary) 10%, transparent);
}
body.skin-magz .portal-services__label {
    font-size: .92rem; line-height: 1.3; letter-spacing: -.01em;
    color: var(--idds-text);
}
body.skin-magz .portal-services__hint {
    position: absolute; left: 1rem; bottom: .85rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--idds-primary); opacity: .85;
    display: inline-flex; align-items: center; gap: .3rem;
}
body.skin-magz .portal-services__item::after { display: none; }

/* Trust / info stats row */
body.skin-magz .portal-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .9rem;
}
@media (max-width: 768px) { body.skin-magz .portal-stats { grid-template-columns: 1fr; } }
body.skin-magz .portal-stats__item {
    display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem;
    background: var(--idds-surface); border: 1px solid var(--idds-border);
    border-left: 4px solid var(--idds-primary); border-radius: 12px; box-shadow: var(--pro-shadow-1);
}
body.skin-magz .portal-stats__item i {
    flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.1rem;
    color: var(--idds-primary); background: color-mix(in srgb, var(--idds-primary) 12%, transparent);
}
body.skin-magz .portal-stats__item strong { display: block; font-size: .92rem; color: var(--idds-text); }
body.skin-magz .portal-stats__item span { font-size: .78rem; color: var(--idds-text-muted); }

/* Soft editorial placeholders — never neon/saturated empty blocks */
body.skin-magz .article figure,
body.skin-magz article.article-list figure,
body.skin-magz .article-mini figure,
body.skin-magz .best-of-the-week .article figure,
body.skin-magz .article-fw figure,
body.skin-magz .brand figure,
body.skin-magz .carousel-item {
    background: color-mix(in srgb, var(--idds-primary) 6%, #e8eef5) !important;
}

/* ---- Per-layout portal strip silhouettes (all dinas) -------------------- */
body.ly-portal .portal-services__item,
body.home--portal .portal-services__item {
    min-height: 128px;
    border-radius: 14px;
}
body.ly-magazine .portal-services,
body.home--magazine .portal-services {
    grid-template-columns: repeat(3, 1fr);
}
body.ly-magazine .portal-services__item,
body.home--magazine .portal-services__item {
    flex-direction: row; align-items: center; min-height: 72px; padding-bottom: 1rem;
}
body.ly-stack .portal-services,
body.home--stack .portal-services {
    grid-template-columns: repeat(6, 1fr);
}
body.ly-stack .portal-services__item,
body.home--stack .portal-services__item {
    min-height: 96px; padding: .8rem .7rem 1.6rem;
}
body.ly-grid .portal-services,
body.home--grid .portal-services {
    gap: .5rem;
}
body.ly-grid .portal-services__item,
body.home--grid .portal-services__item {
    border-radius: 8px; min-height: 100px;
}
body.ly-editorial .portal-stats,
body.home--editorial .portal-stats {
    margin-top: 1.15rem;
}
body.ly-agency .portal-strip .line.top > div,
body.home--agency .portal-strip .line.top > div {
    letter-spacing: .02em; text-transform: uppercase; font-size: 1.05rem !important;
}
body.ly-civic .portal-services__item,
body.home--civic .portal-services__item {
    border-top-width: 4px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}
body.ly-mosaic .portal-strip,
body.home--mosaic .portal-strip {
    margin-top: .5rem;
}
body.ly-showcase .portal-services__item:hover,
body.home--showcase .portal-services__item:hover {
    transform: translateY(-4px);
}

/* ---- Refined global pro chrome (elegant, not loud) ---------------------- */
body.skin-magz nav.menu {
    border-radius: 0 0 14px 14px;
}
body.skin-magz .firstbar {
    padding-top: .85rem;
    padding-bottom: .85rem;
}
body.skin-magz #carouselExampleIndicators.carousel,
body.skin-magz #carouselExampleIndicators .carousel-item {
    background: color-mix(in srgb, var(--idds-primary) 8%, #f8fafc);
}
/* Tanggamus welcome banner — soft civic letterbox (not loud yellow) */
body.skin-magz.preset-tanggamus #carouselExampleIndicators.carousel,
body.skin-magz.preset-tanggamus #carouselExampleIndicators .carousel-item {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--hz-primary, #1e3a8a) 8%, #f7f9fc),
        color-mix(in srgb, var(--hz-accent, #b45309) 10%, #fffaf5));
}
body.skin-magz nav.menu.is-scrolled {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--idds-primary) 35%, transparent) !important;
}
body.skin-magz #carouselExampleIndicators .carousel-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}
/* Compose slider — override legacy contain letterbox rules */
body.skin-magz .home-compose__slider-frame #carouselExampleIndicators .carousel-item img {
    width: 100% !important;
    display: block !important;
}
body.skin-magz .home-compose__slider-frame .hero-carousel--fit-cover .carousel-item img,
body.skin-magz .home-compose__slider-frame .hero-carousel--fit-cover .hero-carousel__img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
}
body.skin-magz .home-compose__slider-frame .hero-carousel--fit-banner .carousel-item img,
body.skin-magz .home-compose__slider-frame .hero-carousel--fit-banner .hero-carousel__img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
}
body.skin-magz .firstbar .brand__logo {
    max-height: 64px !important;
    width: auto !important;
    max-width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    object-position: center center;
    background: transparent !important;
}
body.skin-magz nav.menu .brand img {
    max-height: 44px !important;
    width: auto !important;
    max-width: 52px !important;
    height: 44px !important;
    object-fit: contain !important;
}
body.skin-magz footer.footer .foot-logo,
body.skin-magz footer.footer .foot-logo img,
body.skin-magz footer.footer .footer-brand__logo img {
    background: transparent !important;
    filter: none !important;
}
body.skin-magz .article:not(.main-article) .inner {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.skin-magz .article:not(.main-article) .inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(16, 24, 40, .09);
    border-color: color-mix(in srgb, var(--idds-primary) 18%, transparent);
}
body.skin-magz article.featured {
    border-radius: 16px;
    overflow: hidden;
}
body.skin-magz .portal-services__item {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.skin-magz .sidebar .block,
body.skin-magz .sidebar .widget {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .04);
}
body.skin-magz .line.top > div {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Distinct content rhythm per layout family */
body.ly-wide .container-content,
body.ly-showcase .container-content { padding-top: 1.35rem; }
body.ly-editorial .container-content,
body.ly-magazine .container-content { padding-top: 1.6rem; }
body.ly-boxed .container-content { padding-top: .5rem; }
body.ly-civic .container-md,
body.ly-agency .container-md,
body.ly-mosaic .container-md { position: relative; z-index: 1; }

/* Neutralise leftover Magz lime (#15a02c) everywhere under skin-magz */
body.skin-magz [style*="#15a02c"],
body.skin-magz [style*="15a02c"] { color: var(--idds-primary) !important; }
body.skin-magz .title-col:after,
body.skin-magz aside .aside-title:after,
body.skin-magz footer.footer .block .block-title:after,
body.skin-magz .best-of-the-week h1:after {
    background-color: var(--idds-primary) !important;
}
body.skin-magz footer.footer { border-top-color: var(--idds-primary) !important; }
body.skin-magz .sidebar .block,
body.skin-magz .sidebar .widget {
    border-top-color: color-mix(in srgb, var(--idds-primary) 45%, transparent) !important;
}

/* Calmer news cards — professional depth without loud colour */
body.skin-magz .article:not(.main-article) .inner,
body.skin-magz article.article-list .inner {
    border: 1px solid rgba(16, 24, 40, .07);
    border-radius: 14px;
    background: #fff;
}
body.skin-magz .article:not(.main-article) .inner .padding,
body.skin-magz article.article-list .details {
    padding-top: .85rem;
}
body.skin-magz .padding .detail .category a,
body.skin-magz article.featured .details .category a,
body.skin-magz article.article-list .category a {
    background: color-mix(in srgb, var(--idds-primary) 9%, transparent) !important;
    color: var(--idds-primary-700, var(--idds-primary)) !important;
    border-radius: 999px;
    padding: .2rem .55rem;
}

/* Quieter page canvas + denser but airy rhythm */
html[data-bs-theme="light"] body.skin-magz section.home.top {
    background: transparent;
}
body.skin-magz .container-content {
    padding-top: 1rem;
}
body.skin-magz .line.top {
    background: transparent !important;
    height: auto !important;
}