/* ------------------------------------------------------------------ *
 * campo-modern.css — modern polish + mobile responsiveness layer.
 * Loaded AFTER the legacy stylesheets so it overrides where needed.
 * Desktop look is preserved; rules below are additive or gated behind
 * a max-width media query for phones/tablets.
 * ------------------------------------------------------------------ */

/* ---- Subtle modern polish (all screens) --------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
#div_cnt_r a { transition: color .15s ease; }

/* Reusable gold CTA button + historic note (used by refreshed content) */
.campo-btn {
  display: inline-block; margin: 6px 0; padding: 11px 22px; border-radius: 40px;
  background: linear-gradient(145deg, #f4d98a, #d9b35c); color: #062b13 !important;
  font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px rgba(217,179,92,.35);
}
.campo-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(217,179,92,.5); }
.campo-note {
  border-left: 4px solid #d9b35c; background: #f3f7f4; color: #123;
  padding: 10px 14px; margin: 12px 0; border-radius: 4px; line-height: 1.5;
}
.campo-note strong { color: #015f18; }
.campo-note a { color: #b8860b; font-weight: bold; }
.campo-cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.campo-cta-row .campo-btn { margin: 0; font-size: 12px; padding: 10px 16px; }

/* ---- Mobile / tablet (stack the fixed 774px layout) --------------- */
@media (max-width: 800px) {
  body { margin: 0 !important; }
  #div_main_wrpr {
    width: auto !important; max-width: 640px; margin: 0 auto !important;
    background: #002b09 !important;
  }
  #div_tp_wrpr, #div_permalinks_wrpr, #div_permalinks, #div_mainpht,
  #div_menu, #div_cnt_wrpr, #div_btm_wrpr, #div_btm {
    width: auto !important; max-width: 100% !important; margin: 0 auto !important;
    background-image: none !important; height: auto !important;
  }
  #div_permalinks_wrpr { overflow: visible !important; }
  #div_logo {
    position: static !important; top: auto !important; left: auto !important;
    text-align: center; padding: 14px 0 6px;
  }
  #div_logo img { width: 150px; height: auto; }
  #div_mainpht { overflow: hidden !important; }
  #div_mainpht img { width: 100%; height: auto; }

  /* Content columns stack full width */
  #div_cnt_l, #div_cnt_r {
    float: none !important; width: auto !important;
    box-sizing: border-box; padding: 14px 16px !important; margin: 0 !important;
  }
  #div_cnt_l { border-top: 1px solid #0a3d17; }

  /* Image blocks / galleries stack */
  .image_block, .image_block.left, .image_block.right {
    float: none !important; width: auto !important; margin: 12px 0 !important;
  }
  .img_left, .img_right { float: none !important; display: block; margin: 0 auto 12px !important; }
  #div_gal_wrpr .thumb, #div_gal_index_wrpr .gal,
  #div_gal_index_wrpr .gal .thumb, #div_gal_index_wrpr .gal .desc {
    float: none !important; width: auto !important; height: auto !important;
    margin: 0 auto 12px !important; text-align: center;
  }

  /* Menu: wrap into a tidy stacked/flex list */
  #div_menu ul.menu { display: flex; flex-wrap: wrap; justify-content: center; }
  #div_menu ul.menu > li { float: none !important; }
  #div_menu ul.menu a { display: block; padding: 10px 12px; }
}

@media (max-width: 420px) {
  #div_menu ul.menu a { padding: 9px 9px; font-size: 12px; }
}

