/* ===========================================================
   isurl — Friendly Taiwan brand redesign (v1)
   Loaded last via customheader → overrides theme.
   Reversible: clear customheader setting.
   =========================================================== */

/* ---- Brand colours (site-wide via Bootstrap CSS vars) ---- */
:root{
  --bs-primary:#FF7A59 !important;        /* 珊瑚橘 coral */
  --bs-primary-alt:#F2603C !important;     /* coral dark */
  --bs-secondary:#FF9E7A !important;       /* peach (gradient end) */
  --bs-primary-rgb:255,122,89 !important;
  --bs-link-color:#FF7A59 !important;
  --bs-link-hover-color:#F2603C !important;
  --scrollbar-color:#FF7A59 !important;
  --is-mint:#16B89C;
  --is-coral:#FF7A59;
  --is-coralD:#F2603C;
  --is-cream:#FFF8F2;
  --is-ink:#2B2B3A;
}

/* ---- 粉圓 jf-openhuninn (subset, CJK only ~197KB) ---- */
@font-face{
  font-family:'jf-openhuninn';
  src:url('/content/isurl-huninn.woff2') format('woff2');
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+3000-303F,U+3400-9FFF,U+F900-FAFF,U+FE30-FF60,U+FF00-FFEF;
}
/* ---- Friendly rounded type (Latin=Baloo, CJK=粉圓) ---- */
body{font-family:'Noto Sans TC',system-ui,-apple-system,sans-serif;}
h1,h2,h3,h4,.btn,.navbar-logo h1,.isurl-tw-pill,.isurl-freepill{font-family:'Baloo 2','jf-openhuninn','Noto Sans TC',system-ui,sans-serif !important;}
.fw-bolder,.fw-bold{letter-spacing:-.2px;}

/* ---- Rounder, friendlier components site-wide ---- */
.btn{border-radius:999px !important;font-weight:700 !important;}
.card{border-radius:18px !important;}
.form-control{border-radius:14px;}
.btn-primary{box-shadow:0 6px 16px rgba(242,96,60,.28);}
.btn-primary:hover{filter:brightness(.97);}

/* =========================================================
   HERO
   ========================================================= */
.isurl-hero{
  background:
    radial-gradient(60% 80% at 10% 16%, #FFE7DC 0, rgba(255,231,220,0) 60%),
    radial-gradient(55% 75% at 90% 20%, #D6F4ED 0, rgba(214,244,237,0) 60%),
    linear-gradient(180deg,#FFFDFB 0,#FFF6EF 100%);
  border-radius:34px;
  margin:14px 8px 0;
  overflow:hidden;
}
.isurl-hero .container{padding-top:14px;padding-bottom:14px;}

/* mascot */
.isurl-mascot{width:92px;height:92px;vertical-align:middle;animation:isFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(255,122,89,.28));}
@keyframes isFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}

/* brand pills */
.isurl-tw-pill{display:inline-block;background:var(--is-mint);color:#fff;font-weight:700;padding:7px 16px;border-radius:999px;font-size:14px;box-shadow:0 4px 12px rgba(22,184,156,.3);}
.isurl-freepill{display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--is-coralD);font-weight:700;padding:9px 15px;border-radius:999px;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.07);white-space:nowrap;}

