/* Облик сайта toppfiske.se — «редакционный справочник у воды».
   Грузится после app.css и перекрывает общий шаблон сети.
   Общий app.css не трогаем: он один на всех.
   Правлено 27 августа 2026: свой каркас, а не перекрашенная сетка. */

:root{
  --pine:#14463A;        /* основной, ель */
  --deep:#0C2E27;        /* глубина */
  --brick:#A8432F;       /* акцент, старая блесна */
  --paper:#F4F1E9;       /* овсяная бумага */
  --card:#FCFAF4;        /* поле карточки */
  --sage:#7E9A86;        /* полутон */
  --ink:#1C231F;
  --rule:#DED7C4;        /* волосяная линейка */
  --dim:#6D7A70;         /* служебный текст */
  --measure:none;
}

/* ---------- основа ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper) !important;
  color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.72;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Zilla Slab',Georgia,serif;
  color:var(--pine); letter-spacing:-.005em; line-height:1.24; font-weight:700;
}
a{ color:var(--pine); text-decoration:none; }
a:hover{ color:var(--brick); }
.content-wrap,.boxed-content-wrapper{ background:transparent !important; box-shadow:none !important; }
.inner{ max-width:1180px; padding:0 24px; }

/* ---------- служебная полоса: не чёрная лента, а тонкий кант ---------- */
.topbar{
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.topbar-inner{ padding:9px 0; }
.topbar-left a{
  color:var(--dim); font-size:12px; font-weight:600; margin-right:26px;
  letter-spacing:.02em; border-bottom:1px solid transparent;
}
.topbar-left a:hover{ color:var(--pine); border-bottom-color:var(--sage); }
.topbar-right{ color:var(--dim); }
.tf-season{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
}

/* ---------- шапка: имя изданием, не логотип-картинка ---------- */
.header-hero{
  background:var(--paper) url('/uploads/art/masthead.jpg') center bottom/cover no-repeat;
  border-bottom:1px solid var(--rule);
}
.header-logo-area{ padding:44px 0 34px; }
.tf-mast-inner{ display:block; }
.tf-mast{ display:block; text-decoration:none; }
.tf-mast-word{
  display:block;
  font-family:'Zilla Slab',Georgia,serif; font-weight:700;
  font-size:60px; line-height:1; color:var(--pine);
  letter-spacing:-.022em;
}
.tf-mast-sub{
  display:block; margin-top:12px; padding-top:11px;
  border-top:2px solid var(--pine); max-width:560px;
  font-size:12.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--deep); font-weight:600;
}
.tf-mast-note{
  margin-top:14px; max-width:640px;
  font-size:15px; color:var(--dim); font-style:italic;
}
.header-logo-area .logo img{ display:none; }

/* ---------- меню: светлое, подчёркиванием, без капса-жира ---------- */
.navigation{
  background:transparent; border-bottom:1px solid var(--rule);
  padding:0; margin-bottom:6px; align-items:stretch;
}
.main-menu{ gap:0; }
.main-menu li a{
  font-family:'Karla',system-ui,sans-serif;
  padding:16px 20px 15px; color:var(--deep);
  font-size:14px; font-weight:600; text-transform:none; letter-spacing:.01em;
  border-bottom:3px solid transparent;
}
.main-menu li:first-child a{ padding-left:0; }
.main-menu li a:hover{ color:var(--brick); border-bottom-color:var(--rule); }
.main-menu li.active a{ color:var(--pine); border-bottom-color:var(--brick); }
.nav-search input{
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  color:var(--ink); font-size:13.5px; padding:6px 4px; width:130px;
  font-family:'Karla',sans-serif;
}
.nav-search input::placeholder{ color:var(--dim); }
.nav-search input:focus{ outline:none; border-bottom-color:var(--pine); }
.nav-search button{ background:none; border:0; color:var(--dim); cursor:pointer; padding:6px; }
.nav-search button:hover{ color:var(--pine); }

/* ---------- сетка: два столбца, правый рельс собран в стопку ---------- */
.site-content{ padding:0; }
.page-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 316px;
  gap:44px 46px;
  padding:38px 0 10px;
  align-items:start;
}
.col-main{ grid-column:1; grid-row:1 / span 2; gap:44px; }
.col-middle{ grid-column:2; grid-row:1; gap:34px; }
.col-right{ grid-column:2; grid-row:2; gap:34px; }

