/* Extracted from application/views/header.php on 2026-11-02 so browsers can cache it.
   CodeIgniter sends HTML as no-store, so inline CSS re-downloaded on every
   page view. Cascade order is preserved: the <link> sits where the <style>
   block(s) were. */
/* ============================================================
   TIRCONAILL TRIBUNE — FRONTEND HEADER
   ============================================================ */
:root {
    --hdr-blue  : #0171BB;
    --hdr-dark  : #071e38;
    --hdr-green : #00CD95;
}

/* ---- Global resets inside header ---- */
#site-header *, #site-header *:before, #site-header *:after { box-sizing: border-box; }
#site-header a { text-decoration: none; }
#site-header ul { list-style: none; margin: 0; padding: 0; }

/* ---- Header utility classes ---- */
.hdr-box,
.hdr-box:before,
.hdr-box:after {
    box-sizing: border-box;
}
.hdr-theme-blue {
    background: #0171bb;
    color: #ffffff;
}
.hdr-theme-blue a,
.hdr-theme-blue span,
.hdr-theme-blue i,
.hdr-theme-blue p,
.hdr-theme-blue strong,
.hdr-theme-blue small {
    color: inherit;
}

/* ============================================================
   BLUE TOP BAR  —  Logo  |  Contact + Auth
   ============================================================ */
.hdr-topbar {
    background: var(--hdr-blue);
    border-bottom: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 2px 16px rgba(1,113,187,.18);
    padding: 14px 0;
    position: relative;
    z-index: 1200;
}
.hdr-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Logo */
.hdr-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.hdr-logo img {
    height: 80px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}
.hdr-logo img:hover {
    transform: scale(1.03);
}

/* Right cluster: contacts + auth */
.hdr-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Contact chips */
.hdr-contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.55);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2px;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.hdr-contact-chip i { font-size: 12px; color: #ffffff; }
.hdr-contact-chip:hover {
    background: #ffffff;
    color: var(--hdr-blue);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(7,30,56,.18);
}
.hdr-contact-chip:hover i {
    color: var(--hdr-blue);
}

/* Divider between contacts and auth */
.hdr-topbar-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.28);
    flex-shrink: 0;
}

/* Auth buttons */
.hdr-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.hdr-auth-btn i {
    color: inherit;
}
.hdr-auth-btn:hover {
    transform: translateY(-2px);
    color: #ffffff !important;
}

.hdr-auth-login {
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.55);
    color: #ffffff !important;
}
.hdr-auth-login:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: #ffffff;
    box-shadow: 0 6px 18px rgba(7,30,56,.18);
}

.hdr-auth-signup {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.55);
    color: #fff !important;
    box-shadow: none;
}
.hdr-auth-signup:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: #ffffff;
    box-shadow: 0 6px 18px rgba(7,30,56,.18) !important;
}

/* User greeting (logged in) */
.hdr-user-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hdr-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--hdr-blue);
    border: 2px solid #b8d9f5;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; font-weight: 700;
    flex-shrink: 0;
}
.hdr-user-name {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
}
.hdr-auth-logout {
    background: #fff1f1;
    border: 1.5px solid #fbc5c5;
    color: #d53030 !important;
}
.hdr-auth-logout:hover { background: #fde0e0 !important; box-shadow: 0 4px 14px rgba(213,48,48,.15); }

/* Hamburger (mobile — inside topbar) */
.hdr-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px; height: 42px;
    border: 1.5px solid #cde3f7;
    background: #f0f7ff;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
}
.hdr-burger:hover { background: #daeeff; border-color: #b8d9f5; }
.hdr-burger span {
    display: block;
    width: 20px; height: 2px;
    border-radius: 999px;
    background: var(--hdr-blue);
    transition: transform .3s cubic-bezier(.22,.68,0,1.3), opacity .2s, width .3s;
}
.hdr-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.hdr-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   WHITE NAV BAR  —  Links | Subscribe CTA
   ============================================================ */
.hdr-navbar {
    background: #fff;
    border-bottom: 1px solid rgba(1,113,187,.10);
    box-shadow: 0 3px 18px rgba(7,30,56,.07);
    position: sticky;
    top: 0;
    z-index: 1100;
    transition: box-shadow .3s ease, background .3s ease, backdrop-filter .3s ease;
}
.hdr-navbar.hdr-navbar--scrolled {
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 28px rgba(7,30,56,.12);
}
.hdr-navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 54px;
}
.hdr-nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Nav links */
.hdr-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.hdr-nav::-webkit-scrollbar { display: none; }
.hdr-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 8px;
    color: #2c3e55;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: color .22s, background .22s;
    white-space: nowrap;
}
.hdr-nav a:after {
    content: '';
    position: absolute;
    bottom: 1px; left: 13px; right: 13px;
    height: 2.5px;
    border-radius: 999px;
    background: var(--hdr-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.22,.68,0,1.3);
}
.hdr-nav a:hover { color: var(--hdr-blue); background: rgba(1,113,187,.06); }
.hdr-nav a:hover:after,
.hdr-nav a.hdr-nav--active:after { transform: scaleX(1); }
.hdr-nav a.hdr-nav--active { color: var(--hdr-blue); }

