/*
Theme Name: BlueOcean360 Magazine
Theme URI: https://blueocean360.com
Author: BlueOcean360
Author URI: https://blueocean360.com
Description: A premium magazine/news WordPress theme for BlueOcean360 — Explore, Create, Grow. Built with a trending ticker, featured stories, category grid, tabbed "What's New" section, and social stats sidebar.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blueocean360
Tags: blog, news, magazine, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

BlueOcean360 Magazine WordPress Theme
*/

/* ==========================================================================
   1. VARIABLES / BRAND SYSTEM
   ========================================================================== */
:root{
  --bo-navy: #0B2545;
  --bo-navy-dark: #081B33;
  --bo-blue: #1565C0;
  --bo-cyan: #21B7D6;
  --bo-cyan-light: #5FD4E8;
  --bo-gradient: linear-gradient(135deg, var(--bo-navy) 0%, var(--bo-blue) 55%, var(--bo-cyan) 100%);
  --bo-bg: #F5F8FB;
  --bo-white: #FFFFFF;
  --bo-text: #1B2733;
  --bo-text-muted: #6B7A8D;
  --bo-border: #E4EAF1;
  --bo-sports: #E23E57;
  --bo-travel: #7B4EE0;
  --bo-fashion: #E0457B;
  --bo-health: #17A673;
  --bo-food: #F2994A;
  --bo-tech: #1565C0;
  --bo-animals: #B5892A;
  --bo-life: #21B7D6;
  --bo-radius: 14px;
  --bo-radius-sm: 8px;
  --bo-shadow: 0 6px 24px rgba(11,37,69,0.08);
  --bo-shadow-lg: 0 14px 40px rgba(11,37,69,0.14);
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--bo-text);
  background: var(--bo-bg);
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4,h5{font-family:var(--font-head); margin:0 0 .5em; font-weight:600; color:var(--bo-navy);}
.container{max-width:1240px; margin:0 auto; padding:0 24px;}
.screen-reader-text{position:absolute; left:-9999px;}
button{cursor:pointer; font-family:var(--font-body);}

/* ==========================================================================
   3. TOP TRENDING BAR
   ========================================================================== */
.bo-trending-bar{
  background:var(--bo-navy-dark);
  color:#fff;
  font-size:13px;
}
.bo-trending-bar .container{
  display:flex; align-items:center; gap:16px; padding:8px 24px;
}
.bo-trending-tag{
  background:var(--bo-cyan);
  color:var(--bo-navy-dark);
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  letter-spacing:.5px;
  white-space:nowrap;
}
.bo-trending-text{flex:1; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bo-trending-meta{display:flex; align-items:center; gap:18px; opacity:.85;}
.bo-trending-meta .bo-social{display:flex; gap:10px;}
.bo-trending-meta .bo-social a{opacity:.8; transition:opacity .2s;}
.bo-trending-meta .bo-social a:hover{opacity:1; color:var(--bo-cyan-light);}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.bo-header{
  background:#fff;
  border-bottom:1px solid var(--bo-border);
  position:sticky; top:0; z-index:100;
}
.bo-header .container{
  display:flex; align-items:center; justify-content:space-between; padding:16px 24px;
}
.bo-logo img{height:44px; width:auto;}
.bo-logo{display:flex; align-items:center; gap:10px; font-weight:700;}

.bo-main-nav ul{display:flex; align-items:center; gap:34px;}
.bo-main-nav a{
  font-weight:600; font-size:15px; color:var(--bo-navy); position:relative; padding:6px 0;
}
.bo-main-nav .current-menu-item > a,
.bo-main-nav a:hover{color:var(--bo-cyan);}
.bo-main-nav .current-menu-item > a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:var(--bo-cyan);
}
.bo-main-nav li.menu-item-has-children > a::after{
  content:"▾"; font-size:11px; margin-left:5px; opacity:.7;
}
.bo-main-nav ul ul{
  position:absolute; background:#fff; box-shadow:var(--bo-shadow-lg); border-radius:var(--bo-radius-sm);
  padding:10px 0; min-width:200px; flex-direction:column; align-items:stretch; gap:0;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s;
}
.bo-main-nav li:hover > ul{opacity:1; visibility:visible; transform:translateY(0);}
.bo-main-nav ul ul a{display:block; padding:9px 18px; font-weight:500;}
.bo-main-nav ul ul a:hover{background:var(--bo-bg);}