/* ---- Colorful entry hero (homepage) ------------------------------- */
.campo-hero {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: 46px 20px 40px; margin: 0 0 4px;
  background: linear-gradient(120deg,#0a3d17 0%,#12703a 22%,#0f8f8a 45%,#c9962f 68%,#b5306e 88%,#0a3d17 100%);
  background-size: 300% 300%; animation: campoShift 16s ease infinite;
}
@keyframes campoShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.campo-hero::after { /* dark vignette for text contrast */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%);
}
.campo-hero__glow {
  position:absolute; width:340px; height:340px; left:50%; top:-120px; transform:translateX(-50%);
  background: radial-gradient(circle, rgba(244,217,138,.55), rgba(244,217,138,0) 62%);
  filter: blur(6px); pointer-events:none;
}
.campo-hero__inner { position: relative; z-index: 2; }
.campo-hero__badge {
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:10px;
  border-radius:50%; font-weight:800; font-size:19px; color:#062b13;
  background:linear-gradient(145deg,#f7e4a6,#d9b35c); box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.campo-hero__badge small { font-size:12px; }
.campo-hero__title {
  margin:6px 0 8px; font-size:44px; line-height:1; letter-spacing:3px; text-transform:uppercase;
  font-family:Georgia,'Times New Roman',serif; font-weight:800; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.campo-hero__title span { color:#f4d98a; }
.campo-hero__tag { margin:0 auto 18px; max-width:520px; font-size:14px; color:#f2fff6; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.campo-hero__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.campo-hero__cams { background:linear-gradient(145deg,#ff5fa2,#b5306e)!important; color:#fff!important; }
.campo-h2 { color:#015f18; text-transform:uppercase; letter-spacing:.5px; margin:4px 0 12px; }
@media (max-width:800px){ .campo-hero__title{font-size:34px} .campo-hero{padding:36px 16px 30px} }

/* ---- Stories ------------------------------------------------------ */
.campo-story-list { margin-top: 14px; }
.campo-story-card {
  border: 1px solid #d7e2d9; border-left: 4px solid #d9b35c; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 14px; background: #fbfcfb;
}
.campo-story-card h2 { margin: 0 0 4px; }
.campo-story-card h2 a { color: #015f18; text-decoration: none; }
.campo-story-card h2 a:hover { text-decoration: underline; }
.campo-story-date { font-size: 11px; color: #8a8a8a; margin: 0 0 6px; }
.campo-story-body { line-height: 1.7; margin-top: 10px; }
.campo-story-body p { margin: 0 0 12px; }

/* ---- Affiliate banners -------------------------------------------- */
.campo-adbox { text-align: center; margin: 16px 0; }
.campo-adbox iframe { max-width: 100%; }
.campo-adbar { width: 100%; background: #062b13; padding: 10px 0; text-align: center; overflow-x: auto; }
.campo-adbar-inner { display: inline-block; min-width: 1140px; }
.campo-adside { margin: 0 0 12px; text-align: center; }
.campo-adside iframe { max-width: 100%; }
@media (max-width: 800px) { .campo-adbar { padding: 6px 0; } }

/* ---- Coming soon --------------------------------------------------- */
.campo-soon { text-align: center; padding: 30px 16px 40px; }
.campo-soon__badge {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px;
  color: #062b13; background: linear-gradient(145deg,#f4d98a,#d9b35c); box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.campo-soon__badge small { font-size: 13px; }
.campo-soon h1 { color: #015f18; margin: 4px 0 4px; }
.campo-soon__tag {
  font-size: 22px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: #b5306e; margin: 0 0 14px;
}
.campo-soon p { max-width: 460px; margin: 0 auto 10px; line-height: 1.6; }

/* ---- Forum --------------------------------------------------------- */
.campo-flash { padding: 10px 14px; border-radius: 6px; margin: 10px 0; font-weight: bold; }
.campo-flash--ok  { background: #e6f6ea; color: #12602a; border: 1px solid #b6e0c1; }
.campo-flash--err { background: #fdecec; color: #a12020; border: 1px solid #f2c2c2; }
.campo-forum-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; }
.campo-forum-table th, .campo-forum-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e0e6e1; }
.campo-forum-table th { color: #015f18; font-size: 12px; text-transform: uppercase; }
.campo-forum-table td a { color: #015f18; font-weight: bold; text-decoration: none; }
.campo-forum-table td a:hover { text-decoration: underline; }
.campo-forum-back { margin: 0 0 8px; }
.campo-posts { margin: 12px 0 20px; }
.campo-post { border: 1px solid #e0e6e1; border-left: 4px solid #d9b35c; border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; background: #fbfcfb; }
.campo-post-meta { font-size: 11px; color: #8a8a8a; margin-bottom: 6px; }
.campo-post-meta strong { color: #015f18; font-size: 13px; }
.campo-post-meta span { margin-left: 8px; }
.campo-post-body { line-height: 1.6; }
.campo-del { margin-left: 10px; color: #a12020; }
.campo-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin-top: 8px; }
.campo-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #333; font-weight: bold; }
.campo-form input[type=text], .campo-form input[type=password], .campo-form input[type=email], .campo-form textarea {
  font: inherit; padding: 9px 10px; border: 1px solid #cdd6cf; border-radius: 6px; background: #fff; font-weight: normal;
}
.campo-userbar { font-size: 12px; color: #555; text-align: right; margin: 0 0 8px; }
.campo-userbar a { color: #b8860b; font-weight: bold; }
.campo-userbar strong { color: #015f18; }
.campo-form textarea { resize: vertical; }
.campo-form button { align-self: flex-start; border: 0; cursor: pointer; }
.campo-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ---- Forum v2 ------------------------------------------------------ */
.f2-muted { color: #8a8a8a; font-size: 12px; }
.f2-intro { color: #4a5a4e; margin: 4px 0 14px; }
.f2-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.f2-toolbar h1 { margin: 0; }
.f2-tools { display: flex; gap: 8px; align-items: center; }
.f2-search { display: flex; gap: 6px; margin: 8px 0 14px; }
.f2-search input[type=text] { flex: 1; padding: 8px 10px; border: 1px solid #cdd6cf; border-radius: 6px; }
.f2-search--mini input[type=text] { width: 130px; }
.f2-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 640px){ .f2-cats { grid-template-columns: 1fr; } }
.f2-cat { display: block; padding: 12px 14px; border: 1px solid #dde5df; border-left: 4px solid #015f18; border-radius: 8px; background: #fbfcfb; text-decoration: none; color: #123; }
.f2-cat strong { color: #015f18; display: block; }
.f2-cat span { font-size: 12px; color: #6a7a6e; }
.f2-tagcloud { margin: 10px 0 6px; }
.f2-tag { display: inline-block; background: #eef4ef; border: 1px solid #d7e2d9; color: #015f18; border-radius: 20px; padding: 2px 10px; margin: 0 5px 6px 0; font-size: 12px; text-decoration: none; }
.f2-tag:hover { background: #e0efe4; }
.f2-tag em { color: #b8860b; font-style: normal; }
.f2-tags { display: block; margin: 6px 0 10px; }
.f2-badge { font-size: 10px; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.f2-badge--admin { background: #b5306e; color: #fff; }
.f2-badge--mod { background: #015f18; color: #fff; }

.f2-posts { margin: 14px 0; }
.f2-post { display: flex; gap: 14px; border: 1px solid #e0e6e1; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.f2-post-side { width: 84px; flex-shrink: 0; text-align: center; }
.f2-post-user { font-size: 12px; margin-top: 6px; }
.f2-uhearts { display: block; color: #b5306e; font-size: 11px; }
.f2-post-main { flex: 1; min-width: 0; }
.f2-post-meta { font-size: 11px; color: #8a8a8a; margin-bottom: 6px; }
.f2-edited { margin-left: 6px; font-style: italic; }
.f2-post-body { line-height: 1.65; word-wrap: break-word; }
.f2-post-body p { margin: 0 0 10px; }
.f2-post-body img.campo-inline-img { max-width: 100%; border-radius: 6px; }
.campo-quote { border-left: 3px solid #d9b35c; background: #f7f4ea; margin: 8px 0; padding: 8px 12px; border-radius: 4px; }
.campo-quote cite { display: block; font-size: 11px; color: #8a7a4e; margin-bottom: 4px; }
.campo-code { background: #0a1f12; color: #cfe9d6; padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.f2-post-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; font-size: 12px; }
.f2-act { color: #6a7a6e; text-decoration: none; }
.f2-act:hover { color: #015f18; }
.f2-danger { color: #a12020; }
.f2-inline { display: inline; }
.f2-heart { background: none; border: 1px solid #e3c9d4; color: #b5306e; border-radius: 20px; padding: 3px 12px; cursor: pointer; font-size: 12px; }
.f2-heart--on { background: #b5306e; color: #fff; border-color: #b5306e; }
.f2-hcount { color: #b5306e; font-size: 12px; }

.f2-av { display: inline-block; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.f2-av--txt { color: #fff; text-align: center; font-weight: 700; }
.f2-uname { color: #015f18; font-weight: bold; text-decoration: none; }
.f2-guest { color: #8a8a8a; }

.f2-pager { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; align-items: center; }
.f2-pager a, .f2-pager .f2-cur { padding: 5px 10px; border-radius: 6px; text-decoration: none; font-size: 13px; }
.f2-pager a { border: 1px solid #d7e2d9; color: #015f18; }
.f2-pager .f2-cur { background: #015f18; color: #fff; }
.f2-gap { color: #8a8a8a; }

.f2-searchlist .f2-sresult { padding: 8px 0; border-bottom: 1px solid #eee; }
.f2-snip { font-size: 13px; color: #4a5a4e; }
.f2-snip mark { background: #f7e9b0; }

.f2-profile-head { display: flex; gap: 16px; align-items: center; }
.f2-profile-head h1 { margin: 0; }
.f2-bio { background: #fbfcfb; border: 1px solid #e0e6e1; border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.f2-userlist { list-style: none; padding: 0; }
.f2-userlist li { padding: 6px 0; border-bottom: 1px solid #eee; }
.f2-editprofile { margin: 12px 0; }
.f2-editprofile summary { cursor: pointer; color: #015f18; font-weight: bold; }
.f2-pmgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px){ .f2-pmgrid { grid-template-columns: 1fr; } }

/* ---- Modern footer ------------------------------------------------ */
#div_footer { color: #cfe0d4; line-height: 1.6; padding: 6px 4px 2px; }
.campo-foot-nav { margin-bottom: 8px; }
.campo-foot-nav a { color: #d9b35c; text-decoration: none; }
.campo-foot-nav a:hover { text-decoration: underline; }
.campo-foot-meta { font-size: 11px; color: #9fc0a8; margin-bottom: 6px; }
.campo-foot-meta a { color: #d9b35c; }
.campo-foot-18 {
  display: inline-block; background: #d9b35c; color: #062b13; font-weight: 800;
  border-radius: 4px; padding: 0 5px; margin-right: 5px; font-size: 11px;
}
.campo-foot-copy { font-size: 11px; color: #7fa389; }
.campo-foot-aff { margin-top: 10px; text-align: center; }