/* Subscribe CTA */
.hdr-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--hdr-dark) 0%, var(--hdr-blue) 100%);
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 5px 18px rgba(1,113,187,.32);
    overflow: hidden;
    position: relative;
    transition: transform .22s, box-shadow .22s;
}
.hdr-cta:before {
    content: '';
    position: absolute;
    top: 0; left: -70%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
}
.hdr-cta:hover:before { animation: hdr-shine .5s ease forwards; }
@keyframes hdr-shine { to { left: 120%; } }
.hdr-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 26px rgba(1,113,187,.44); color: #fff !important; }

/* ============================================================
   MOBILE DRAWER  (≤ 991px)
   ============================================================ */
.hdr-overlay {
    position: fixed; inset: 0;
    background: rgba(7,30,56,.48);
    backdrop-filter: blur(4px);
    z-index: 1299;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
.hdr-overlay.is-open { opacity: 1; pointer-events: auto; }

.hdr-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 300px; max-width: 88vw;
    background: #fff;
    z-index: 1300;
    display: flex; flex-direction: column;
    transform: translateX(110%);
    transition: transform .34s cubic-bezier(.22,.68,0,1.15);
    box-shadow: -6px 0 40px rgba(7,30,56,.18);
    overflow-y: auto;
}
.hdr-drawer.is-open { transform: translateX(0); }

.hdr-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e4edf6;
    flex-shrink: 0;
}
.hdr-drawer-head img { height: 48px; width: auto; object-fit: contain; }
.hdr-drawer-close {
    width: 36px; height: 36px;
    border: 1.5px solid #cde3f7;
    background: #f0f7ff;
    border-radius: 9px; cursor: pointer;
    color: var(--hdr-dark); font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s;
}
.hdr-drawer-close:hover { background: #fde0e0; border-color: #fbc5c5; color: #d53030; }

/* Drawer user block */
.hdr-drawer-user {
    margin: 16px 18px 6px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(1,113,187,.07), rgba(0,205,149,.07));
    border: 1px solid rgba(1,113,187,.12);
}
.hdr-drawer-user .hdr-user-avatar {
    width: 36px; height: 36px; font-size: 15px;
    background: linear-gradient(135deg, var(--hdr-blue), var(--hdr-green));
    border: none;
}
.hdr-drawer-user span { font-size: 14px; font-weight: 700; color: var(--hdr-dark); }

/* Drawer nav */
.hdr-drawer-nav { padding: 10px 14px; flex: 1; }
.hdr-drawer-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    border-radius: 11px;
    color: #2c3e55; font-size: 14px; font-weight: 600;
    margin-bottom: 3px;
    transition: background .2s, color .2s, transform .2s;
}
.hdr-drawer-nav a i { width: 20px; text-align: center; color: var(--hdr-blue); font-size: 14px; }
.hdr-drawer-nav a:hover,
.hdr-drawer-nav a.hdr-nav--active {
    background: rgba(1,113,187,.08); color: var(--hdr-blue); transform: translateX(3px);
}