.bo-header-actions{display:flex; align-items:center; gap:20px;}
.bo-icon-btn{
  width:38px; height:38px; border-radius:50%; background:var(--bo-bg);
  display:flex; align-items:center; justify-content:center; border:none; color:var(--bo-navy);
}
.bo-menu-toggle{display:none; background:none; border:none; font-size:22px; color:var(--bo-navy);}

/* Category strip (top row of circular icons) */
.bo-cat-strip{padding:26px 0 8px;}
.bo-cat-strip ul{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.bo-cat-card{display:flex; align-items:center; gap:14px; padding:6px;}
.bo-cat-card img{width:58px; height:58px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.bo-cat-label{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:3px;}
.bo-cat-card h4{font-size:14px; margin:0 0 4px; line-height:1.3;}
.bo-cat-meta{font-size:12px; color:var(--bo-text-muted);}

/* ==========================================================================
   5. HERO / FEATURED SECTION
   ========================================================================== */
.bo-hero-section{padding:24px 0;}
.bo-hero-grid{display:grid; grid-template-columns:1.7fr 1fr; gap:20px;}
.bo-hero-feature{
  position:relative; border-radius:var(--bo-radius); overflow:hidden; min-height:460px;
  display:flex; align-items:flex-end; background-size:cover; background-position:center;
  box-shadow:var(--bo-shadow);
}
.bo-hero-feature::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,27,51,.88) 10%, rgba(8,27,51,.15) 60%, rgba(8,27,51,0) 100%);
}
.bo-hero-feature .bo-card-content{position:relative; z-index:2; padding:32px; color:#fff;}
.bo-hero-feature h2{color:#fff; font-size:32px; line-height:1.2; margin-bottom:14px;}
.bo-hero-feature p{opacity:.85; margin-bottom:16px; max-width:480px;}
.bo-dark-toggle{
  position:absolute; top:16px; right:16px; z-index:3;
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
  border:none; color:#fff; display:flex; align-items:center; justify-content:center;
}

.bo-side-list{display:flex; flex-direction:column; gap:16px;}
.bo-side-card{
  display:flex; gap:14px; background:#fff; border-radius:var(--bo-radius-sm);
  padding:10px; box-shadow:var(--bo-shadow);
}
.bo-side-card img{width:84px; height:84px; border-radius:var(--bo-radius-sm); object-fit:cover; flex-shrink:0;}
.bo-side-card .bo-card-content{padding:2px 0;}
.bo-side-card h4{font-size:15px; line-height:1.35; margin-bottom:6px;}

.bo-badge{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; margin-bottom:10px; color:#fff;
}
.bo-cat-sports{background:var(--bo-sports);}
.bo-cat-travel{background:var(--bo-travel);}
.bo-cat-fashion{background:var(--bo-fashion);}
.bo-cat-health{background:var(--bo-health);}
.bo-cat-food{background:var(--bo-food);}
.bo-cat-technology{background:var(--bo-tech);}
.bo-cat-animals{background:var(--bo-animals);}
.bo-cat-life{background:var(--bo-life);}

.bo-meta{font-size:12px; color:var(--bo-text-muted); display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.bo-meta.on-dark{color:rgba(255,255,255,.75);}

/* ==========================================================================
   6. AD BANNER
   ========================================================================== */
.bo-ad-banner{
  margin:28px 0; border-radius:var(--bo-radius); overflow:hidden; position:relative;
  background:var(--bo-gradient); padding:36px 44px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.bo-ad-banner h3{color:#fff; font-size:28px; margin-bottom:4px;}
.bo-ad-pill{
  display:inline-flex; gap:14px; font-size:11px; font-weight:700; background:rgba(255,255,255,.15);
  padding:6px 14px; border-radius:20px; margin-bottom:10px;
}
.bo-ad-price{font-size:14px; opacity:.9;}
.bo-ad-btn{
  background:#fff; color:var(--bo-navy); font-weight:700; padding:14px 30px; border-radius:var(--bo-radius-sm);
  border:none; white-space:nowrap; font-size:14px;
}

/* ==========================================================================
   7. SECTION HEADINGS
   ========================================================================== */
.bo-section{padding:34px 0;}
.bo-section-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;
}
.bo-section-head h2{font-size:22px; display:flex; align-items:center; gap:8px; margin:0;}
.bo-section-head h2::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--bo-cyan);}
.bo-view-all{font-size:13px; font-weight:700; color:var(--bo-cyan); display:flex; align-items:center; gap:4px;}

/* Top stories grid */
.bo-story-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.bo-story-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--bo-radius); margin-bottom:14px;
}
.bo-story-card h3{font-size:16px; line-height:1.4; margin-bottom:10px;}

