/* ==========================================================================
   Handy Hints — viral-magazine layout (mirrors tips-and-tricks.co structure)
   ========================================================================== */

:root {
  --blue:        #2e5b9f;
  --nav-blue:    #3f63b3;
  --nav-blue-dk: #2f4f9c;
  --logo-blue:   #2f6fb0;
  --orange:      #ea5713;   /* footer + search button */
  --orange-2:    #f26522;
  --next-blue:   #5b7bc4;
  --text:        #333;
  --muted:       #888;
  --line:        #e3e3e3;
  --bg:          #ededed;
  --card:        #ffffff;
  --ad-label:    #9aa0a6;
  --radius:      3px;
  --maxw:        1180px;
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family:var(--font); color:var(--text); background:var(--bg); font-size:16px; line-height:1.6; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width:100%; height:auto; display:block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; gap:24px; padding:12px 16px; }
.logo { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo .bulb { font-size:36px; line-height:1; color:var(--orange-2); }
.logo .logo-text { line-height:1.05; }
.logo .logo-name { font-size:28px; font-weight:800; letter-spacing:1px; color:var(--logo-blue); }
.logo .logo-tag { font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--orange-2); text-transform:uppercase; }
.search { flex:1 1 auto; display:flex; max-width:640px; }
.search input { flex:1; border:1px solid #ccc; border-right:none; padding:11px 16px; font-size:14px; background:#f3f3f3; outline:none; border-radius:var(--radius) 0 0 var(--radius); }
.search button { border:none; background:var(--orange-2); color:#fff; padding:0 18px; font-size:16px; cursor:pointer; border-radius:0 var(--radius) var(--radius) 0; }
.socials { display:flex; gap:8px; flex:0 0 auto; }
.socials a { width:38px; height:38px; display:grid; place-items:center; color:#fff; border-radius:var(--radius); font-weight:700; }
.socials .pin { background:#e60023; }
.socials .fb { background:#3b5998; }

/* ---------- Category nav ---------- */
.cat-nav { background:var(--nav-blue); }
.cat-nav .nav-wrap { max-width:var(--maxw); margin:0 auto; padding:0 8px; display:flex; align-items:center; }
.cat-nav ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; flex:1; }
.cat-nav li a { display:block; color:#fff; padding:13px 14px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.cat-nav li a:hover, .cat-nav li a.active { background:var(--nav-blue-dk); text-decoration:none; }
.cat-nav li a .ico { margin-right:6px; opacity:.9; }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:22px; padding:12px 14px; cursor:pointer; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size:13px; color:var(--muted); padding:12px 0 0; }
.breadcrumb a { color:var(--muted); }
.breadcrumb span { margin:0 6px; }

/* ---------- Shell ---------- */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px; padding:18px 0 40px; }
.full { background:#fff; padding:24px; margin-top:14px; border-radius:2px; }

/* ---------- Homepage: featured + grid ---------- */
.feature-card { display:block; border:1px solid var(--line); background:#fff; margin-bottom:24px; }
.feature-card .ph { aspect-ratio:16/9; overflow:hidden; background:#dde6ea; }
.feature-card .ph img { width:100%; height:100%; object-fit:cover; }
.feature-card .cap { padding:16px 18px 20px; }
.feature-card h2 { margin:0 0 8px; font-size:24px; line-height:1.25; color:var(--blue); font-weight:800; }
.feature-card:hover h2 { text-decoration:underline; }

.post-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.post-card { border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; }
.post-card .ph { aspect-ratio:4/3; overflow:hidden; background:#dde6ea; }
.post-card .ph img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.post-card:hover .ph img { transform:scale(1.04); }
.post-card .cap { padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card h3 { margin:0; font-size:17px; line-height:1.3; color:var(--blue); font-weight:700; }
.post-card:hover h3 { text-decoration:underline; }
.tag { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:8px; border-top:1px solid var(--line); }
.tag .ico { color:var(--muted); }

.load-more { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; text-align:center; border:1px solid var(--line); background:#fff; padding:16px; color:var(--blue); font-weight:600; margin-top:24px; cursor:pointer; font-size:15px; }
.load-more:hover { background:#f7f9fc; text-decoration:none; }

/* ---------- Homepage sidebar ---------- */
.sidebar { min-width:0; }
.side-title { font-size:15px; text-transform:uppercase; letter-spacing:.5px; color:#333; border-bottom:2px solid #d9d9d9; padding-bottom:8px; margin:0 0 16px; font-weight:700; }
.side-section { margin-bottom:34px; }
.mostread-card { display:block; margin-bottom:20px; }
.mostread-card .ph { aspect-ratio:16/9; overflow:hidden; background:#dde6ea; }
.mostread-card .ph img { width:100%; height:100%; object-fit:cover; }
.mostread-card .duo { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.mostread-card .tt { margin:8px 0 0; font-size:14px; font-weight:700; color:var(--blue); line-height:1.3; }
.mostread-card:hover .tt { text-decoration:underline; }
.recent-list { list-style:none; margin:0; padding:0; }
.recent-list li { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.recent-list .thumb { flex:0 0 64px; height:54px; border-radius:2px; overflow:hidden; background:#dde6ea; }
.recent-list .thumb img { width:100%; height:100%; object-fit:cover; }
.recent-list a { font-size:13px; line-height:1.35; color:#333; }
.recent-list a:hover { color:var(--blue); }
.fb-widget { border:1px solid var(--line); padding:14px; }
.fb-widget .top { display:flex; align-items:center; gap:10px; }
.fb-widget .av { width:44px; height:44px; border-radius:50%; background:var(--logo-blue); color:#fff; display:grid; place-items:center; font-weight:800; }
.fb-widget .nm { font-weight:700; font-size:14px; }
.fb-widget .fol { font-size:12px; color:var(--muted); }
.fb-widget .acts { display:flex; gap:8px; margin-top:12px; }
.fb-widget .acts a { flex:1; text-align:center; background:#e9eef6; color:#365899; font-size:12px; font-weight:700; padding:7px; border-radius:3px; }

/* ---------- Article ---------- */
.article h1 { color:var(--blue); font-size:32px; line-height:1.25; font-weight:800; margin:6px 0 14px; }
.article .byline { font-size:13px; color:var(--muted); margin:0 0 18px; }
.article p { margin:0 0 20px; font-size:17px; }
.article h2.sub { color:var(--blue); font-size:22px; margin:26px 0 12px; }
.hero { width:100%; border-radius:2px; margin:0 0 22px; background:#dfe6e2; aspect-ratio:16/10; object-fit:cover; }
.section-head { display:flex; align-items:center; gap:12px; margin:6px 0 16px; }
.section-head h2 { font-size:22px; color:var(--blue); margin:0; white-space:nowrap; }
.section-head::after { content:""; flex:1; height:2px; background:var(--line); }
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

/* ---------- Ads ---------- */
.ad { margin:26px 0; text-align:center; }
.ad-unit { display:block; margin:0 auto; }
.ad-label { font-size:11px; letter-spacing:1px; color:var(--ad-label); text-transform:uppercase; margin-bottom:8px; }
.ad-box { border:1px dashed var(--line); background:#fafafa; min-height:110px; display:grid; place-items:center; color:var(--muted); font-size:13px; }
.ad-box.tall { min-height:600px; } .ad-box.banner { min-height:90px; } .ad-box.rect { min-height:250px; }
.ad iframe { border:0; width:100%; display:block; }
.native-ad { border:1px solid var(--line); padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; background:#fff; }
.native-ad .na-text small { color:var(--muted); display:block; font-size:12px; }
.native-ad .na-text strong { font-size:22px; font-weight:700; }
.native-ad .na-btn { background:#15233f; color:#fff; padding:12px 26px; border-radius:24px; font-weight:700; white-space:nowrap; }
.native-ad .na-btn:hover { text-decoration:none; background:#0e1830; }

/* ---- Responsive "house ad" creative (e.g. CODG / Carmel & Pebble Beach) ---- */
.promo-ad { display:flex; flex-direction:column; width:100%; background:#fff; border:1px solid var(--line);
  border-radius:4px; overflow:hidden; color:var(--text); text-align:left; text-decoration:none; transition:box-shadow .15s; }
.promo-ad:hover { text-decoration:none; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.promo-img { display:block; aspect-ratio:16/10; background:#e9eef0; }
.promo-img img { width:100%; height:100%; object-fit:cover; display:block; }
.promo-body { padding:22px 22px 6px; display:flex; flex-direction:column; gap:18px; }
.promo-title { font-size:clamp(24px, 5vw, 32px); line-height:1.15; font-weight:600; color:#222; }
.promo-desc { font-size:clamp(16px, 3.6vw, 19px); line-height:1.5; color:#8a8f93; }
.promo-desc b { color:#1f7a44; font-weight:700; }
.promo-url { font-size:15px; color:#7c7c7c; word-break:break-word; }
.promo-foot { border-top:1px solid var(--line); padding:16px 22px; display:flex; justify-content:flex-end; }
.promo-btn { color:#1f7a44; font-weight:600; font-size:clamp(16px, 3.6vw, 19px); display:inline-flex; align-items:center; gap:8px; }
.promo-ad:hover .promo-btn { gap:12px; }

/* ---------- Pagination ---------- */
.pager { display:flex; gap:14px; margin:30px 0 10px; }
.pager a { flex:1; background:var(--next-blue); color:#fff; text-align:center; padding:20px; font-size:20px; border-radius:3px; font-weight:600; }
.pager a:hover { background:#4a6ab3; text-decoration:none; }
.pager a.prev { background:#8a99bd; flex:0 0 30%; }
.page-dots { text-align:center; color:var(--muted); font-size:14px; margin:8px 0 0; }

/* ---------- Article-page sidebar widgets ---------- */
.widget { margin-bottom:30px; }
.widget-title { font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--blue); border-bottom:2px solid var(--blue); padding-bottom:6px; margin:0 0 12px; }
.taboola-feed { border:1px solid var(--line); padding:6px; background:#fff; }
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.prod { position:relative; background:#f1f1f1; aspect-ratio:3/4; border-radius:2px; overflow:hidden; display:grid; place-items:center; font-size:11px; color:var(--muted); }
.prod .disc { position:absolute; top:4px; left:4px; background:#fff; border:1px solid #ddd; font-size:11px; font-weight:700; padding:1px 5px; border-radius:3px; color:#c0392b; }
.taboola-feed .feed-meta { padding:10px 6px 4px; display:flex; align-items:baseline; gap:8px; }
.taboola-feed .feed-meta .brand { font-size:11px; letter-spacing:1px; color:#888; text-transform:uppercase; }
.taboola-feed .feed-meta .title { font-weight:600; }
.taboola-feed .feed-meta .url { font-size:12px; color:var(--muted); margin-left:auto; }

/* ---------- Sticky banner + interstitial ---------- */
.sticky-bottom { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); z-index:50; box-shadow:0 -2px 10px rgba(0,0,0,.08); padding:6px 0; }
.sticky-bottom .ad { margin:0; }
.sticky-bottom .close { position:absolute; top:4px; right:8px; background:#ddd; border:none; width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:13px; line-height:1; }

/* ---------- Orange footer ---------- */
.site-footer { background:var(--orange); color:#fff; padding:40px 0 0; margin-top:24px; }
.foot-grid { display:grid; grid-template-columns:1.1fr 1.1fr 1fr; gap:36px; }
.foot-col h4 { color:#fff; font-size:15px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:8px; margin:0 0 14px; }
.foot-col a { color:#fff; }
.cat-counts { list-style:none; margin:0; padding:0; columns:1; }
.cat-counts li { padding:3px 0; font-size:13px; }
.cat-counts a { color:#fff; }
.foot-recent { list-style:none; margin:0; padding:0; }
.foot-recent li { padding:6px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.foot-recent a { color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.3px; line-height:1.5; }
.foot-search { display:flex; margin-bottom:18px; }
.foot-search input { flex:1; border:none; padding:11px 14px; font-size:14px; border-radius:3px 0 0 3px; outline:none; }
.foot-search button { border:none; background:#c9460c; color:#fff; padding:0 16px; border-radius:0 3px 3px 0; cursor:pointer; }
.foot-other { list-style:none; margin:0; padding:0; }
.foot-other li { padding:5px 0; font-size:13px; text-transform:uppercase; letter-spacing:.3px; }
.foot-other a { color:#fff; }
.to-top { text-align:center; margin-top:30px; }
.to-top a { color:#fff; font-size:18px; }
.foot-bottom { border-top:1px solid rgba(255,255,255,.25); margin-top:16px; padding:16px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12px; }
.foot-bottom .links a { color:#fff; margin-left:14px; }

/* ---------- Static / legal pages ---------- */
.prose { max-width:820px; }
.prose h1 { color:var(--blue); font-size:30px; margin:6px 0 10px; }
.prose h2 { color:var(--blue); font-size:20px; margin:26px 0 10px; }
.prose p, .prose li { margin:0 0 14px; }
.prose ul { padding-left:20px; }
.prose .updated { color:var(--muted); font-size:13px; margin-bottom:22px; }
.contact-form { display:grid; gap:14px; max-width:560px; }
.contact-form label { font-weight:600; font-size:14px; }
.contact-form input, .contact-form textarea { width:100%; padding:12px; border:1px solid #ccc; border-radius:4px; font:inherit; }
.contact-form button { background:var(--nav-blue); color:#fff; border:none; padding:13px 28px; border-radius:4px; font-weight:600; cursor:pointer; justify-self:start; }

/* ---------- Cookie consent ---------- */
.cookie-bar { position:fixed; left:16px; right:16px; bottom:16px; max-width:1180px; margin:0 auto; background:#1f2733; color:#e7ebf0; padding:18px 22px; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.3); z-index:200; display:none; align-items:center; gap:18px; flex-wrap:wrap; }
.cookie-bar.show { display:flex; }
.cookie-bar p { margin:0; font-size:14px; flex:1 1 320px; }
.cookie-bar a { color:#9ec1ff; }
.cookie-bar .btns { display:flex; gap:10px; }
.cookie-bar button { border:none; padding:11px 22px; border-radius:5px; font-weight:600; cursor:pointer; }
.cookie-bar .accept { background:var(--orange-2); color:#fff; }
.cookie-bar .decline { background:#41506a; color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; }
  .sidebar { order:2; }
  .header-inner { flex-wrap:wrap; }
  .search { order:3; width:100%; flex-basis:100%; }
  .article, .sidebar, .ad, .ad-unit, .ad-box, .native-ad, .promo-ad, .prod-grid, .taboola-feed, .recent-list li, .foot-bottom, .cat-nav .nav-wrap { min-width:0; }
  .article, .sidebar, .ad, .ad-unit, .ad-box, .native-ad, .promo-ad { width:100%; max-width:100%; }
  .logo .logo-name { max-width:100%; white-space:normal; word-break:break-word; }
  .article h1 { font-size:25px; }
  .native-ad { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .native-ad .na-text, .native-ad .na-btn { min-width:0; }
  .native-ad .na-btn { white-space:normal; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .nav-toggle { display:block; }
  .cat-nav ul { display:none; flex-direction:column; width:100%; }
  .cat-nav ul.open { display:flex; }
  .cat-nav .nav-wrap { flex-wrap:wrap; }
}
@media (max-width: 560px) {
  .post-grid, .card-grid { grid-template-columns:1fr; }
  .feature-card h2 { font-size:20px; }
  .logo .logo-name { font-size:22px; }
  .ad-unit, .ad-box { width:100%; max-width:100%; }
  .prod-grid { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; }
  .pager a.prev { flex:0 0 40%; }
}