/* Drawer contacts */
.hdr-drawer-contacts {
    padding: 4px 20px 14px;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid #edf3f9; margin-top: 4px;
}
.hdr-drawer-contacts a {
    display: flex; align-items: center; gap: 9px;
    color: #5a7089; font-size: 13px; font-weight: 500;
    padding: 6px 0;
    transition: color .2s;
}
.hdr-drawer-contacts a i { color: var(--hdr-blue); width: 16px; text-align: center; }
.hdr-drawer-contacts a:hover { color: var(--hdr-blue); }

/* Drawer footer */
.hdr-drawer-foot {
    padding: 14px 18px 20px;
    border-top: 1px solid #edf3f9;
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 9px;
}
.hdr-drawer-foot a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 12px;
    font-size: 13px; font-weight: 700;
    transition: transform .2s, box-shadow .2s;
}
.hdr-drawer-foot a:hover { transform: translateY(-2px); }
.hdr-drw-subscribe { background: linear-gradient(135deg,var(--hdr-dark),var(--hdr-blue)); color:#fff!important; box-shadow:0 5px 18px rgba(1,113,187,.28); }
.hdr-drw-login     { background: rgba(1,113,187,.07); color:var(--hdr-blue)!important; border:1px solid rgba(1,113,187,.18); }
.hdr-drw-signup    { background: var(--hdr-green); color:#fff!important; box-shadow:0 5px 16px rgba(0,205,149,.28); }
.hdr-drw-logout    { background: rgba(213,48,48,.07); color:#d53030!important; border:1px solid rgba(213,48,48,.18); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .hdr-nav, .hdr-cta { display: none; }
    .hdr-nav-actions { margin-left: 0; gap: 10px; }
    .hdr-burger { display: flex; }
    .hdr-topbar-divider { display: none; }
}
@media (max-width: 767px) {
    .hdr-contact-chip { display: none; }
    .hdr-auth-btn     { display: none; }
    .hdr-user-wrap    { display: none; }
    .hdr-topbar { padding: 14px 0; }
    .hdr-logo img { height: 60px; }
}
@media (min-width: 992px) {
    .hdr-burger  { display: none !important; }
    .hdr-overlay, .hdr-drawer { display: none !important; }
}

/* Entrance animation */
@keyframes hdr-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.hdr-topbar  { animation: hdr-slide-down .4s cubic-bezier(.22,.68,0,1.2) both; }
.hdr-navbar  { animation: hdr-slide-down .4s cubic-bezier(.22,.68,0,1.2) .08s both; }

/* My Issues live dot */
.hdr-nav a.hdr-nav--myissues { position: relative; }
.hdr-nav a.hdr-nav--myissues:before {
    content: '';
    position: absolute;
    top: 5px; right: 7px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hdr-green);
    animation: hdr-dot 2s ease infinite;
}
@keyframes hdr-dot {
    0%,100% { transform: scale(1); opacity:1; }
    50%      { transform: scale(1.7); opacity:.5; }
}

/* ============================================
   SEARCH BUTTON + MODAL
   ============================================ */
.hdr-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #f3f8fd;
    border: 1px solid #dbe7f2;
    color: #1777b7;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
    margin-left: 8px;
    padding: 0;
    flex-shrink: 0;
}
.hdr-search-btn:hover {
    background: #1777b7;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Fullscreen search overlay */
.site-search {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10,30,56,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0 20px;
    overflow-y: auto;
}
.site-search.is-open { display: block; animation: ss-fade .2s ease; }
@keyframes ss-fade { from { opacity: 0; } to { opacity: 1; } }

.site-search-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 80px 0 60px;
    position: relative;
}
.site-search-close {
    position: fixed;
    top: 22px; right: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .2s;
    padding: 0;
    font-family: Arial, sans-serif;
    z-index: 2;
}
.site-search-close:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }

