/*
Theme Name: Toivo Digital
Theme URI: https://example.com/toivo-digital
Author: Toivo Digital
Description: A polished, responsive business theme for development, training, and support services.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: toivo-digital
*/

:root {
  --td-black: #050608;
  --td-black-soft: #0b1016;
  --td-white: #f7fbff;
  --td-ice: #71d7ff;
  --td-ice-deep: #279cd1;
  --td-silver: #b8c1cc;
  --td-line: rgba(113, 215, 255, .22);
  --td-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--td-black);
  color: var(--td-white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
a { color: var(--td-ice); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover, a:focus { color: #b9edff; }
img { height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--td-ice); line-height: 1.14; letter-spacing: -.025em; }
h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { color: var(--td-silver); font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; padding: .75rem; background: #fff; color: #000; z-index: 100000; }
.container { width: min(calc(100% - 2rem), var(--td-width)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 6, 8, .91);
  border-bottom: 1px solid var(--td-line);
  backdrop-filter: blur(14px);
}
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.custom-logo-link { display: flex; align-items: center; }
.custom-logo { display: block; width: auto; max-height: 54px; }
.site-title { color: var(--td-white); font-size: 1.3rem; font-weight: 750; text-decoration: none; }
.menu-toggle { display: none; border: 1px solid var(--td-line); border-radius: 7px; background: transparent; color: var(--td-white); padding: .65rem .8rem; }
.primary-menu, .primary-menu ul, .footer-menu, .policy-menu { list-style: none; margin: 0; padding: 0; }
.primary-menu { display: flex; align-items: center; gap: .15rem; }
.primary-menu a { display: block; padding: .8rem 1rem; color: var(--td-white); font-size: .93rem; font-weight: 650; text-decoration: none; }
.primary-menu a:hover, .primary-menu .current-menu-item > a, .primary-menu .current-menu-ancestor > a { color: var(--td-ice); }
.primary-menu .menu-item-has-children { position: relative; }
.primary-menu .menu-item-has-children > a::after { content: "⌄"; margin-left: .4em; color: var(--td-silver); }
.primary-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 210px; padding: .55rem; border: 1px solid var(--td-line); border-radius: 10px; background: #0b1016; box-shadow: 0 18px 45px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .18s ease; }
.primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu a { border-radius: 6px; }
.primary-menu .sub-menu a:hover { background: rgba(113,215,255,.08); }

.hero { min-height: min(780px, calc(100vh - 88px)); display: grid; align-items: end; position: relative; isolation: isolate; overflow: hidden; background: #050608 center / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2,4,6,.96) 0%, rgba(2,4,6,.72) 42%, rgba(2,4,6,.12) 76%), linear-gradient(0deg, rgba(5,6,8,.95), transparent 48%); }
.hero-content { max-width: 690px; padding-block: clamp(5rem, 11vw, 9rem); }
.eyebrow { color: var(--td-silver); font-size: .76rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { margin: .3rem 0 1.25rem; text-wrap: balance; }
.hero p { max-width: 590px; color: #dae0e7; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.button { display: inline-block; margin-top: 1rem; padding: .86rem 1.25rem; border: 1px solid var(--td-ice); border-radius: 7px; background: var(--td-ice); color: #031019; font-weight: 800; text-decoration: none; transition: .18s ease; }
.button:hover, .button:focus { background: transparent; color: var(--td-ice); transform: translateY(-2px); }

/*.home-content, .content-area { padding-block: clamp(4rem, 8vw, 7rem); }*/
.page-header { padding: clamp(4rem, 8vw, 7rem) 0 3rem; border-bottom: 1px solid var(--td-line); background: radial-gradient(circle at 80% 0%, rgba(39,156,209,.14), transparent 35%); }
.page-header h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 4.8rem); }
.entry-content { max-width: 820px; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content blockquote { margin-inline: 0; padding-left: 1.3rem; border-left: 3px solid var(--td-ice); color: var(--td-silver); }
.entry-content input, .entry-content textarea, .entry-content select { width: 100%; padding: .85rem; border: 1px solid #34414d; border-radius: 6px; background: #0c1117; color: var(--td-white); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.service-card { padding: 1.7rem; border: 1px solid var(--td-line); border-radius: 14px; background: linear-gradient(145deg, rgba(113,215,255,.07), rgba(255,255,255,.015)); }
.service-card h3 { margin-top: 0; color: var(--td-ice); }
.service-card p { color: var(--td-silver); }

.site-footer { border-top: 1px solid var(--td-line); background: #020304; }
.footer-inner { min-height: 118px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; font-size: .85rem; }
.footer-menu, .policy-menu { display: flex; flex-wrap: wrap; gap: .8rem 1.15rem; }
.policy-menu { justify-content: flex-end; }
.footer-menu a, .policy-menu a { color: var(--td-silver); text-decoration: none; }
.footer-menu a:hover, .policy-menu a:hover { color: var(--td-ice); }
.copyright { color: #85909c; text-align: center; white-space: nowrap; }

@media (max-width: 820px) {
  .header-inner { min-height: 74px; }
  .custom-logo { max-height: 42px; max-width: 220px; }
  .menu-toggle { display: block; }
  .main-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: .5rem 1rem 1rem; background: #070a0e; border-bottom: 1px solid var(--td-line); }
  .main-navigation.is-open { display: block; }
  .primary-menu { display: block; }
  .primary-menu a { padding: .72rem; }
  .primary-menu .sub-menu { position: static; min-width: 0; margin-left: 1rem; padding: 0 0 0 .6rem; border: 0; border-left: 1px solid var(--td-line); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .hero { min-height: 690px; background-position: 62% center; }
  .hero::before { background: linear-gradient(90deg, rgba(2,4,6,.94), rgba(2,4,6,.48)), linear-gradient(0deg, #050608 0%, transparent 65%); }
  .service-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; padding-block: 2rem; text-align: center; }
  .footer-menu, .policy-menu { justify-content: center; }
  .copyright { grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }