/*
Theme Name: OTCINFORMER Reference
Theme URI: https://example.com/
Author: OTCINFORMER
Description: Responsive OTC market news theme based on provided reference artwork.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: otcinformer
*/
:root{--cyan:#00d8ed;--pink:#ed0095;--orange:#ff8c19;--navy:#00152b}*{box-sizing:border-box}body{margin:0;background:#001126;color:white;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.wrap{width:min(1100px,96%);margin:auto}.mast{height:134px;background:#001125 url(assets/header.jpg) center/cover no-repeat;border-bottom:3px solid #00d8ed}.mast a{display:block;height:100%}.site-nav{display:flex;gap:25px;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid #0acde5;background:#00172b;font-weight:800;font-size:13px}.site-nav a:hover{color:var(--cyan)}.hero{background:#001025 url(assets/hero.jpg) center/cover no-repeat;min-height:340px;border-bottom:5px solid var(--cyan)}.hero a{display:block;min-height:340px}.watch-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0;color:white;font-size:clamp(23px,4vw,46px);font-weight:900;font-style:italic}.watch-title b{color:var(--cyan)}.watch-title small{font-size:12px;font-style:normal}.watch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.watch-card{background:#f9fcff;color:#071b31;border:2px solid #2ad2df;border-radius:12px;min-height:178px;display:grid;grid-template-columns:78px minmax(0,1fr) 40%;gap:8px;padding:7px;overflow:hidden}.date-tile{background:linear-gradient(#02a9b6,#026b85);color:#fff;font-size:21px;font-weight:900;text-align:center;padding:14px 3px;border-radius:9px;height:60px}.watch-card:nth-child(3n+2) .date-tile{background:linear-gradient(#ffa426,#f46c00)}.watch-card:nth-child(3n) .date-tile{background:linear-gradient(#ef008f,#aa0069)}.card-body{min-width:0;display:flex;flex-direction:column;align-items:start;gap:5px}.cat{display:inline-block;background:var(--pink);border-radius:15px;padding:4px 9px;color:white;font-size:10px;font-weight:900;text-transform:uppercase}.watch-card:nth-child(even) .cat{background:var(--orange)}.card-body h2{font-size:17px;line-height:1.13;margin:0;font-weight:900}.card-body p{font-size:13px;line-height:1.22;margin:0;flex:1}.more{background:linear-gradient(90deg,#ed0095,#fd7314);border-radius:18px;padding:6px 13px;font-size:12px;font-weight:800;color:white}.card-photo{height:100%;width:100%;object-fit:cover;border-radius:9px}.signup{margin:18px 0;border-top:2px solid var(--cyan);border-bottom:2px solid var(--cyan);padding:17px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#001a2a}.signup h2{margin:0;color:var(--cyan)}.signup p{margin:4px 0;font-size:13px}.signup form{display:flex;gap:8px;flex-wrap:wrap}.signup input,.side-signup input{padding:11px;border:1px solid #a4d8e7;border-radius:5px;min-width:220px}.signup button,.side-signup button{border:0;border-radius:5px;background:var(--pink);color:white;font-weight:900;padding:12px 18px;cursor:pointer}.footer{border-top:3px solid var(--cyan);padding:22px;text-align:center;background:#00192b}.footer-logo{font-weight:900;font-size:30px;color:var(--cyan)}.footer-logo span{color:#ddd}.footer small{display:block;margin-top:8px}.article-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(275px,1fr);gap:24px;margin-top:28px}.article h1{font-size:clamp(34px,5vw,56px);line-height:1.02;margin:9px 0}.article h1 em{font-style:normal;color:var(--cyan)}.dek{font-size:18px;color:#d4e4ee}.meta{color:#b9d8e5;font-size:13px;margin:17px 0}.article-image{width:100%;max-height:410px;object-fit:cover;border:1px solid #06d3e4;border-radius:7px}.article-content{font-size:16px;line-height:1.6}.article-content h2{border-left:5px solid var(--cyan);padding-left:12px}.article-content img{max-width:100%}.sidebar{border:1px solid #125b85;padding:16px;border-radius:8px;align-self:start}.sidebar h2{font-size:26px;margin:0 0 14px}.sidebar h2 span{color:var(--cyan)}.side-story{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #145070}.side-story img{width:110px;height:100px;object-fit:cover;border-radius:8px}.side-story strong{font-size:14px}.side-story small{display:block;margin-top:9px;color:#acd4e7}.side-signup{margin-top:20px;padding:16px;background:linear-gradient(130deg,#73004f,#110b30);border:3px solid var(--pink);border-radius:9px}.side-signup h3{font-size:22px;margin:0 0 8px}.side-signup input,.side-signup button{width:100%;margin-top:8px}.related{margin:24px 0;border:1px solid #086b92;border-radius:9px;padding:12px}.related h2{font-size:23px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related-item{border:1px solid #176d96;border-radius:7px;padding:7px}.related-item img{height:110px;width:100%;object-fit:cover}.related-item strong{display:block;font-size:14px}.notice{padding:10px;color:#fff;background:#005e67}.pagination{margin:20px 0}.pagination a,.pagination span{padding:7px 11px;border:1px solid var(--cyan);margin-right:5px}@media(max-width:720px){.mast{height:100px;background-size:cover}.hero,.hero a{min-height:215px}.site-nav{gap:9px;flex-wrap:wrap;font-size:11px}.watch-title small{display:none}.watch-grid{grid-template-columns:1fr}.watch-card{grid-template-columns:65px minmax(0,1fr) 36%;min-height:155px}.date-tile{font-size:16px}.card-body h2{font-size:15px}.card-body p{font-size:12px}.article-grid{grid-template-columns:1fr}.related-grid{grid-template-columns:repeat(2,1fr)}.signup{display:block}.signup form{margin-top:12px}.signup input{flex:1;min-width:140px}}@media(max-width:400px){.mast{height:75px}.hero,.hero a{min-height:150px}.watch-card{grid-template-columns:52px minmax(0,1fr) 33%;gap:5px}.date-tile{font-size:13px;padding:13px 2px}.card-body p{font-size:11px}.more{font-size:10px;padding:5px}.card-body h2{font-size:13px}}

/* Responsive layout refinements */
.wrap{width:min(1400px,calc(100% - 36px))}
.mast{background-size:cover;background-position:center}
.hero{background-position:center;background-size:cover}
.watch-card>a:last-child{display:block;min-width:0;overflow:hidden;border-radius:9px}
.watch-card .card-photo{display:block;width:100%;height:100%;min-height:160px;object-fit:cover}
@media(min-width:1000px){.mast{height:clamp(130px,13vw,190px)}.hero,.hero a{min-height:clamp(350px,35vw,510px)}.watch-grid{gap:16px}.watch-card{min-height:215px;grid-template-columns:85px minmax(0,1fr) 40%;padding:10px}.card-body h2{font-size:clamp(17px,1.5vw,22px)}.card-body p{font-size:14px}.site-nav{font-size:15px;padding:15px}}
@media(max-width:720px){.wrap{width:calc(100% - 24px)}.mast{height:auto;aspect-ratio:8 / 1;min-height:62px;background-size:100% 100%}.hero,.hero a{min-height:0;aspect-ratio:2.3 / 1}.site-nav{justify-content:center;gap:12px;padding:12px 8px}.watch-card{grid-template-columns:60px minmax(0,1fr) 34%;min-height:155px}.watch-card .card-photo{min-height:150px}.watch-title{font-size:clamp(23px,5vw,36px)}}
@media(max-width:420px){.watch-card{grid-template-columns:49px minmax(0,1fr) 32%;gap:6px;padding:6px}.watch-card .card-photo{min-height:145px}.card-body h2{font-size:13px}.date-tile{font-size:12px}.site-nav{font-size:10px;gap:8px}}

/* v1.2: preserve full reference artwork on mobile instead of center-cropping. */
@media (max-width: 720px) {
  .mast {height:auto; min-height:0; aspect-ratio:1024 / 125; background-size:100% 100%; background-position:center; background-repeat:no-repeat;}
  .hero {height:auto; min-height:0; aspect-ratio:1024 / 317; background-size:100% 100%; background-position:center; background-repeat:no-repeat;}
  .hero a {display:block; height:100%; min-height:0; aspect-ratio:auto;}
  .site-nav {max-width:100%; flex-wrap:wrap;}
}
@media (max-width: 400px) {
  .mast {height:auto; min-height:0; aspect-ratio:1024 / 125;}
  .hero, .hero a {min-height:0;}
}

/* Real, accessible newsletter form replacing the image-only controls. */
.hero{height:auto!important;min-height:0!important;background:none!important;border-bottom:5px solid var(--cyan);overflow:hidden}
.hero-art{width:100%;aspect-ratio:1024/245;background:#001025 url(assets/hero-clean.jpg) center center / 100% 100% no-repeat}
.hero-subscribe{background:linear-gradient(100deg,#061a31,#06152b 60%,#081d31);padding:10px max(20px,calc((100% - 1400px)/2));}
.hero-form-inner{max-width:700px}
.hero-subscribe form{display:flex;gap:10px;align-items:stretch;width:100%}
.hero-subscribe input{min-width:0;flex:1;padding:15px 18px;background:#fff;color:#091b31;border:2px solid #dce8f2;border-radius:6px;font-size:16px}
.hero-subscribe button{flex:0 0 auto;padding:14px 25px;border:0;border-radius:6px;background:linear-gradient(100deg,#e6008d,#f000a2);color:#fff;font-weight:900;font-size:16px;cursor:pointer}
.hero-subscribe button:hover,.hero-subscribe button:focus-visible{background:#b70073;outline:2px solid white;outline-offset:2px}
.hero-subscribe .notice{margin-bottom:8px;border-radius:5px}
@media(max-width:720px){.hero{aspect-ratio:auto!important}.hero-art{aspect-ratio:1024/245}.hero-subscribe{padding:12px 16px}.hero-subscribe form{flex-direction:column}.hero-subscribe input,.hero-subscribe button{width:100%;min-height:48px}.hero-subscribe button{font-size:15px}}
@media(min-width:721px){.hero-art{max-height:340px}}

/* v1.3: render the clean artwork as a real image, then a separate form.
   This prevents older background rules from placing a form over the banner. */
.hero{display:block!important;aspect-ratio:auto!important;height:auto!important;min-height:0!important;background:none!important;overflow:visible!important}
.hero-art-image{display:block!important;width:100%!important;height:auto!important;max-width:none!important;aspect-ratio:1024 / 245;object-fit:fill}
.hero-subscribe{position:static!important;display:block!important;transform:none!important;margin:0!important;width:100%!important;box-sizing:border-box!important;clear:both!important;padding:16px max(18px,calc((100% - 1100px)/2))!important}
.hero-form-inner{width:100%;max-width:760px;margin:0 auto}
.hero-subscribe form{position:static!important;display:flex!important;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0!important}
.hero-subscribe form input{flex:1 1 280px;min-height:52px}
.hero-subscribe form button{flex:0 1 auto;min-height:52px}
@media(max-width:720px){.hero-subscribe{padding:14px 18px!important}.hero-subscribe form{flex-direction:column!important}.hero-subscribe form input,.hero-subscribe form button{width:100%!important;flex:auto!important}}

/* v1.4 — desktop and mobile layout repair: preserve artwork proportions. */
html{overflow-x:hidden}body{overflow-x:clip}
.mast{width:min(1200px,100%);height:auto!important;min-height:0!important;aspect-ratio:1024/125;margin-inline:auto;background-image:url(assets/header.jpg)!important;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important}
.site-nav{width:min(1200px,100%);margin-inline:auto;box-sizing:border-box;flex-wrap:wrap;row-gap:10px}
.hero{width:min(1200px,100%);margin-inline:auto;overflow:hidden!important}
.hero-art-image{width:100%!important;height:auto!important;aspect-ratio:1024/245!important;object-fit:contain!important}
.hero-subscribe{width:100%!important;padding:14px 22px!important;background:#041a2f!important}
.hero-form-inner{max-width:950px!important}
.hero-subscribe form{width:100%!important;display:flex!important;flex-wrap:nowrap!important;gap:12px!important}
.hero-subscribe form input{flex:1 1 auto!important;width:0!important;min-width:0!important;max-width:none!important}
.hero-subscribe form button{flex:0 0 auto!important;white-space:nowrap!important}
.wrap{width:min(1160px,calc(100% - 36px))!important}
.watch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.watch-card{min-width:0;grid-template-columns:75px minmax(0,1fr) 36%;gap:10px}
.watch-card>a:last-child{min-width:0}
.watch-card .card-photo{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
 .mast{aspect-ratio:1024/125!important}
 .site-nav{gap:8px 15px!important;font-size:12px!important;padding:12px 8px!important}
 .hero-subscribe{padding:12px 16px!important}
 .hero-subscribe form{flex-direction:column!important;flex-wrap:nowrap!important;gap:10px!important}
 .hero-subscribe form input,.hero-subscribe form button{flex:initial!important;width:100%!important;min-height:48px!important}
 .watch-grid{grid-template-columns:1fr}
 .watch-card{grid-template-columns:60px minmax(0,1fr) 34%;gap:7px}
 .wrap{width:calc(100% - 24px)!important}
}
@media(max-width:400px){.watch-card{grid-template-columns:48px minmax(0,1fr) 32%;gap:6px}.watch-card .card-photo{min-height:135px}}