.site-search-box {
    position: relative;
    margin-bottom: 30px;
    padding: 18px 18px 16px;
    border-radius: 28px;
    border: 1px solid rgba(125,190,255,.22);
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
        radial-gradient(circle at top left, rgba(57,150,232,.22), transparent 42%),
        rgba(18,42,72,.84);
    box-shadow:
        0 28px 65px rgba(1,10,27,.34),
        inset 0 1px 0 rgba(255,255,255,.10);
    overflow: hidden;
}
.site-search-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 35%, rgba(23,119,183,.12) 100%);
    pointer-events: none;
}
.site-search-box-top,
.site-search-helper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.site-search-box-top {
    margin-bottom: 14px;
}
.site-search-label {
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.site-search-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
}
.site-search-shortcut span {
    min-width: 34px;
    padding: 6px 9px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.site-search-field {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.site-search-field:focus-within {
    border-color: rgba(82,183,255,.70);
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        0 0 0 4px rgba(23,119,183,.16),
        0 18px 35px rgba(4,18,40,.26),
        inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-1px);
}
.site-search-icon {
    position: absolute;
    left: 24px; top: 50%;
    transform: translateY(-50%);
    color: rgba(157,219,255,.78);
    font-size: 22px;
    pointer-events: none;
    text-shadow: 0 0 18px rgba(85,185,255,.28);
}
.site-search-box input {
    width: 100%;
    height: 72px;
    padding: 0 68px 0 64px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    position: relative;
    z-index: 1;
}
.site-search-box input::placeholder { color: rgba(255,255,255,.46); font-weight: 500; }
.site-search-box input:focus {
    background: transparent;
}
.site-search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, background .2s, color .2s, transform .2s;
    z-index: 1;
}
.site-search-field.has-value .site-search-clear {
    opacity: 1;
    pointer-events: auto;
}
.site-search-clear:hover {
    background: rgba(255,255,255,.14);
    color: #ffffff;
    transform: translateY(-50%) scale(1.04);
}
.site-search-clear:focus {
    outline: none;
    background: rgba(255,255,255,.16);
    color: #ffffff;
}
.site-search-helper {
    margin-top: 14px;
}
.site-search-hint,
.site-search-esc {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}
.site-search-esc {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.72);
}

/* Results */
.site-search-results { min-height: 60px; }
.ss-loading {
    text-align: center;
    padding: 30px 0;
    color: rgba(255,255,255,.5);
    font-size: 14px;
}
.ss-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,.50);
}
.ss-empty i { font-size: 36px; display: block; margin-bottom: 12px; color: rgba(255,255,255,.25); }
.ss-empty h4 { margin: 0 0 6px; color: rgba(255,255,255,.70); font-size: 18px; font-weight: 700; }
.ss-empty p { margin: 0; font-size: 13px; }

.ss-count {
    color: rgba(255,255,255,.50);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}
.ss-count b { color: #ffffff; }

.ss-item {
    display: flex;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 10px;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: background .2s, border-color .2s, transform .2s;
}
.ss-item:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(23,119,183,.50);
    transform: translateX(4px);
    text-decoration: none !important;
    color: #ffffff !important;
}
.ss-item-img {
    width: 80px; height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
}
.ss-item-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ss-item-body { flex: 1; min-width: 0; }
.ss-item-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-item:hover .ss-item-title { color: #9cdcff; }
.ss-item-excerpt {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-item-meta {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.35);
}
.ss-item-meta i { margin-right: 4px; color: #1777b7; }

@media (max-width: 767px) {
    .site-search-inner { padding: 60px 0 40px; }
    .site-search-box {
        padding: 14px;
        border-radius: 22px;
    }
    .site-search-box-top,
    .site-search-helper {
        flex-direction: column;
        align-items: flex-start;
    }
    .site-search-shortcut {
        display: none;
    }
    .site-search-box input {
        height: 58px;
        padding: 0 56px 0 56px;
        font-size: 17px;
    }
    .site-search-icon {
        left: 20px;
        font-size: 19px;
    }
    .site-search-clear {
        right: 12px;
        width: 34px;
        height: 34px;
    }
    .ss-item-img { width: 60px; height: 45px; }
}