/* big rounded shorten form */
.isurl-hero form[data-trigger="shorten-form"]{
  border:0 !important;background:#fff !important;border-radius:22px !important;
  box-shadow:0 16px 44px rgba(255,122,89,.18) !important;padding:10px !important;max-width:680px;
}
.isurl-hero #url{font-size:17px;padding:14px 16px;background:transparent;}
.isurl-hero .btn-primary{padding:13px 30px;font-size:17px;}
.isurl-hero .btn-primary:hover{transform:translateY(-2px);}
.isurl-hero a[href="#advanced"]{background:#fff !important;color:var(--is-coral) !important;border:1.5px solid var(--is-coral) !important;}

/* recolour the decorative cards/gradient text inside hero is automatic via --bs-primary */
.isurl-hero .gradient-primary.clip-text{filter:saturate(1.05);}

@media(max-width:575px){
  .isurl-hero{border-radius:24px;margin:10px 4px 0;}
  .isurl-mascot{width:72px;height:72px;}
}

/* =========================================================
   SECTIONS & CARDS — cohesive friendly polish (v3)
   ========================================================= */
section h2{font-weight:800;letter-spacing:-.5px;}
section h2 .gradient-primary, section h3 .gradient-primary{filter:saturate(1.05);}
.card{border:0 !important;box-shadow:0 6px 22px rgba(43,43,58,.06) !important;transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(255,122,89,.16) !important;}
.icon-md,.icon-lg{border-radius:16px !important;}
/* warm rounded panels for the main feature sections */
#mainfeatures{background:linear-gradient(180deg,#ffffff 0,#FFF7F1 100%);border-radius:36px;margin:18px 8px;}
#features{background:linear-gradient(180deg,#FFF7F1 0,#ffffff 100%);border-radius:36px;margin:18px 8px;}
/* feature pills / badges rounding */
.badge{border-radius:999px !important;}
/* nav links friendlier */
#main-menu .nav-link{font-weight:600;border-radius:999px;transition:background .15s;}
#main-menu .nav-link:hover{background:rgba(255,122,89,.10);color:var(--is-coralD) !important;}
/* footer subtle warm */
#footer-main{background:linear-gradient(180deg,#ffffff,#FFF8F2);}
/* scroll-to-top button → coral */
#scroll-to-top{background:var(--is-coral) !important;}
/* selection colour */
::selection{background:rgba(255,122,89,.25);}

/* navbar logo height fix — size by height so header stays compact (face logo is near-square; theme sets width:180px which made it too tall) */
#navbar-logo{width:auto !important;height:40px !important;}
#main-header.affix #navbar-logo{height:36px !important;}
@media screen and (max-width:992px){#navbar-logo{height:34px !important;}}

/* the data-collect / hassle-free pill: ensure readable padding+weight on coral */
.bg-primary.rounded-pill .clip-text{font-weight:800 !important;}

/* contrast fix v2 — `clip-text` (coral gradient fill) is invisible when it sits on a SOLID
   coral bg-primary surface (eyebrow badges, icon chips, stat blocks, section-heading accents).
   A) clip-text on coral -> solid white.  B) EXCEPTION: <i> icons on a WHITE card nested inside
   a coral section keep their coral gradient.  C) icon-md chips stay white even inside a card.
   bg-opacity-10 (light-coral) surfaces are excluded so their coral icons stay coral. */
.bg-primary:not(.bg-opacity-10) .clip-text{
  -webkit-text-fill-color:#fff !important; color:#fff !important;
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; opacity:1 !important;
}
.bg-primary .card i.clip-text{
  background:linear-gradient(135deg,var(--bs-primary) 0%,var(--bs-secondary) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.icon-md.bg-primary:not(.bg-opacity-10) i,
.icon-md.bg-primary:not(.bg-opacity-10) i.clip-text{
  -webkit-text-fill-color:#fff !important; color:#fff !important; background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
}
.bg-primary.rounded-pill .clip-text{font-weight:800 !important;}

/* header height fix — the23 stacks py-3 on BOTH <header id=main-header> AND its .navbar
   (~64px padding) which made the top bar too tall. Trim both so header height ≈ logo (40px). */
#main-header{padding-top:.35rem !important;padding-bottom:.35rem !important;}
#main-header .navbar{padding-top:.25rem !important;padding-bottom:.25rem !important;}
#main-header.affix{min-height:0 !important;}
#main-header.affix .navbar{padding:9px 15px !important;margin-top:10px !important;}

/* dark mode fix — the redesign hardcodes warm LIGHT surfaces (hero, feature panels, footer,
   form, free pill) which look blinding / hide white text in dark themes; and the theme hides
   the main logo in dark expecting an (empty) altlogo. [data-theme^="dark"] covers dark + dark2;
   surfaces use the theme's own --body/--bg-secondary so they adapt to each dark variant. */
html[data-theme^="dark"] .navbar-logo img:first-child{display:inline-block !important;}
html[data-theme^="dark"] .isurl-hero{
  background:
    radial-gradient(60% 80% at 10% 16%, rgba(255,122,89,.18) 0, rgba(255,122,89,0) 60%),
    radial-gradient(55% 75% at 90% 20%, rgba(22,184,156,.14) 0, rgba(22,184,156,0) 60%),
    linear-gradient(180deg, var(--bg-secondary) 0, var(--body) 100%) !important;
}
html[data-theme^="dark"] .isurl-hero form[data-trigger="shorten-form"]{
  background:var(--bg-secondary) !important; box-shadow:0 16px 44px rgba(0,0,0,.45) !important;
}
html[data-theme^="dark"] .isurl-hero #url{color:#fff !important;}
html[data-theme^="dark"] .isurl-hero #url::placeholder{color:#9aa0aa !important;}
html[data-theme^="dark"] .isurl-freepill{background:var(--bg-secondary) !important;color:#FFB59B !important;box-shadow:0 4px 14px rgba(0,0,0,.35) !important;}
html[data-theme^="dark"] .isurl-hero a[href="#advanced"]{background:transparent !important;color:#FFB59B !important;border-color:#FFB59B !important;}
html[data-theme^="dark"] #mainfeatures{background:linear-gradient(180deg, var(--body) 0, var(--bg-secondary) 100%) !important;}
html[data-theme^="dark"] #features{background:linear-gradient(180deg, var(--bg-secondary) 0, var(--body) 100%) !important;}
html[data-theme^="dark"] #footer-main{background:linear-gradient(180deg, var(--body), var(--bg-secondary)) !important;}

/* mobile bottom tab bar (app-style) — shown <992px only; gives quick access to core
   functions; the floating LINE fab is hidden on mobile since LINE is in the bar. */
.isurl-mobnav{display:none;}
@media(max-width:991.98px){
  .isurl-mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9980;
    background:#fff;border-top:1px solid rgba(0,0,0,.06);box-shadow:0 -6px 22px rgba(43,43,58,.10);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:flex-end;}
  .isurl-mobnav a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:#8A8A99;text-decoration:none;font-size:11px;font-weight:600;line-height:1;padding:3px 2px;
    font-family:'Noto Sans TC',system-ui,sans-serif;}
  .isurl-mobnav a i{font-size:19px;}
  .isurl-mobnav a svg{width:21px;height:21px;display:block;}
  .isurl-mobnav a.active{color:var(--is-coralD);}
  .isurl-mobnav a.is-line svg{color:#06C755;}
  .isurl-mobnav a.is-fab{flex:0 0 auto;margin-top:-26px;color:var(--is-coralD);font-weight:800;}
  .isurl-mobnav a.is-fab .fabcircle{width:54px;height:54px;border-radius:50%;
    background:linear-gradient(135deg,var(--is-coral),var(--is-coralD));color:#fff;
    display:flex;align-items:center;justify-content:center;border:4px solid #fff;
    box-shadow:0 8px 20px rgba(242,96,60,.45);margin-bottom:2px;}
  .isurl-mobnav a.is-fab .fabcircle i{font-size:22px;}
  body:has(.isurl-mobnav){padding-bottom:66px;}
  #isurl-line-fab{display:none !important;}
}
html[data-theme^="dark"] .isurl-mobnav{background:var(--bg-secondary);border-top-color:rgba(255,255,255,.08);box-shadow:0 -6px 22px rgba(0,0,0,.5);}
html[data-theme^="dark"] .isurl-mobnav a{color:#9aa0aa;}
html[data-theme^="dark"] .isurl-mobnav a.active,html[data-theme^="dark"] .isurl-mobnav a.is-fab{color:#FFB59B;}
html[data-theme^="dark"] .isurl-mobnav a.is-fab .fabcircle{border-color:var(--bg-secondary);}