/* ---------- первый экран: своя выкладка ---------- */
.tf-lead{ display:block; }
.tf-lead-main{
  display:grid; grid-template-columns:1fr; gap:0;
  text-decoration:none; color:inherit;
}
.tf-lead-img{
  display:block; width:100%; height:380px;
  background-size:cover; background-position:center; background-color:var(--sage);
}
.tf-lead-body{ display:block; padding:24px 0 0; }
.tf-kicker{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brick); font-weight:700; margin-bottom:10px;
}
.tf-lead-title{
  display:block; font-family:'Zilla Slab',Georgia,serif; font-weight:700;
  font-size:40px; line-height:1.14; color:var(--pine); letter-spacing:-.018em;
  max-width:19ch;
}
.tf-lead-main:hover .tf-lead-title{ color:var(--brick); }
.tf-lead-deck{
  display:block; margin-top:14px; max-width:60ch;
  font-size:17.5px; line-height:1.66; color:#3B453E;
}
.tf-lead-date{
  display:block; margin-top:14px;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
.tf-lead-side{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  margin-top:36px; padding-top:32px; border-top:1px solid var(--rule);
}
.tf-side-item{ display:block; text-decoration:none; color:inherit; }
.tf-side-img{
  display:block; width:100%; height:150px;
  background-size:cover; background-position:center; background-color:var(--sage);
}
.tf-side-text{ display:block; padding-top:14px; }
.tf-side-title{
  display:block; font-family:'Zilla Slab',Georgia,serif; font-weight:700;
  font-size:20px; line-height:1.25; color:var(--pine);
}
.tf-side-item:hover .tf-side-title{ color:var(--brick); }

/* ---------- заголовки разделов: подпись и линейка, не чёрный блок ---------- */
.section-head{
  background:transparent; padding:0 0 9px; margin-bottom:22px;
  border-bottom:2px solid var(--pine); align-items:baseline;
}
.section-head h3{
  color:var(--pine); font-family:'Karla',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.section-head a.view-all{ color:var(--dim); font-size:12px; font-weight:600; }
.section-head a.view-all:hover{ color:var(--brick); }
.cat-section{ margin-bottom:0; }

/* ---------- лента статей: волосяные линейки, воздух ---------- */
.post-list{ display:block; }
.post-list-item{ background:transparent; padding:0; }
.post-list-item h3{ font-size:23px; margin-bottom:7px; }
.post-list-item h3 a{ color:var(--pine); }
.post-list-item h3 a:hover{ color:var(--brick); }
.post-list-item .meta{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
  margin-bottom:11px;
}
.post-list-item .excerpt{ font-size:16px; color:#3B453E; line-height:1.7; margin-bottom:10px; max-width:64ch; }
.post-list-separator{ border-bottom:1px solid var(--rule); margin:26px 0; }

.cat-row{ grid-template-columns:repeat(3,1fr); gap:30px; }
.post-card{ background:transparent; }
.post-card:hover{ transform:none; }
.post-card .thumb{ height:180px; background-color:var(--sage); }
.post-card .card-body{ padding:14px 0 0; }
.post-card .card-body .cat-label{
  background:transparent; color:var(--brick); padding:0;
  font-size:10.5px; letter-spacing:.14em; font-weight:700;
}
.post-card h3{ font-size:18px; line-height:1.28; margin-bottom:7px; }
.post-card h3 a{ color:var(--pine); }
.post-card h3 a:hover{ color:var(--brick); }
.post-card .meta{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }

.datatjanster-section{ background:transparent; padding:0; }
.dt-featured h3{ font-size:24px; }
.dt-featured h3 a{ color:var(--pine); }
.dt-featured .meta{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
.dt-featured-img{ width:300px; }
.dt-featured-content{ gap:26px; }

/* «читать дальше» — строчная ссылка со стрелкой, не серая кнопка */
.btn-las-mer{
  background:transparent !important; color:var(--brick) !important;
  padding:0; font-size:13px; font-weight:700; text-transform:none;
  letter-spacing:.02em; border-bottom:1px solid var(--rule);
}
.btn-las-mer:hover{ color:var(--pine) !important; border-bottom-color:var(--pine); }

.bottom-message{
  margin-top:10px; padding:22px 24px;
  background:var(--card); border-left:3px solid var(--sage);
  font-size:15px; color:var(--dim);
}

/* ---------- правый рельс: карточки без чёрных шапок ---------- */
.widget{ background:transparent; }
.widget-head{
  background:transparent; color:var(--pine);
  padding:0 0 8px; border-bottom:2px solid var(--pine);
  font-family:'Karla',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.widget-body{ padding:16px 0 0; }
.widget-body ul li{ border-bottom:1px solid var(--rule); padding:7px 0; }
.widget-body ul li a{ color:var(--deep); font-size:14px; }
.widget-body ul li a:hover{ color:var(--brick); }

.toppnyhet-item,.popular-item{ border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:14px; }
.toppnyhet-item:last-child,.popular-item:last-child{ border-bottom:0; }
.toppnyhet-text h4,.popular-item h4{ font-size:16px; line-height:1.3; }
.toppnyhet-text h4 a,.popular-item h4 a{ color:var(--pine); }
.toppnyhet-text .meta,.popular-item .meta{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
}
.toppnyhet-img,.pop-thumb{ background-color:var(--sage); border-radius:0; }

/* рыболовный год — виджет только этого сайта */
.widget-season .season-item{
  display:grid; grid-template-columns:78px 1fr; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.season-name{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brick); font-weight:700;
}
.widget-season .season-item a{ color:var(--deep); font-size:14.5px; line-height:1.45; }
.widget-season .season-item a:hover{ color:var(--brick); }
.season-text{ color:var(--dim); font-size:14.5px; }
.season-note{
  margin-top:14px; font-size:12.5px; line-height:1.55; color:var(--dim); font-style:italic;
}

/* партнёрские плитки вместо битых картинок */
.promo-tile{
  width:56px; height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Zilla Slab',Georgia,serif; font-weight:700; font-size:15px;
  color:var(--paper); background:var(--pine); letter-spacing:.02em;
}
.promo-tile-onsk{ background:var(--brick); font-size:24px; }
.promo-tile-tak{ background:var(--sage); color:var(--deep); }
.widget-body a[href*="blistar"],.widget-body a[href*="onskemal"],.widget-body a[href*="raotak"],
.widget-body a[href*="hemservice"]{ background:transparent !important; border-radius:0 !important; padding:9px 0 !important; }
.onsk-card{
  display:block; padding:26px 16px; background:var(--pine); color:var(--paper) !important;
  font-family:'Zilla Slab',Georgia,serif; font-size:22px; letter-spacing:.01em;
}
.onsk-card:hover{ background:var(--deep); color:var(--paper) !important; }

.widget-categories-list ul li a{ font-size:13.5px; }
.widget-ad .widget-body{ background:transparent !important; }
.rating-display .star.filled,.dt-stars,.footer-stars{ color:var(--brick); }

/* ---------- подвал: светлый, а не чёрный с оранжевым кантом ---------- */
.footer{
  background:var(--card); color:var(--dim);
  border-top:1px solid var(--rule); border-bottom:6px solid var(--pine);
  padding:52px 0 26px; margin-top:56px;
}
.footer-cols{ grid-template-columns:1.5fr 1fr 1fr; gap:52px; margin-bottom:34px; }
.footer-mark{
  display:block; font-family:'Zilla Slab',Georgia,serif; font-weight:700;
  font-size:26px; color:var(--pine); margin-bottom:14px; letter-spacing:-.015em;
}
.footer h4{
  color:var(--pine); font-family:'Karla',sans-serif;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding-bottom:8px; border-bottom:1px solid var(--rule); margin-bottom:14px;
}
.footer p{ font-size:14.5px; line-height:1.68; color:var(--dim); margin-bottom:12px; }
.footer a{ color:var(--pine); }
.footer a:hover{ color:var(--brick); }
.footer ul li{ margin-bottom:8px; }
.footer ul li a{ color:var(--deep); font-size:14px; }
.footer ul li a:hover{ color:var(--brick); }
.footer-disclaimer{ margin-top:18px; font-size:12.5px; font-style:italic; }
.footer-bottom{
  border-top:1px solid var(--rule); padding-top:18px;
  text-align:left; font-size:12.5px; color:var(--dim);
}
.footer-bottom a{ color:var(--pine); }

/* прочее общее */
.category-card{ background:var(--card); border-left:3px solid var(--pine); }
.category-card:hover{ background:var(--pine); }
.category-card:hover .cat-name,.category-card:hover .cat-count{ color:var(--paper); }
.pagination a,.pagination span{ background:var(--card); color:var(--deep); }
.pagination span.current,.pagination a:hover{ background:var(--pine); color:var(--paper); }
.ds-partners a{ border-color:var(--rule) !important; border-radius:0 !important; }

/* ---------- узкие экраны ---------- */
@media(max-width:1100px){
  .page-grid{ grid-template-columns:minmax(0,1fr) 288px; gap:38px 34px; }
  .col-main{ grid-column:1; grid-row:1 / span 2; }
  .col-middle{ grid-column:2; grid-row:1; }
  .col-right{ grid-column:2; grid-row:2; }
  .tf-mast-word{ font-size:50px; }
  .tf-lead-title{ font-size:34px; }
  .cat-row{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  .page-grid{ grid-template-columns:1fr; gap:36px; }
  .col-main,.col-middle,.col-right{ grid-column:1; grid-row:auto; }
  .footer-cols{ grid-template-columns:1fr; gap:30px; }
}
@media(max-width:768px){
  body{ font-size:16.5px; }
  .inner{ padding:0 18px; }
  .header-logo-area{ padding:26px 0 22px; }
  .tf-mast-word{ font-size:38px; }
  .tf-mast-sub{ font-size:11px; letter-spacing:.13em; }
  .tf-mast-note{ font-size:14px; }
  .topbar-left a{ margin-right:16px; font-size:11.5px; }
  .tf-season{ display:none; }
  .tf-lead-img{ height:230px; }
  .tf-lead-title{ font-size:28px; max-width:none; }
  .tf-lead-deck{ font-size:16px; }
  .tf-lead-side{ grid-template-columns:1fr; gap:26px; }
  .tf-side-img{ height:180px; }
  .navigation{ position:relative; padding:6px 0; }
  .nav-toggle span{ background:var(--pine) !important; }
  .main-menu{ background:var(--card); border:1px solid var(--rule); }
  .main-menu li a{ padding:13px 16px; border-bottom:1px solid var(--rule); }
  .main-menu li:first-child a{ padding-left:16px; }
  .cat-row{ grid-template-columns:1fr; }
  .dt-featured-content{ flex-direction:column; }
  .dt-featured-img{ width:100%; }
  .footer{ padding:36px 0 20px; margin-top:38px; }
}
@media(max-width:480px){
  .tf-mast-word{ font-size:32px; }
  .tf-lead-title{ font-size:25px; }
}

/* ---------- страница статьи и рубрики ---------- */
.content-wrap{ grid-template-columns:minmax(0,1fr) 316px; gap:46px; padding:38px 0 0; }
.single-post{ background:transparent; padding:0; }
.single-post h1{
  color:var(--pine); font-size:38px; line-height:1.16; letter-spacing:-.018em;
  max-width:20ch; margin-bottom:16px;
}
.single-post .post-meta{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  padding-bottom:14px; border-bottom:1px solid var(--rule); margin-bottom:28px;
}
.single-post .post-content{
  color:#2C352F; font-size:18px; line-height:1.78; max-width:66ch;
}
.single-post .post-content p{ margin-bottom:22px; }
.single-post .post-content h2{ font-size:26px; margin:36px 0 12px; }
.single-post .post-content h3{ font-size:21px; margin:28px 0 10px; }
.single-post .post-content a{ color:var(--brick); border-bottom:1px solid var(--rule); }
.single-post .post-content a:hover{ color:var(--pine); border-bottom-color:var(--pine); }
.single-post .post-content img{ margin:26px 0; display:block; }
.single-post .post-content blockquote{
  margin:26px 0; padding:4px 0 4px 22px; border-left:3px solid var(--sage);
  font-style:italic; color:var(--dim);
}
.single-post .post-content ul,.single-post .post-content ol{ margin:0 0 22px 22px; }
.single-post .post-content li{ margin-bottom:8px; }
.rating-widget{
  background:var(--card); border-left:3px solid var(--sage);
  text-align:left; padding:20px 22px; margin-top:40px;
}
.rating-title{ color:var(--pine); font-family:'Zilla Slab',Georgia,serif; font-size:17px; }
.sidebar{ display:flex; flex-direction:column; gap:34px; }

/* ---------- список рубрики ---------- */
.blog-list{ background:transparent; padding:0; }
.blog-item{ padding:0 0 28px; margin-bottom:28px; border-bottom:1px solid var(--rule); gap:26px; }
.blog-item h2{ font-size:24px; }
.blog-item h2 a{ color:var(--pine); }
.blog-item h2 a:hover{ color:var(--brick); }
.blog-item-img img{ background-color:var(--sage); }
.post-grid{ grid-template-columns:repeat(3,1fr); gap:30px; }
.categories-page{ background:transparent; padding:0; gap:14px; }

/* ---------- партнёрские строки ---------- */
.promo-list{ display:flex; flex-direction:column; }
.promo-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--rule); color:inherit;
}
.promo-row:last-child{ border-bottom:0; }
.promo-txt{ display:flex; flex-direction:column; }
.promo-txt strong{ font-size:14.5px; color:var(--deep); font-weight:600; }
.promo-txt span{ font-size:12.5px; color:var(--dim); }
.promo-row:hover .promo-txt strong{ color:var(--brick); }

@media(max-width:900px){
  .content-wrap{ grid-template-columns:1fr; gap:38px; }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .single-post h1{ font-size:27px; max-width:none; }
  .single-post .post-content{ font-size:17px; }
  .post-grid{ grid-template-columns:1fr; }
  .blog-item{ flex-direction:column; gap:14px; }
}