/* What's new tabs */
.bo-whats-new-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:22px;}
.bo-featured-tall{
  position:relative; border-radius:var(--bo-radius); overflow:hidden; min-height:340px;
  background-size:cover; background-position:center; display:flex; align-items:flex-end;
  box-shadow:var(--bo-shadow);
}
.bo-featured-tall::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,27,51,.9), rgba(8,27,51,0) 65%);}
.bo-featured-tall .bo-card-content{position:relative; z-index:2; padding:26px; color:#fff;}
.bo-featured-tall h3{color:#fff; font-size:22px;}
.bo-tag-featured{
  position:absolute; top:16px; left:16px; z-index:3; background:var(--bo-cyan); color:var(--bo-navy-dark);
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:20px; text-transform:uppercase;
}

.bo-tabs{display:flex; gap:6px; background:var(--bo-bg); padding:5px; border-radius:30px; margin-bottom:18px; width:fit-content;}
.bo-tab{padding:8px 20px; border-radius:24px; font-size:13px; font-weight:600; border:none; background:none; color:var(--bo-text-muted);}
.bo-tab.active{background:var(--bo-cyan); color:#fff;}

.bo-ranked-list{display:flex; flex-direction:column; gap:16px;}
.bo-ranked-item{display:flex; gap:14px; align-items:center;}
.bo-ranked-num{
  width:26px; height:26px; border-radius:50%; background:var(--bo-navy); color:#fff; font-size:12px;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.bo-ranked-item img{width:60px; height:60px; border-radius:var(--bo-radius-sm); object-fit:cover; flex-shrink:0;}
.bo-ranked-item h4{font-size:14px; margin:0 0 4px; line-height:1.35;}

.bo-social-stats{display:flex; flex-direction:column; gap:10px;}
.bo-social-stat{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--bo-radius-sm);
  color:#fff; font-weight:700;
}
.bo-social-stat .num{font-size:18px; display:block;}
.bo-social-stat .label{font-size:11px; opacity:.85; font-weight:500;}
.bo-social-fb{background:#3B5998;}
.bo-social-tw{background:#1DA1F2;}
.bo-social-ig{background:linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);}
.bo-social-yt{background:#FF0000;}
.bo-social-rss{background:var(--bo-food);}

/* ==========================================================================
   8. NEWSLETTER
   ========================================================================== */
.bo-newsletter{
  background:#fff; border:1px solid var(--bo-border); border-radius:var(--bo-radius);
  padding:26px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin:36px 0;
}
.bo-newsletter-left{display:flex; align-items:center; gap:18px;}
.bo-newsletter-icon{
  width:52px; height:52px; border-radius:14px; background:var(--bo-gradient);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; flex-shrink:0;
}
.bo-newsletter h4{margin-bottom:2px;}
.bo-newsletter p{margin:0; color:var(--bo-text-muted); font-size:14px;}
.bo-newsletter-form{display:flex; gap:10px;}
.bo-newsletter-form input{
  padding:13px 18px; border-radius:var(--bo-radius-sm); border:1px solid var(--bo-border); min-width:260px;
}
.bo-newsletter-form button{
  background:var(--bo-cyan); color:#fff; border:none; padding:13px 26px; border-radius:var(--bo-radius-sm); font-weight:700;
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.bo-footer{background:var(--bo-navy-dark); color:rgba(255,255,255,.75); padding:56px 0 0;}
.bo-footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:30px; padding-bottom:40px;}
.bo-footer-logo{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.bo-footer-logo img{height:38px;}
.bo-footer p{font-size:14px; line-height:1.7;}
.bo-footer h5{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:18px;}
.bo-footer ul li{margin-bottom:10px; font-size:14px;}
.bo-footer ul a:hover{color:var(--bo-cyan-light);}
.bo-app-badges{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.bo-app-badges a{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px;
  padding:9px 14px; font-size:12px; display:flex; align-items:center; gap:8px;
}
.bo-footer-social{display:flex; gap:10px; margin-top:14px;}
.bo-footer-social a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.bo-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:18px 0; font-size:13px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bo-footer-bottom ul{display:flex; gap:20px;}

/* ==========================================================================
   10. SIDEBAR / WIDGETS
   ========================================================================== */
.bo-content-layout{display:grid; grid-template-columns:2.1fr 1fr; gap:36px; align-items:start;}
.widget{background:#fff; border-radius:var(--bo-radius); padding:22px; box-shadow:var(--bo-shadow); margin-bottom:24px;}
.widget h3{font-size:16px; border-bottom:2px solid var(--bo-bg); padding-bottom:12px; margin-bottom:16px;}
.widget ul li{padding:10px 0; border-bottom:1px solid var(--bo-border); font-size:14px;}
.widget ul li:last-child{border-bottom:none;}
.tagcloud a{
  display:inline-block; margin:0 6px 10px 0; padding:6px 14px; background:var(--bo-bg);
  border-radius:20px; font-size:12px; font-weight:600;
}

/* ==========================================================================
   11. SINGLE POST / PAGE
   ========================================================================== */
.bo-single-header{padding:36px 0 20px;}
.bo-single-header h1{font-size:34px; line-height:1.25; max-width:820px;}
.bo-single-thumb{border-radius:var(--bo-radius); overflow:hidden; margin-bottom:26px; box-shadow:var(--bo-shadow);}
.bo-entry-content{font-size:17px; line-height:1.8;}
.bo-entry-content p{margin-bottom:1.3em;}
.bo-entry-content h2{font-size:26px; margin-top:1.4em;}
.bo-entry-content h3{font-size:20px; margin-top:1.2em;}
.bo-entry-content blockquote{
  border-left:4px solid var(--bo-cyan); padding:6px 22px; margin:24px 0; font-style:italic; color:var(--bo-text-muted);
}
.bo-entry-content img{border-radius:var(--bo-radius-sm); margin:20px 0;}
.bo-author-box{
  display:flex; gap:16px; align-items:center; background:#fff; border-radius:var(--bo-radius);
  padding:20px; margin:32px 0; box-shadow:var(--bo-shadow);
}
.bo-author-box img{width:60px; height:60px; border-radius:50%;}
.bo-tags{margin:24px 0;}
.bo-tags a{display:inline-block; margin:0 8px 8px 0; padding:6px 16px; background:var(--bo-bg); border-radius:20px; font-size:13px; font-weight:600;}

/* ==========================================================================
   12. ARCHIVE / CATEGORY
   ========================================================================== */
.bo-archive-header{
  background:var(--bo-gradient); color:#fff; padding:50px 0; margin-bottom:34px; text-align:center;
}
.bo-archive-header h1{color:#fff; font-size:30px; margin-bottom:8px;}
.bo-archive-header p{opacity:.85; max-width:560px; margin:0 auto;}
.bo-archive-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.bo-archive-card{background:#fff; border-radius:var(--bo-radius); overflow:hidden; box-shadow:var(--bo-shadow);}
.bo-archive-card img{aspect-ratio:16/10; object-fit:cover;}
.bo-archive-card .bo-card-content{padding:18px;}
.bo-pagination{display:flex; justify-content:center; gap:8px; margin:36px 0;}
.bo-pagination a, .bo-pagination span{
  width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:var(--bo-shadow); font-size:13px; font-weight:600;
}
.bo-pagination .current{background:var(--bo-cyan); color:#fff;}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .bo-hero-grid, .bo-whats-new-grid{grid-template-columns:1fr;}
  .bo-story-grid{grid-template-columns:repeat(2,1fr);}
  .bo-content-layout{grid-template-columns:1fr;}
  .bo-footer-grid{grid-template-columns:repeat(2,1fr);}
  .bo-cat-strip ul{grid-template-columns:repeat(2,1fr);}
  .bo-archive-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 720px){
  .bo-main-nav{
    position:fixed; top:0; left:-100%; width:82%; height:100vh; background:#fff; z-index:200;
    transition:left .3s; padding:80px 24px; box-shadow:var(--bo-shadow-lg);
  }
  .bo-main-nav.is-open{left:0;}
  .bo-main-nav ul{flex-direction:column; align-items:flex-start; gap:0;}
  .bo-main-nav ul li{width:100%;}
  .bo-main-nav ul ul{position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none;}
  .bo-main-nav li.menu-item-has-children.is-open > ul{display:flex;}
  .bo-menu-toggle{display:block;}
  .bo-trending-bar .container{font-size:11px;}
  .bo-trending-meta{display:none;}
  .bo-story-grid{grid-template-columns:1fr 1fr;}
  .bo-ad-banner{flex-direction:column; text-align:center;}
  .bo-newsletter{flex-direction:column; text-align:center;}
  .bo-newsletter-form{width:100%;}
  .bo-newsletter-form input{flex:1; min-width:0;}
  .bo-archive-grid{grid-template-columns:1fr;}
  .bo-footer-grid{grid-template-columns:1fr 1fr;}
}